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 Dates | Quiz Dates | Test 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 1 | Quiz 1 | Test 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.