Data Tables vs Layout Tables

There are significant differences between data tables and tables used for layout. Tables should only be used for layout in special circumstances such as formatting content for email applications. The purpose of data tables is to present information in a grid, or matrix, and to have column or rows that show the meaning of the information in the grid.

Data Table

a typical data table

Designate Row and Column Headers Using the <th> Tag

In order to create an accessible data table one must designate row and/or column headers. Most authoring tools provide a method of changing data cells into header cells. In the markup, the <td> tag is used for table data cells and the <th> tag is used for table header cells. In the example above the column headers are Name, Dept. and Email. The row headers are jdoe01, rstarr01 and jcash01.

Associate the Data Cells with the Appropriate Headers

Headers need to be associated with their corresponding cells. There are two ways to do associate data cells with their headers.

The scope attribute

The scope attribute should be used on simple data tables such as the one in the above example. The scope attribute tells the browser and screen reader that everything under the column is related to the header at the top, and everything to the right of the row header is related to that header. Here is the markup for the table, using the scope attribute:

<table border="1" align="center">
<tr>
<th scope="col">Name</th>
<th scope="col">Dept.</th>
<th scope="col">Email</th>
</tr>

<tr>
<th scope="row">jdoe01/th>
<td>ESTS</td>
<td>jdoe@tufts.edu</td>
</tr>

<tr>
<th scope="row">rstarr01</th>
<td>BSOT</td>
<td>rstarr@tufts.edu</td>
</tr>

<tr>
<th scope="row">jcash01</th>
<td>CELT</td>
<td>jcash@tufts.edu</td>
</tr>

</table>

The headers and id attributes

Another way to accomplish the same purpose is to use the headers and id attributes. This method is NOT recommended for simple tables such as the first example. The headers and id method should only be used complex data tables with more than one logical level in a table, and when it is necessary to link more than two headers with a data cell.

complex data table

a complex data table

<table border="1" align="center">
<tr>
<th id="name">Name</th>
<th id="dept">Dept.</th>
<th id="email">Email</th>
</tr>

<tr>
<th rowspan="2" id="Medford">Medford/th>
<th id="jdoe01">jdoe01/th>
<td headers="Medford jdoe01 dept">ESTS</td>
<td headers="Medford jdoe01 email">jdoe@tufts.edu</td>
</tr>

<tr>
<th rowspan="2" id="Medford">Medford/th>
<th id="rstarr01">rstarr01/th>
<td headers="Medford rstarr01 dept">ESTS</td>
<td headers="Medford rstarr01 email">rstarr@tufts.edu</td>
</tr>

<tr>
<th id="boston">Boston/th>
<th id="jcash01">jcash01/th>
<td headers="boston jcash01 dept">ESTS</td>
<td headers="boston jcash01 email">jcash@tufts.edu</td>
</tr>

</table>

Note: spanned rows and columns are not handled well by the JAWS screen reader, which is the most popular brand of screen reader. If at all possible, avoid complex data tables, or represent the data in a way that is less complex, preferably with no more than two headings applying to a single data cell.