A table without headings is just numbers. The th element marks a header cell. Browsers show it bold and centred by default.
index.html
HTML
<table>
<caption>Opening hours</caption>
<tr>
<th scope="col">Day</th>
<th scope="col">Opens</th>
<th scope="col">Closes</th>
</tr>
<tr>
<td>Monday</td>
<td>09:00</td>
<td>18:00</td>
</tr>
<tr>
<td>Sunday</td>
<td>11:00</td>
<td>16:00</td>
</tr>
</table>caption
caption gives the table a title. It must be the first thing inside table. It tells everyone what the table is about before they read the data.
scope
scope says what a header applies to.
| Value | The header labels |
|---|---|
col | The cells below it |
row | The cells to the right of it |
Row headers are useful when each row begins with a name:
index.html
HTML
<table>
<tr>
<th scope="col">Format</th>
<th scope="col">Price</th>
</tr>
<tr>
<th scope="row">Paperback</th>
<td>$9</td>
</tr>
</table>
warning
Using td with bold styling as a header
A
td made bold with CSS looks like a header but is not one. Screen readers cannot tell which cells are labels. Use th.