Tables with one header

This page covers tables that have one simple header for rows or one simple header for columns. Data in such tables is descriptive on its own and unambiguous.

If the table content is ambiguous or has both column and row headings, the scope attribute should be used to avoid confusion. For more guidance on such tables, see tables with two headers.

Table with header cells in the top row only

The following table of concerts has the cells in the first row marked up using the <th> element. This is only acceptable because it is such a small table and the data itself is distinctly different in each column so that the relationship between the header and data cells is evident.

Note: Some screen readers will read “Date – Event – Venue” in the “Venue” cell because the direction of the <th> elements is ambiguous.

Example:

Concerts:

Date Event Venue
12 February Waltz with Strauss Main Hall
24 March The Obelisks West Wing
14 April The What Main Hall
Code snippet:
<table>
	<tr>
		<th>Date</th>
		<th>Event</th>
		<th>Venue</th>
	</tr>
	<tr>
		<td>12 February</td>
		<td>Waltz with Strauss</td>
		<td>Main Hall</td>
	</tr>
	[…]
</table>

Table with header cells in the first column only

In the following table, the data from the previous example is laid out with the header column on the left. Also in this situation, it is only acceptable to use this code because it is such a small and straightforward table. The next pages in this tutorial explain how to code more complex tables.

Example:

Concerts:

Date 12 February 24 March 14 April
Event Waltz with Strauss The Obelisks The What
Venue Main Hall West Wing Main Hall
Code snippet:
<table>
	<tr>
		<th>Date</th>
		<td>12 February</td>
		<td>24 March</td>
		<td>14 April</td>
	</tr>
	<tr>
		<th>Event</th>
		<td>Waltz with Strauss</td>
		<td>The Obelisks</td>
		<td>The What</td>
	</tr>
	<tr>
		<th>Venue</th>
		<td>Main Hall</td>
		<td>West Wing</td>
		<td>Main Hall</td>
	</tr>
</table>

Table with ambiguous data

In this example, the data (first name, last name, and city) can’t be distinguished from one another without knowing which header each corresponds to. The scope attribute with the value col defines the direction of the header cells and associates them with the corresponding data cells. The scope attribute is also needed for larger tables with one header row or column.

Example:
Teddy bear collectors:
Last Name First Name City
Phoenix Imari Henry
Zeki Rome Min
Apirka Kelly Brynn
Code snippet:
<table>
  <caption>Teddy bear collectors:</caption>
  <tr>
    <th scope="col">Last Name</th>
    <th scope="col">First Name</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <td>Phoenix</td>
    <td>Imari</td>
    <td>Henry</td>
  </tr>
  <tr>
    <td>Zeki</td>
    <td>Rome</td>
    <td>Min</td>
  </tr>
  <tr>
    <td>Apirka</td>
    <td>Kelly</td>
    <td>Brynn</td>
  </tr>
</table>

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels:

Techniques: