U.S. Department of Energy - Energy Efficiency and Renewable Energy
Communication Standards and Guidelines
Data Tables
508
Data tables are true representations of organized data, like an Excel spreadsheet. So that those using screen readers can understand the data, it is essential that data cells in these types of tables are associated with their appropriate header cells. (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:
| Drinkers |
Coffee |
Cups per Day |
| John |
Maxwell House |
3 |
| Pete |
Folgers |
6 |
The code for this table is: <TABLE border="1">
<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:
| |
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">
<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>
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>
|