Cells that span in HTML

colspan widens a cell; rowspan deepens it. Count carefully or the grid breaks.

<table>
  <caption>Room bookings</caption>
  <tr>
    <th scope="col">Room</th>
    <th scope="col" colspan="2">Morning</th>
  </tr>
  <tr>
    <th scope="row" rowspan="2">Studio</th>
    <td>09:00</td>
    <td>Ada</td>
  </tr>
  <tr>
    <td>11:00</td>
    <td>Grace</td>
  </tr>
</table>

How it works

1. colspan is how many columns the cell covers, itself included.
2. rowspan does the same downwards, and later rows lose that cell.
3. Every row must still add up to the same number of columns.

The run, in numbers

Lines

16

Characters to type

247

Tokens

107

Three-star pace

70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 92 seconds.

Type this snippet

Step 3 of 4 in Tables, step 25 of 28 in Document structure.

← Previous Next →