Tables display alphanumeric information in an ordered arrangement of columns and rows. Every table has a header row that describes or categorizes the following column. Tables may have a footer row that describes, for instance, the total sum of the preceding columns.
Every table needs columns, rows and cells. Cells show the relationship and intersection between information in the rows and columns.
Tables must also have row and column headers to describe the information and data that populates the cells.
Avoid blank cells as screen readers will read the space as blank.
On smaller screens
While tables automatically expand their widths based on the number of characters that each cell row contains, it could exceed the width of the container. This is commonly seen on devices with smaller screens. Solve this by using a horizontal overflow scroll.
Add a table to a page when comparing data, statistics or information.
- Table heading
- Mandatory, bolded – Example “Table 1. Table title”
- Top row header
- Mandatory, bolded, max 50 characters with spaces
- Left row header
- Optional, bolded, max 50 characters with spaces
- Body cells
- Table notes
- Optional, use Caption component
- Build a simple table structure for accessibility purposes.
- Avoid nesting a table within a table.
- Avoid merged, split and blank cells.
Was this page helpful?
Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.