×

html · level 2 · unit 3 · lesson 3

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

says which way a header cell points.

Some tables have names down the side as well as along the top, like a timetable with the days down the left. The first cell of each of those rows is a , written with <th>.

To make each one clear, add scope. scope="col" means the header names the column below it. scope="row" means it names the row beside it.

A screen reader can then read out Monday, Time, 15:30 for a single cell, so a lonely time still makes sense.

<table>
  <caption>After-school clubs</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Club</th><th scope="col">Time</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>Chess</td><td>15:30</td></tr>
    <tr><th scope="row">Thursday</th><td>Drama</td><td>16:00</td></tr>
  </tbody>
</table>

Press show my page to see it here.

Row headers are bold too, so the first column stands out with no extra work.