Making tables accessible
The main purpose of the table tag is to represent data that has more than one dimension. In addition, the table tag is often used for page layout, although that is no longer recommended.
For tables that represent multidimensional data, it is important to provide enough accessibility information to help users understand the data. The accessibility information includes the following.
- An accessible name provided by a caption tag in the table.
- An accessible description provided by the summary attribute.
- Optionally, table headers that use th tags with the scope and headers attributes, as described later in this topic.
The following example shows a table followed by the HTML code that created it.
<p id="tableDesc">This table describes the travel expenses broken by ...</p> <table border="1" aria-describedby="tableDesc"> <caption>Travel Expense Report</caption> <thead> <tr> <th></th> <th>Meals</th> <th>Hotels</th> <th>Transport</th> <th>Subtotals</th> </tr> </thead> <tbody> <tr> <th>San Jose</th> <td>65.02</td> <td>224.00</td> <td>90.00</td> <td>379.02</td> </tr> ... </tbody> </table>
Use the scope and headers attributes to better define the relationship between cells and headers. Use the scope attribute in a th tag to further define the purpose of the header. Use the headers attribute in corresponding td tags in complex tables if multiple headers apply to a single cell.
<table border="1"> <caption>Travel Expense Report</caption> <thead> <tr> <th></th> <th id="c2">Meals</th> <th id="c3">Hotels</th> <th id="c4">Transport</th> <th id="c5">Subtotals</td> </tr> </thead> <tbody> ... <tr><td id="r2" colspan="5">San Jose</td></tr> <tr> <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 headers="c5 r2 r3">1,263.52</td> </tr> ... </tbody> </table>