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.

Simple Data Tables

Month Year Pensacola Milton Crestview
Jan 1971-00 5.41 6.24 6.51
Feb 1971-00 4.87 5.04 4.55

The code for the above table is as follows:

<table>

<tr>

<th scope="col">Month</th>

<th scope="col">Year</th>

<th scope="col">Pensacola</th>

<th scope="col">Milton</th>

<th scope="col">Crestview</th>

</tr>

<tr align="center">

<th scope="row">Jan</th>

<td>1971-00</td>

<td>5.41</td>

<td>6.24</td>

<td>6.51</td>

</tr>

<tr align="center">

<th scope="row">Feb</th>

<td>1971-00</td>

<td>4.87</td>

<td>5.04</td>

<td>4.55</td>

</tr>

</table>

The above table speaks properly with a screen reader and satisfies section 508 §1194.22(g) and WCAG Checkpoint 5.1. The th elements identify the row and column headers as required by Section 508 Standards for web accessibility and WCAG 1.0 checkpoints, and it also meets WCAG 2.0 Success Criterion 1.3.1 because it is possible to programmatically recognize the cells that are marked as headers.


Layered Data Tables

Moldboard No-Till
Planning Date OP/OK 25P/25K OP/OK 25P/25K
April 23-26 152 168 154 153
May 2-3 158 161 153 159
May 11-14 156 171 143 154
May 23-24 147 156 122 142

<table>

<tr>

<td></td>

<th id="h12" colspan="2">Moldboard</th>

<th id="h14" colspan="2">No-Till</th>

</tr>

<tr align="center">

<th id="h21">Planning Date</th>

<th id="h22">OP/OK</th>

<th id="h23">25P/25K</th>

<th id="h24">OP/OK</th>

<th id="h25">25P/25K</th>

</tr>

<tr align="center">

<th id="h31" headers="h21">April 23-26</th>

<td headers="h31 h12 h22">152</td>

<td headers="h31 h12 h23">168</td>

<td headers="h31 h14 h24">154</td>

<td headers="h31 h14 h25">153</td>

</tr>

<tr align="center">

<th id="h61" headers="h21">May 23-24</th>

<td headers="h61 h12 h22">147</td>

<td headers="h61 h12 h23">156</td>

<td headers="h61 h14 h24">122</td>

<td headers="h61 h14 h25">142</td>

</tr>

</table>

Tables like this are called layered. The accepted technique for specifying which heading cells apply to which data cell called headers/id markup. As you can see headers attribute of one data cell is space-delimited.

In the above table, there are more than one heading associate with each data cell. For example, on third row second column "152" associated with April 23-24, Moldboard, and OP/OK.


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".