Back to the main menu.
Table Example
There are several ways to make HTML tables readable with
assistive technology. One way is to use the header and the id
attributes of the <th>
and <td>
tags to associate a cell’s contents with the column
heading. Another way is to use the scope
attribute of the
<th>
and <td>
tags to associate
columns and rows with cells located in those columns or
rows.
Establishing an association between data cells and header cells is more
challenging in data tables that have two or more logical levels of row or
column headers. The table below lists travel expenses at two locations
(San Jose and Seattle), by date and by category (meals, hotels, and
transport).
The HTML attribute axis
is used in the example to
enhance the sample table's visual presentation by adding an auditory
component to have the tables rendered using the latest in
technologies based on speech and Braille.
Travel Expense Report
|
Subtotals |
|
|
|
|
37 |
112 |
45 |
|
27 |
112 |
45 |
|
Subtotals |
64 |
224 |
90 |
379 |
|
|
|
|
95 |
109 |
36 |
|
35 |
109 |
36 |
|
Subtotals |
130 |
218 |
72 |
421 |
Totals |
195 |
442 |
162 |
798 |
source code for above :
<TABLE cellpadding="2" cellspacing="2" border="1" width="100%">
<CAPTION>Travel Expense Report</CAPTION>
<TR>
<TH>
<TH id="header2" axis="expenses">Meals</TH>
<TH id="header3" axis="expenses">Hotels</TH>
<TH id="header4" axis="expenses">Transport</TH>
<TD>Subtotals</TD>
</TR>
<TR>
<TH id="header6" axis="location">San Jose</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR>
<TD id="header7" axis="date">24-Aug-04</TD>
<TD headers="header6 header7 header2">37</TD>
<TD headers="header6 header7 header3">112</TD>
<TD headers="header6 header7 header4">45</TD>
<TD></TD>
</TR>
<TR>
<TD id="header8" axis="date">25-Aug-04</TD>
<TD headers="header6 header8 header2">27</TD>
<TD headers="header6 header8 header3">112</TD>
<TD headers="header6 header8 header4">45</TD>
<TD></TD>
</TR>
<TR>
<TD>Subtotals</TD>
<TD>64</TD>
<TD>224</TD>
<TD>90</TD>
<TD>379</TD>
</TR>
<TR>
<TH id="header10" axis="location">Seattle</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR>
<TD id="header11" axis="date">26-Aug-04</TD>
<TD headers="header10 header11 header2">95</TD>
<TD headers="header10 header11 header3">109</TD>
<TD headers="header10 header11 header4">36</TD>
<TD></TD>
</TR>
<TR>
<TD id="header12" axis="date">27-Aug-04</TD>
<TD headers="header10 header12 header2">35</TD>
<TD headers="header10 header12 header3">109</TD>
<TD headers="header10 header12 header4">36</TD>
<TD></TD>
</TR>
<TR>
<TD>Subtotals</TD>
<TD>130</TD> <TD>218</TD>
<TD>72</TD> <TD>421</TD>
</TR>
<TR>
<TH>Totals</TH>
<TD>195</TD> <TD>442</TD>
<TD>162</TD> <TD>798</TD>
</TR>
</TABLE>