Advanced Tables ...

Programatically associate head cells <th> with data cells <td>

Travel Expense Report
City & Dates 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

 

<tr>
<th>City &amp; Dates</th>
<th id="eat">Meals</th>
<th id="sleep">Hotels</th>
<th id="go">Transport</th>

<td id="sub-jose">subtotals</td>
</tr>

<tr>
<th id="jose">San Jose</th>
...

</tr>
<tr>
<td id="aug25">25-Aug-97</td>
<td headers="eat jose aug25">37.74</td>
<td headers="jose sleep aug25">112.00</td>
<td headers="aug25 go jose">45.00</td>

<td></td>

</tr>


Center Column Example -headers & id
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Screen readers don't always do the right thing. Even marked up correctly, JAWS and VO read it incorrectly. NVDA is a star!!

<table>
<caption> Center Column Example</caption>
<tr>
<th id="neg"> Negative</th>
<th id="char"> Characteristic</th>
<th id="pos"> Positive</th>
</tr>
<tr>
<td headers="mood neg"> Sad</td>
<th id="mood" headers="char"> Mood</th>
<td headers="mood pos"> Happy</td>
</tr>
<tr>
<td headers="grade neg"> Failing</td>
<th id="grade" headers="char"> Grade</th>
<td headers="grade pos"> Passing</td>
</tr>
</table>


Paul Adam screen reader testing page for tables - voiceover
WebAIM VoiceOver Practice: Tables
Complex Tables Test - David MacDonald

Sorting Columns

Tables - CSS fun