Headers for a complicated table in HTML

scope covers the simple case; headers covers the one scope cannot express.

<table>
  <caption>Rooms by floor and time</caption>
  <tr>
    <td></td>
    <th id="am" scope="col">Morning</th>
    <th id="pm" scope="col">Afternoon</th>
  </tr>
  <tr>
    <th id="ground" scope="row">Ground floor</th>
    <td headers="ground am">Studio</td>
    <td headers="ground pm">Library</td>
  </tr>
</table>

How it works

scope says whether a <th> labels its row or its column.
headers lists, by id, every header that applies to one cell.
If a table needs headers, consider whether two tables would be clearer.

The run, in numbers

Lines: 13
Characters to type: 286
Tokens: 100
Three-star pace: 75 tpm

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

Type this snippet

Step 1 of 2 in Content that reads, step 13 of 15 in Accessible HTML.

← Previous Next →