Nil Nil - 1 month ago 8
HTML Question

How to create HTML table with complex layout?

How can I create this table with HTML?

table layout drawing

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>

Answer

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)