Keeping Alberta Affordable: Eligible seniors and families with children under 18 can apply for $600 affordability payments. Learn more and apply now
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.
Table 1. Generic example of a table
|Heading 1||Heading 2|
|Data 1.1||Data 1.2|
|Data 2.1 long to test responsive on small screen||Data 2.2 also long to test responsive on small screen|
|Data 3.1||Data 3.2|
|Data 4.1||Data 4.2|
|Data 5.1||Data 5.2|
|Total x.1||Total x.2|
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?
You will NOT receive a reply on your feedback. Do NOT include personal information. To get answers to questions, use Alberta Connects.
Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.