Using the HTML TABLE Tag to Create Accessible Tables

Donald F. Evans

August 20, 2006

Question

What do I need to do to make a table accessible?

Answer

It is easy for a screen reader user to get lost in a table so it is important that we provide some navigational tools. A visual user can easily see which column or which row s/he is in. And they can easily see the column or row heading associated with the it. It's not so easy for a screen reader user. So, a CAPTION, TH tags, and HEADER attributes will go a long way to help.

First of all, make sure you know the difference between using a table for data and one for positioning. We try not to use tables for postioning. We would rather use CSS to place the content on the page. If you must use a table for positioning, DO NOT use TH tags and do not use a CAPTION tag or TITLE attribute in the TABLE tag. Using these will signal some assitive technologies that the table is in fact a data table.

If the table is really used for data, like in a bus schedule, or an expense statement, or a stock portfolio, then ALWAYS use TH tags and the SUMMARY attribute in the TABLE tag.

Example

<TABLE border="1" 
  summary="This table charts the number of
    cups of coffee consumed by each senator,  
    the type of coffee (decaf or regular),
    and whether taken with sugar.">
    <CAPTION>Cups of coffee consumed by each senator</CAPTION>
  <TR>   
    <TH id="header1">Name</TH>
    <TH id="header2">Cups</TH>     
    <TH id="header3"><abbr title="Type">Type of  Coffee</abbr></TH>   
    <TH id="header4">Sugar?</TH>
  <TR>  
    <TD headers="header1">T. Sexton</TD>
    <TD headers="header2">10</TD>
    <TD headers="header3">Espresso</TD>
    <TD headers="header4">No</TD>  
  <TR>  
    <TD headers="header1">J. Dinnen</TD> 
    <TD headers="header2">5</TD>
    <TD headers="header3">Decaf</TD>
    <TD headers="header4">Yes</TD>
  <TR>
</TABLE>

Other Resources