Skip to Content 
Header cells[DRAFT] Header cells
Header cells are those that contain the information that is critical to understanding the raw data in a table. For example the number 210 is meaningless on its own, but becomes information if you know that it is the data for a) the number of properties in b) a given street. The <th> element needs to be used for header cells so that they are distinguishable from and can be associated with the correct data <td> cells.
Example 1: Table with header cells in the top row only
This table of concert dates only needs the cells in the top row marked up as <th> cells. This is partly because it is such a small table and partly because the data itself is distinctly different in each column.
Concert dates
| Date | Event | Venue |
|---|---|---|
| 12 Feb | Waltz with Strauss | Main Hall |
| 24 Mar | The Obelisks | West Wing |
| 14 Apr | The What | Main Hall |
Code snippet
<table>
<tr>
<th>Date</th>
... </table>
Full code for Example 1: Table with header cells in the top row only 
Example 2: Table with header cells in the top row and first column
This table of opening times has header information contained in both the top row and the first column. All header cells are marked up as <th> cells.
Table of opening times:
| Delivery slots | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|
| 09:00 - 11:00 | Closed | Open | Open | Closed | Closed |
| 11:00 - 13:00 | Open | Open | Closed | Closed | Closed |
| 13:00 - 15:00 | Open | Open | Open | Closed | Closed |
| 15:00 - 17:00 | Closed | Closed | Closed | Open | Open |
Code snippet
<th>Delivery slots</th>
<th>Monday</th>
... Full code for Example 2: Table with header cells in the top row and first column
Related WCAG2.0 Techniques
The following WCAG 2.0 technique was used in the examples above:
Previous page: Concepts