CP 10 Data tables: simplify and mark up with special HTML
Recommendations
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.
- Split single, large, complex data tables into multiple, smaller, simple ones:
- 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).
- Identify header rows and columns:
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.
Examples

