Data Tables

In the example above, the cells of the Table are left without any coding to help the AT Device know what the numbers mean.

The standards call for the following:

1. Designate row and column headers using the <th> tag. This is accomplished by changing the tags in the top line from <td> to <th> and make the table look like this:

The code underneath now looks like this:

<tr>
<th>Sales</th>
<th>January</th>
<th>February</th>
</tr>

Sometimes you can get away with only this change. If, as in the case of our Data Table above, you have multiple rows, you need to use the next standard

• Associate the data cells with the appropriate headers.

This is accomplished with the use of Scope attribute and making the first column also into headers <th>. Note that we can fix the layout later with CSS to make it look better.

There is an alternative method for this standard which is used in complex Data Tables. Please see the WebAIM Tutorial for information on how to use Headers and IDs

• Provide names or titles for data tables using the <caption> tag.

We now should add a Caption tag to our table to make it more understandable to folks with AT devices.

The last three standards are:

• Use proportional sizing, rather than absolute sizing.
• Provide summaries using the summary attribute.
• Avoid spanned rows or columns.

The first two of these we covered in Layout Tables. In this case, the Summary statement would provide pretty much the same information as the Caption. I've added this to the last table above.

The last standard is a recommendation to avoid what we might refer to as "merged cells." While this might actually be more commonplace in Layout Tables they do creep up from time to time in complex Data Tables. My advice, try to see if you can break up one complex table into several smaller tables.  For more information and advice on this, see the WebAIM Tutorial.

Return to Accessible Web Design page

Return to Maine CITE