Tabular Data & Tables
Tables are particularly difficult to understand when read by a screen reader when not coded properly. By default, screen readers will read each row, left to right. By the time the listener hears the data on row 3, they may no longer remember which column is which.
For that reason we use tags to identify column and row headers. The scope attribute identifies which data cells are associated to this heading. When coded properly, the screen reader will read the heading, then the associated data, the next heading, followed by the associated data, etc.
Captions are added for additional explanation.
Example 1
Name | Department | Title | Supervisor |
---|---|---|---|
Mary Jones | World News | Editor | Yes |
Tom Smith | Local News | Copywriter | No |
HTML Code for Example 1:
Name | Department | Title | Supervisor |
---|---|---|---|
Mary Jones | World News | Editor | Yes |
Tom Smith | Local News | Copywriter | No |
Example 2
Column 1 Header | Column 2 Header | |
---|---|---|
Row 1 Header | Column 1 Row 1 data | Column 2 Row 1 data |
Row 2 Header | Column 2 Row 1 data | Column 2 Row 1 data |
HTML Code for Example 2
Column 1 Header | Column 2 Header | |
---|---|---|
Row 1 Header | Column 1 Row 1 data | Column 2 Row 1 data |
Row 2 Header | Column 2 Row 1 data | Column 2 Row 1 data |
Best Practices
- Always use
elements for header items. - Always use scope attributes in
tags unless id and headers attributes are required. - Always use
elements. - Use summary attributes for complicated tables.
- Use
elements for tabular data. Use and elements to affect layout.
- Avoid cells that span multiple rows or multiple columns.
CMS Entry
Summary
Must be added for accessibility
- Select Table
- Enter Summary information
Header Row or Column
- Highlight the row or column
- Choose Format as table header
Add a Border
- Select table
- Select with Border