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.

Table with header cells in the top row only Link to this section of the page

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.

<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 Link to this section of the page

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>
	<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”

Related WCAG2.0 Techniques Link to this section of the page

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

• H51 : Using table markup to present tabular data