HTML tables are appropriate for presenting data in two dimensions. In these kinds of tables, there are clear relationships between rows and columns, and typically present row headers, column headers, or both. Screen readers afford users special functionality within tables, such as querying the row and column headers associated with any particular cell.

 

Use Headers and Scope

Data tables should always include table headers (the <th> element). <th> elements should always have a scope attribute. Column headers should include scope="col", and row headers should include scope="row". Including scope attributes allows assistive technology to better understand the logical relationships presented in the table.

How to create a table

• Click on your snippet tool (puzzle piece)
• choose Table Responsive
• Highligh text inside table header, then right click, select cell > cell properties to edit scope.
• right click inside cell and select row or column to add or delete.

Table Example

 

Use Table Captions

Tables can be given an accessible name with the <caption> element. Screen readers allow users to view a list of tables on the page. If the table has an accessible name, a screen reader will provide that name to the user. If not, the screen reader may only read the number of rows and columns. Thus, a <caption> provides substantial usability benefits, especially if there are more than one table on the page. <caption> elements are visible to sighted users as well, unless CSS is written to hide them.

 

Avoid Complex Tables

CCRI recommends avoiding tables with multiple levels of row or column headers and headers that span multiple rows or columns on CCRI websites. Such tables may be difficult to implement with the correct markup and scope attributes, and even if implemented correctly, may be difficult for users to understand. In most cases, some other presentation of the data, including presenting multiple tables, may be an equally effective alternative to a single, complex table.