Tables

Tables are specialized HTML markup that is meant to be used only for the display of data. Tables should not be used for page layout. A table is necessary when data needs to be shown in a such a way that it interrelates. In other words there need to be two or more levels of relationship drawn between data to require the use of a table. Data that only requires a single column should be rendered as an unordered list.

It is important to differentiate between simple tables (only two or three inter-related sets of data) and complex tables (multiple inter-related sets of data) because the need for accessibility grows with the complexity of the table. Simple tables will not necessarily require header attributes with matching ID's. The need for a summary will vary with the complexity of the table as well.

How do I make accessible tables?

  • Be sure to mark the beginning of columns and rows by using table header tags - th. This can be styled through CSS to appear as normal text
  • Data tables are easier to find for users of Screen Reader Software if they are preceded by headings. Use of headings can also supply a title and brief description of the purpose of the table
  • Tables should have a summary. The summary details the purpose of the table
  • While not always required, the caption attribute is recommended because it acts like a title for the table if you haven't used headings
  • Complex tables require the use of "header" attributes (different than th tags) and ID elements in order to draw a correlation between column titles and rows.This can become quite involved. Please see this W3C Note for some very helpful information.

View Best Practices for Data Tables for more helpful information.