Web accessibility tutorials Guidance on how to create websites that meet WCAG
Jump to the navigation

Header Cells

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

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.

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.

Example

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>
		<th>Event</th>
		<th>Venue</th>
	</tr>
	<tr>
		<td>12 Feb</td>
		<td>Waltz with Strauss</td>
		<td>Main Hall</td>
	</tr>
	[…]
</table>

Full code for “Table with header cells in the top row only”

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.

Example
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:
<table>
	<tr>
		<th>Delivery slots</th>
		<th>Monday</th>
		<th>Tuesday</th>
		<th>Wednesday</th>
		<th>Thursday</th>
		<th>Friday</th>
	</tr>
	<tr>
		<th>09:00 - 11:00</th>
		<td>Closed</td>
		<td>Open</td>
		<td>Open</td>
		<td>Closed</td>
		<td>Closed</td>
	</tr>
	<tr>
		<th>11:00 - 13:00</th>
		<td>Open</td>
		<td>Open</td>
		<td>Closed</td>
		<td>Closed</td>
		<td>Closed</td>
	</tr>
	[…]
</table>

Full code for “Table with header cells in the top row and first column”

The following WCAG 2.0 technique was used in the examples above: