Search code examples
htmllayouthtml-table

Why is rowspan not working if i switch the order of the cells?

I have a really simple example that is driving me crazy. Can someone explain why is this working

<table>
  <tr>
    <td>January</td>
    <td rowspan="2">$100</td>
  </tr>
  <tr>
    <td>February</td>
  </tr>
</table>

While this isn't?

<table>
  <tr>
    <td>January</td>
  </tr>
  <tr>
    <td>February</td>
    <td rowspan="2">$100</td>
  </tr>
</table>
Solution

  • Perhaps the easiest way to understand what's happening here is to add a third row.

    Firstly, we can have a table where the $100 spans January and February, but not March:

    <table>
  <tr>
    <td>January</td>
    <td rowspan="2">$100</td>
  </tr>
  <tr>
    <td>February</td>
  </tr>
  <tr>
    <td>March</td>
  </tr>
</table>

    Then, we can have one that spans February and March, but not January:

    <table>
  <tr>
    <td>January</td>
  </tr>
  <tr>
    <td>February</td>
    <td rowspan="2">$100</td>
  </tr>
  <tr>
    <td>March</td>
  </tr>
</table>

    As you can see, the value always spans down the table, not up it; similarly, a colspan spans right, not left. In your second example in the question, there is no row below February for the value to span down to, so the attribute has no effect.