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

Recommendations

• 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>, col, colgroup, axis - many of these are only required for complex tables (which you should try to avoid) - read more from W3C.

Examples