SkipToContentwww.weather.gov  
NOAA logo - Click to go to the NOAA homepage National Weather Service   NWS logo - Click to go to the NWS homepage
Section 508 - Accessibility banner
  
 
USA.gov is the U.S. government's official web portal to all federal, state and local government web resources and services.
 
Use markup to associate data cells and header cells for data tables having two or more logical levels of row or column headers.

For "complex" tables, i.e. where tables have structural divisions beyond those implicit in the rows and columns, use appropriate markup to identify those divisions. 

Example: A travel expenses worksheet. While the following data table appears simple enough visually, it would be difficult to understand if read by some of today's screen-readers. 

TRAVEL EXPENSES (actual cost, US$)

TRIP,
date

Meals Room Trans. Total
San Jose        
25 Aug 97 37.74 112.00 45.00  
26 Aug 97 27.28 112.00 45.00  
Subtotal 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  
Subtotal 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27

A good way to approximate what some screen-reader users will hear is to hold a ruler to the table, and read straight across the screen. Then, move the ruler down until the next line of characters is displayed. Read straight across. After a while, pick a data cell at random and, without looking at the column or row title, try and remember what headers describe that data point. The larger and more complex the table, the harder it would be to remember the row and column relationships.

Tomorrow's smart browsers or screen-readers will use additional HTML 4.0 markup (TBODY, THEAD, SCOPE, HEADERS, etc.) to "intelligently" decode a table for speech or alternative output. The following code shows one way this table might be marked up to allow the greatest access:

<table border="1" cellpadding="4" cellspacing="0" align="center"><caption>
TRAVEL EXPENSES (actual cost, US$)
</caption>
<thead>
<tr>
<th><p><span id="t1-r1-l1">TRIP</span>,<br />
<span id="t1-r1-l2">date</span></p></th>
<th scope="column">Meals</th>
<th scope="column">Room</th>
<th scope="column">Trans.</th>
<th scope="column">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" headers="t1-r1-l1">San Jose</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td scope="row" headers="t1-r1-l2">25 Aug 97</td>
<td>37.74</td>
<td>112.00</td>
<td>45.00</td>
<td>&nbsp;</td>
</tr>
<tr>
<td scope="row" headers="t1-r1-l2">26 Aug 97</td>
<td>27.28</td>
<td>112.00</td>
<td>45.00</td>
<td>&nbsp;</td>
</tr>
<tr>
<td scope="row">Subtotal</td>
<td>65.02</td>
<td>224.00</td>
<td>90.00</td>
<td>379.02</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" headers="t1-r1-l1">Seattle</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td scope="row" headers="t1-r1-l2">27 Aug 97</td>
<td>96.25</td>
<td>109.00</td>
<td>36.00</td>
<td>&nbsp;</td>
</tr>
<tr>
<td scope="row" headers="t1-r1-l2">28 Aug 97</td>
<td>35.00</td>
<td>109.00</td>
<td>36.00</td>
<td>&nbsp;</td>
</tr>
<tr>
<td scope="row">Subtotal</td>
<td>131.25</td>
<td>218.00</td>
<td>72.00</td>
<td>421.25</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row">Totals</th>
<td>196.27</td>
<td>442.00</td>
<td>162.00</td>
<td>800.27</td>
</tr>
</tbody>
</table>


Back Top

Home, Contact Us

US Dept of Commerce
National Oceanic and Atmospheric Administration
National Weather Service
1325 East-West Highway
Silver Spring, MD 20910
Webmaster: W-CIO.Webmaster@noaa.gov
Content POC: Ronald Jones
Page last modified: 20-Sep-2005 1:32 PM
Disclaimer
Information Quality
Credits
Glossary
Privacy Policy
Freedom of Information Act (FOIA)
About Us
Career Opportunities