When including tables into a webpage, it is important to understand the type of table that should be used. There are two types of tables: data tables and layout tables.
Data tables are used to present data in a grid or tabular format. Data tables must be marked up using HTML table elements. All data tables must have proper rows and columns. Header cells should also be used to relate to the data cells. All data tables must have the following markup:
- < Table>: Table
- <Tr>: Table row
- <Th>: Table header cell
- <Td>: Table data cell
A data table with just one header row and/or header column is called a simple data table.
A data table with two or more header rows or header columns is called a complex data table. For complex data table to be accessible, additional markup is required:
- In complex data tables when header cells span multiple rows, id attributes are the recommended method to associate the header to the proper data cell.
- All header attributes must contain an
idattribute that associates the header cell with the data cell.
- All ids must be unique.
- The scope attribute is an alternative for complex data table markup. However, this is an older method and not commonly used today. This attribute identifies if a header cell belongs to a column, row, or multiple rows or columns.
- Row: scope of a row
- Col: scope of a column
- Rowgroup: scope of a group of rows
- Colgroup: scope of a group of columns
Layout tables are used for organization and presentation purposes. They do not have headers or data cells. It is not recommended to use a layout table because they can result in unorganized reading order for individuals using assistive technologies. It is recommended to use a CSS based layout (i.e. Divs), which provide more control over the visual display without compromising the structure. If layout tables are used, the following actions must be considered:
- Layout tables must linearize properly. This means the reading order and logic of the content remain understandable when taken out of the table structure.
- Layout tables should not be used if the information in the table presents data
- Review the layout table and determine if a CSS based layout can be used instead of layout tables if the table is used to organize content. It is not advisable to use a layout table because they can result in an unorganized reading order of content for individuals using assistive technologies. We recommend using a CSS based layout (i.e. Divs), which provide more control over the visual display without compromising the structure.
Why are tables important?
It is important that tables are properly marked up so that users who rely on assistive technologies, such as, users with visual impairments, can receive accurate information about the table. While sighted users can quickly associate the table cells with the corresponding headers, users with visual impairments will not be able to visually see the connection between the cells. Assistive technologies will provide users with all the information of the data cell within that column or row and will associate this information with the corresponding header. Ultimately, proper table markup will provide assistive technology users the information needed to fully understand the significance of the table.