G. Tables

Checkpoint (G) states that row and column headers shall be identified for data tables. See the sections below for specific examples and techniques.

Tables

HTML tables can be used for page layout and for displaying rows and columns of related data in "data tables". Data tables use row and/or column headers to associate cells of information with other data. Since they associate cells with other cells in the table, they require additional markup to make sense to users of assistive technology. Unlike data tables, layout tables require no additional tags to be accessible.

In data tables there are two main ways of relating headers to data: scope and headers/ids.  There are also other means that are generally more complex, involving <thead>, <tbody>, <rowgroup> and <colgroup> tags in conjunction with headers/id.  Try to structure your tables to use the less complex methods whenever possible.

Using "Scope" Attributes

This is by far the easiest way to associate header (<th>) cells and data cells.  For column header <th> cells, simply include  scope="col" in the <th> tag.  For row header <th> cells, use scope = "row".

Example 1

Here is a very simple table that uses scope="col" to associate column headers to data cells.

Homework Due DatesQuiz DatesTest Dates
9/2/02 9/4/02 9/6/02
9/23/02 9/25/02 9/27/02
10/14/02 10/16/02 10/18/02


<table width="330">
<tr>
<th scope="col">Homework Due Dates</th>
<th scope="col">Quiz Dates</th>
<th scope="col">Test Dates</th>
</tr>
<tr>
<td>9/2/02</td>
<td>9/4/02</td>
<td>9/6/02</td>
</tr>
<tr>
<td>9/23/02</td>
<td>9/25/02</td>
<td>9/27/02</td>
</tr>
<tr>
<td>10/14/02</td>
<td>10/16/02</td>
<td>10/18/02</td>
</tr>
</table>

Example 2

Suppose we wanted to display students' scores. To do this we would add row headers on the left of the table.

  Homework 1Quiz 1Test 1
Bob 87% 86% 80%
Scott 92% 98% 94%
Tara 94% 82% 91%

In this example, "87%" is Bob's score for the first homework assignment – it is associated with the "Bob" row header and "Homework 1" column header.  To make this table compliant add a blank cell (upper left) and row headers with scope="row."

<table width="440"> <tr> <td></td>
<th scope="col">Homework 1</th>
<th scope="col">Quiz 1</th>
<th scope="col">Test 1</th>
</tr> <tr> <th scope="row">Bob</th>
<td>87%</td>
<td>86%</td>
<td>80%</td>
</tr> <tr> <th scope="row">Scott</th>
<td>92%</td>
<td>98%</td>
<td>94%</td>
</tr> <tr> <th scope="row">Tara</th>
<td>94%</td>
<td>82%</td>
<td>91%</td>
</tr>
</table>

Checkpoint (G) Techniques

See the Checkpoint (G) techniques for instructions for this section.

Complex Table

For more information about designing complex tables that are accessible, refer to Checkpoint (H).

This page adopted from the Curriculum for Web Content Accessibility Guidelines 1.0, Copyright  ©  2000 W3C (MIT, INRIA, Keio), All Rights Reserved.