2.03.01 Data tables: Simple data tables
Explanation
Data tables can be defined as ones that present relational information (e.g. a bus time table), rather than ones that are used for purely presentational purposes.
While fully sighted users can view all or most of a table at once, and refer back to row and column headings quickly, non-sighted users must access tables in a linear fashion. To aid these users in orienting themselves within a table and in understanding the information being presented, some browsers provide table navigation capabilities. These features depend, however, on table row and column headings being properly identified in the page code - if TD ("table data") is used to code every cell throughout the table, there is no way for the browser to identify heading information and relay it to the user.
As a result, when tables are used to present genuinely tabular information, it is essential that heading information is properly coded using the TH ("table header") tag. This can be used to code both column and, where appropriate, row headings - the position of the cell within the table makes it clear to the assistive software which type of heading it contains.
Example of a simple data table
Consider a simple data table:
The following table has been correctly marked up and has had titles applied to the headings. Hover over the headings to reveal it's HTML.
| Subject | Number of candidates | A | B | C | D | E | U |
|---|---|---|---|---|---|---|---|
| Totals | 176 | 28 | 37 | 32 | 32 | 25 | 15 |
| Mathematics | 36 | 6 | 7 | 8 | 6 | 5 | 4 |
| English | 34 | 6 | 8 | 7 | 7 | 5 | 1 |
| Chemistry | 40 | 6 | 9 | 9 | 7 | 5 | 4 |
| Physics | 36 | 6 | 7 | 8 | 6 | 5 | 4 |
| Biology | 30 | 4 | 6 | 7 | 6 | 5 | 2 |
A screen reader would read the table row by row cell by cell. Imagine how difficult it would be to remember a solitary result.
How should a data table be coded?
A data table should be marked-up in HTML and consist of three main parts head, foot and body:
<table>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>...</tbody>
< /table>
A summary of the data the table holds should be used:
<table summary="a summary of what the table displays in here">
The table heading should also be placed in a caption element:
<caption> heading here < /caption>
Column headings should be marked along with its scope:
<table>
<thead>
<tr>
<th scope="col"> Subject </th>
etc
<th scope="col"> U </th>
</tr>
</thead>
<tfoot>...</tfoot>
<tbody>...</tbody>
< /table>
The bottom row contains totals consequently should be in the table footer.
Note: It follows directly after the table header.
Note: The first column is a header with a scope of row:
</thead>
<tfoot>
<tr>
<th scope="row"> Totals </th>
<td> 176 </td>
etc
<td> 15 </td>
</tr>
</tfoot>
<tbody>
Every heading should be defined by <th> ... </th> the direction the heading is relevant in is defined by the scope.
For columns: <th scope="col"> and for rows: <th scope="row">
<tbody>
<tr>
<th scope="row"> Mathematics </th>
<td> 36 </td>
etc
<td> 4 </td>
<tr>
etc
</tbody>
How it looks all together in HTML:
<table summary="A table outlining the A level examination grades per subject">
<caption>A level examination results</caption>
<thead>
<tr>
<th scope="col">Subject</th>
<th scope="col">Number of candidates</th>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
<th scope="col">U</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Totals</th>
<td>176</td>
<td>28</td>
<td>37</td>
<td>32</td>
<td>32</td>
<td>25</td>
<td>15</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mathematics</th>
<td>36</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>6</td>
<td>5</td>
<td>4</td>
</tr>
etc...
</tbody>
</table>