Basic Tables

When the content of a simple table is descriptive on its own, only a header row or column is needed to give the user an impression of the data in the table.

If the table is larger or its content is more ambiguous, the scope attribute should be used to avoid confusion. See Multi-directional Tables for more guidance on such tables.

Table with header cells in the top row only

The following table of concerts has the cells in the first row marked up as <th> cells without any scope direction. This is only acceptable because it is such a small table and the data itself is distinctly different in each column.

Note: Some screen readers will read “Date – Event – Venue” on 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 differently, with a header column on the left. Also in this situation it is acceptable not to use scope because it is such a small table and the data itself is distinctly different in each row.

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>

Techniques: