Search code examples
htmlhtml-table

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>
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)