Skip to Local Navigation
Skip to Content
California State University, Long Beach
Web Comm, California State University, Long Beach
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 

Web Accessibility: Tables

§1194.22 (g) Row and column headers shall be identified for data tables.

Irregular Data Tables

Meals Hotels Transport Subtotals
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

All numeric values in the table depend on a row header (date) and column header (type of expense), plus information as to the city where the expense occured .

<table border="1" summary="expenses by date and city">

<tr>

<td></td>

<th id="c2">Meals</th>

<th id="c3" >Hotels</th>

<th id="c4">Transport</th>

<th id="c5">Subtotals</th>

</tr>

<tr align="left">

<th colspan="5" id="r2">San Jose</th>

</tr>

<tr align="center">

<td id="r3">25-AUG-97</td>

<td headers="c2 r2 r3">37.74</td>

<td headers="c3 r2 r3">112.00</td>

<td headers="c4 r2 r3">45.00</td>

<td></td>

</tr>

<tr align="center">

<td id="r4">26-AUG-97</td>

<td headers="c2 r2 r4">27.28</td>

<td headers="c3 r2 r4">112.00</td>

<td headers="c4 r2 r4">45.00 </td>

<td></td>

</tr>

<tr align="center">

<td id="r5">subtotals</td>

<td headers="c2 r2 r5">65.02</td>

<td headers="c3 r2 r5">224.00</td>

<td headers="c4 r2 r5">90.00</td>

<td headers="c5 r2">379.02</td>

</tr>

<tr align="center">

<th id="r10">Totals</th>

<td headers="c2 r10">196.27</td>

<td headers="c3 r10">442.00</td>

<td headers="c4 r10">162.00</td>

<td headers="c5 r10">800.27</td>

</tr>

</table>

The specific cell with value 37.74 is highlighted in preceding code. The cell has a headers attribute consisting of a list of three ids: c2 r2 r3. c2 is the id for cell contaning Meals.Cell r2 contains San Jose, and cell r3 contains 25-AUG-97.

Coding these headers/id combinations is very time-consuming and very error-prone. Every attempt should be made to simplify the table or break up the table, to avoid the needs for headers.id markup.

Summary for Accessible Tables

  • Identify row and column headers by palcing then in first row and first column.
  • Use the table header element, th, for all heaser cells that do not contain data. Use td together with scope or headers attributes for cells containing data together with heading information. You must use the scope on only heading cell if the purpose of the col is ambiguous. For example, a th in the top-left corner could be either a row or column header, and the scope attribute is needed to resove the ambiguity.
  • use ids on the header cells the header attribute on the data cells to explicitly associate header information with data cells. This is essential if the table is irregular, meaning there are data cells whose header information id not the same in the row and the same colunm as that cell.
  • Do not use any of accessible data table markup (th, scope, headers, or summary) on the table used for layout. In particular, avoid gratuitous announcements resulting from summary="This table used for layout".