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

Meals Hotels Transport Subtotals
San Jose



24-Aug-04 37 112 45
25-Aug-04 27 112 45
Subtotals 64 224 90 379
Seattle



26-Aug-04 95 109 36
27-Aug-04 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>