Header cells
Create accessible table headers with <th> and the scope attribute.
Header cells: th
<td> is any data cell; but a table's first row usually holds headers: 'Fruit', 'Price', 'Day' and so on. For these headers you use <th> (table header) instead of <td>.
<th> cells are shown bold and centered by default. Their real value is not appearance but meaning: screen readers announce them as headers and link them to their column.
The scope attribute
You can state explicitly which cells a <th> header describes with the scope attribute. It has two common values:
scope="col"— this cell heads a columnscope="row"— this cell heads a row
Example: <th scope="col">Fruit</th>. This small touch lets screen readers describe the table aloud correctly.
A headered price list
Here is an example with a header row and one data row:
<table>
<tr>
<th scope="col">Fruit</th>
<th scope="col">Price</th>
</tr>
<tr>
<td>Apple</td>
<td>5 TL</td>
</tr>
</table>The first row holds <th> cells; the rows below use <td>. This small difference makes the table both clearer and more accessible.
Exercise Add a header row
Add a <table> to body. The first <tr> row should hold two <th scope="col"> headers (for example Fruit, Price). The second <tr> row should hold two <td> cells (for example Apple, 5 TL).
Show example solution
<body>
<table>
<tr>
<th scope="col">Fruit</th>
<th scope="col">Price</th>
</tr>
<tr>
<td>Apple</td>
<td>5 TL</td>
</tr>
</table>
</body>Test yourself
-
When should you use <th> instead of <td>?
- When you want a colored cell
- When you write a column or row header
- When you want a wider cell
- When you want to leave a cell empty
Show answer
When you write a column or row header — Correct. <th> is for column or row headers; it adds meaning and accessibility.
-
Mark the column header
<th ____>Fruit</th>Show answer
<th scope="col">Fruit</th> -
Match each value to its meaning
- scope="col"
- Column header
- scope="row"
- Row header
- <th>
- Header cell
- <td>
- Data cell