Table rowspan understanding

1

Coded the following table:

<table width="500px" border="1">
    <tr>
        <td width="90" height="300"  rowspan="4" >Col 1</td>
      </tr>
    <tr>
        <td colspan="2">Col Span 2</td>
      </tr>
    <tr>
        <td>Detail</td>
        <td>Detail</td>
      </tr>
    <tr>
        <td>Detail</td>
        <td>Detail</td>
      </tr>
    <tr>
        <td width="90" height="300"  rowspan="4" >Col 1</td>
      </tr>
    <tr>
        <td colspan="2">Col Span 2</td>
      </tr>
    <tr>
        <td>Detail</td>
        <td>Detail</td>
      </tr>
    <tr>
        <td>Detail</td>
        <td>Detail</td>
      </tr>           
</table>

I expected the second 3 rows to expand vertically to match the height of the 1st column.

What am I doing wrong here?

3

Yes, Iā€™m expecting the bottom 3 rows to look exactly like the top 3 rows.

4

Figured it out - second td was in the wrong row.

<table width="500px" border="1">
  <tr>
    <td width="90" height="300" rowspan="3">Col 1</td>
    <td colspan="2">Col Span 2</td>
  </tr>
  <tr>
    <td>Detail</td>
    <td>Detail</td>
  </tr>
  <tr>
    <td>Detail</td>
    <td>Detail</td>
  </tr>
  <tr>
    <td width="90" height="300" rowspan="3">Col 1</td>
    <td colspan="2">Col Span 2</td>
  </tr>
  <tr>
    <td>Detail</td>
    <td>Detail</td>
  </tr>
  <tr>
    <td>Detail</td>
    <td>Detail</td>
  </tr>
</table>

Found a table generator which was very helpful:
https://www.tablesgenerator.com/html_tables

1 Like