DEV 8.1 Data tables: simplify and mark up with special HTML

Data tables should appear in the simplest form possible - this makes it easier for all people to understand, but particularly for those using adaptive technology (e.g. Screen reader users).

Special HTML code also assists the accessibility of tables.

  • Use the most simple data table possible:
    • Split single, large, complex data tables into multiple, smaller, simple ones:
      • The vast majority of complex tables can be made into simple tables
    • If possible, design so that the table reads out logically row by row and the data values themselves are indicative of their values (see the 'important birthdays' example);
    • Avoid unnecessary rowspan and colspan if possible:
      • Some screen readers have problems with these although modern ones can now cope.
  • Code for added accessibility:
    • Always use <th> to identify header rows and columns, use <abbr> to abbreviate (or replicate) the titles:
      • Some screen readers (most modern ones) can use this information to read out the header rows and columns before the data - this helps avoid people getting lost in long tables;
    • Explicitly associate row and column headers (<th>) with data cells:
      • Use scope (easiest for simple tables), or
      • Use headers and id;
    • Use <caption> to describe the nature of the table;
    • Use <summary> to explain the contents of the table and provide orientation to people who listen to the table.

Note: There are more table elements to help structure tables, namely <tbody><thead><tfoot>colcolgroupaxis - many of these are only required for complex tables (which you should try to avoid) - read more from W3C.

Example code of a simple table showing use of summary, <caption>, <th>, abbr, and scope:

<table summary="Important childrens birthdays to remember. First column: childs name, second: childs age, third: date of birthday" >  

<caption>Important Birthdays</caption>
<tr>   
<th scope="col" abbr="Name" >
Name</th>
<th scope="col" abbr="Age" >

Age</th>
<th scope="col" abbr="Date" >
Date of Birthday</th>
</tr>

<tr>
<th scope="row">Emily</th>    
<td>8 years</td>
 <td>3 September</td>

</tr>
<tr>
<th scope="row">Jack</th>    
<td> 12 years</td>

<td> 28 April</td>
</tr>
</table>

Visual appearance of the 'Important birthdays' table coded above - caption appears above the table, the appearance of the column and row headers are distinctive