htmllayouthtml-table

Why does this <table> layout using rowspan not work as expected?

I need to create the following layout using <table> and without CSS Grid:

desired table layout graphic

What I've tried:

td { border: 1px solid black; }
<table>
  <tbody>
    <tr>
      <td rowspan="3">A</td>
      <td rowspan="2">B</td>
      <td rowspan="1">C</td>
    </tr>
    <tr>
      <td rowspan="2">D</td>
    </tr>
    <tr>
      <td rowspan="1">E</td>
    </tr>
  </tbody>
</table>

Solution

  • The layout works correctly. The second-to-last row has (almost) no height in the example, so it can look like it's missing, especially using CSS libraries that collapse or otherwise reset default styles. Adding CSS height to all <tr> shows that it's working as expected.