CP 10 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, particularly those using adaptive technology (e.g. Screen reader users).

Special HTML code also assists the accessibility of tables - you need to specify certain things so that the content management system, template or person who publishes the web content can insert the code.

  • 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.
  • Specify additional information that the developer will code for added accessibility:
    • Identify header rows and columns:
      • These will be inserted as special tags (called <th> tag),
      • 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;
    • Specify a caption to describe the nature (title) of the table:
      • If your system cannot handle captions, make sure you just give the table a good title in normal text;
    • Write a Summary to explain the contents of the table and provide orientation to people who listen to the table:
      • The summary can be coded into the table to provide more information to people who may require it (e.g. Screen reader users).

Note: If you are passing your pages onto someone who publishes your content to the web, you need to specify this information somewhere on the content that you provide - only you as the content provider know the exact purpose and, therefore, appropriate headings, title (caption) and description (summary) for the table.


Visual appearance of a simple table - caption appears above the table, the appearance of the column and row headers are distinctive