Designing complex table layout using html and css

Question

I am trying to design the following table using html and css how do I proceed with it. Thank you in advance.

Answer 1

This solution will save you from having to use nested tables. The trick is that you really have four rows, not three, and make use of colspan and rowspan .

Note that you need to set a height for the td in order to ensure they are even.

 table { width: 100%; border-collapse: collapse; } td { border: 1px solid black; height: 30px; } 

 <table> <tr> <td colspan="2"></td> <td rowspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td rowspan="2"></td> </tr> <tr> <td rowspan="2"></td> </tr> <tr> <td></td> <td></td> </tr> </table> 

Answer 2

you can try this one:

HTML

<table>
<tr>

   <td>
   <table>

   <tr>
        <td colspan="2">Th</td>
    </tr>
   <tr>
        <td>Th</td>
        <td>Th</td>
    </tr>   
  <tr>
        <td>Th</td>
        <td>Th</td>
    </tr>   
   </table>
   </td>

        <td>Th</td>
</tr>
</table>

CSS

table 
{
width:100%;
height:100px;
text-align:center;
 border:2px solid gray;
 border-collapse: collapse;
}
td
{
border:2px solid gray;
}

.container
{
  width:100%;
}
.container .header
{
  width:100%;
  height:200px;
  background:#5076BB;
}
.container .slider
{
  width:100%;
  height:500px;
  background:#5076BB;
}

DEMO HERE

UPDATED DEMO HERE

Answer 3

Read the tutorial: http://www.w3schools.com/html/html_tables.asp

In particular read the part about the attributes rowspan="" and colspan=""

Example:

<td colspan="2">This table data will span two columns</td>

<td rowspan="2">This table data will span two rows</td>