This page describes the requirements for coding simple and complex data tables on pages outside of the Energy.gov Content Management System.

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

DrinkersCoffeeCups Per Day
JohnMaxwell House3
PeteFolgers6

The code for this table is:

<table>
<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: 

 MealsHotelsTransportTrip Totals
San Jose
25-Aug-9737.74112.0045.00 
26-Aug-9727.28112.0045.00  
Subtotals 65.02224.0090.00379.02
Seattle
27-Aug-9796.25109.0036.00 
28-Aug-9735.00109.0036.00  
Subtotals131.25218.0072.00421.25
Totals196.27442.00162.00800.27

<table>
<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 >
<caption>Coffee Club</caption>