How to create HTML table with complex layout?

Issue

How can I create this table with HTML?

I tried it but not sure how to do it correctly.

My code:

<table border=1 cellpadding=0 cellspacing=0>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td colspan="2">&nbsp;&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td colspan=2>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
  </tr>
</table>

Solution

Use rowspan and colspan attributes.

The table has 3 columns (cells) and 3 rows:

<table>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td colspan="2" rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
   <!-- <td> from prev <tr> here with colspan="2" and rowspan="2" -->
   <td>&nbsp;</td>
</tr>
</table>​

Make sure that every row (<tr>) has always the same count of cells/columns (<td>). An <td> with colspan="2" counts as 2.

• So the first <tr> has 3 cells (1+1+1).
• The second has also 3 (2+1) ...
• ... and the last has one <td> from the previous <tr> which has colspan="2" and rowspan="2" and the last <td> element, so 3 cells (2+1)

Answered By - Daniel Kutik