Coding Data Tables on Websites Outside of the Energy.gov Drupal Environment

Follow these requirements for coding simple and complex data tables on websites outside of the Energy.gov Drupal Environment. The data in each cell must be associated with row and column headers so visitors using screen readers can understand the data to be compliant with Section 508.

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>