Data Tables

This page describes the requirements for coding simple and complex data tables that are compliant with the 508 Accessibility standards.

Data tables are used to organize data into columns and rows similar to a Microsoft Excel spreadsheet. Data in each cell must be associated with corresponding row and column headers to enable a person using a screen reader to understand the data. (Tables used strictly for layout purposes should NOT include this type of markup.)

Simple Tables

Simple data tables with only one row and/or column of header cells only need <TH>s added to the header row.

Example:

Coffee Club
Drinkers Coffee Cups per Day
John Maxwell House 3
Pete Folgers 6

The code for this table is:

<TABLE border="1">
<caption>Coffee Club</caption>
<TR>

<TH>Drinkers</TH>
<TH>Coffee</TH>
<TH>Cups per Day</TH>
</TR>
<TR>
<TH>John</TH>
<TD>Maxwell House</TD>
<TD>3</TD>
</TR>
<TR>
<TH>Pete</TH>
<TD>Folgers</TD>
<TD>6</TD>
</TR>
</TABLE>

Complex Tables

For data tables that have two or more logical levels of row or column headers, more complex markup is required. The simplest solution is to break up complex tables into two or more simple tables. If that is not an option, use headers and ids to associate header and data cells.

Example:

Trip Report
  Meals Hotels Transport Trip Totals
San Jose
25-Aug-97 37.74 112.00 45.00  
26-Aug-97 27.28 112.00 45.00  
Subtotals 65.02 224.00 90.00 379.02
Seattle
27-Aug-97 96.25 109.00 36.00  
28-Aug-97 35.00 109.00 36.00  
Subtotals 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27


<TABLE border="1">
<caption>Trip Report</caption>
     <TR> 
          <TD> </TD> 
          <TH id="meals">Meals</TH>
          <TH id="hotels">Hotels</TH>
          <TH id="transport">Transport</TH>
          <TH id="triptotals">Trip Totals</TH>   
  </TR>
     <TR> 
          <TH colspan="5" id="san_jose">San Jose</TH>
  </TR>          
     <TR> 
         <TH id="aug-25-97" headers="san_jose">25-Aug-97</TH>
         <TD headers="san_jose aug-25-97 meals">37.74</TD>
         <TD headers="san_jose aug-25-97 hotels">112.00</TD>
         <TD headers="san_jose aug-25-97 transport">45.00</TD>
         <TD> </TD>
  </TR>  
     <TR> 
         <TH id="aug-26-97" headers="san_jose">26-Aug-97</TH>
         <TD headers="san_jose aug-26-97 meals">27.28</TD>
         <TD headers="san_jose aug-26-97 hotels">112.00</TD>
         <TD headers="san_jose aug-26-97 transport">45.00 </TD>
         <TD> </TD>
  </TR>  
     <TR> 
         <TH id="sub" headers="san_jose">Subtotals </TH>
         <TD headers="san_jose sub meals">65.02</TD>
         <TD headers="san_jose sub hotels">224.00</TD>
         <TD headers="san_jose sub transport">90.00</TD>
         <TD headers="san_jose triptotals">379.02</TD>
  </TR>  
     <TR>  
         <TH colspan="5" id="Seattle">Seattle</TH>
     </TR>
     <TR> 
         <TH id="aug-27-97" headers="Seattle">27-Aug-97</TH>
         <TD headers="Seattle aug-27-97 meals">96.25</TD>
         <TD headers="Seattle aug-27-97 hotels">109.00</TD>
         <TD headers="Seattle aug-27-97 transport">36.00</TD>
         <TD> </TD>
  </TR>
     <TR> 
         <TH id="aug-28-97" headers="Seattle">28-Aug-97</TH>
         <TD headers="Seattle aug-28-97 meals">35.00</TD>
         <TD headers="Seattle aug-28-97 hotels">109.00</TD>
         <TD headers="Seattle aug-28-97 transport">36.00 </TD>
         <TD> </TD>
  </TR>
     <TR> 
         <TH id="sub2" headers="Seattle">subtotals</TH>
         <TD headers="Seattle sub meals">131.25</TD>
         <TD headers="Seattle sub hotels">218.00</TD>
         <TD headers="Seattle sub transport">72.00</TD>
         <TD headers="Seattle triptotals">421.25</TD>
  </TR>
     <TR>  
         <TH id="grandtotals">Totals</TH>
         <TD headers="grandtotals meals">196.27</TD>
         <TD headers="grandtotals hotels">442.00</TD>
         <TD headers="grandtotals transport">162.00</TD>
         <TD headers="grandtotals triptotals">800.27</TD>
  </TR>  
</TABLE>

For more information, see WebAim's article on creating accessible tables.

Providing Titles for Data Tables Using the <caption> Tag

Data tables often have a title associated with them. These should be coded using the caption tag, right after the opening <table> tag.

<table border="1">
<caption>Coffee Club</caption>