Overview

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.

Design

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
This is the table caption text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Usage guidelines

Structure

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.

Content guidelines

Add a table to a page when comparing data, statistics or information.

Table parts

  1. Table heading
    1. Mandatory, bolded – Example “Table 1. Table title
  2. Top row header
    1. Mandatory, bolded, max 50 characters with spaces
  3. Left row header
    1. Optional, bolded, max 50 characters with spaces
  4. Body cells
  5. Footer
    1. Optional
  6. Table notes
    1. Optional, use Caption component

Best practices

  • 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?

All fields are required unless otherwise indicated.

You will not receive a reply. Do not enter any personal information such as telephone numbers, addresses, or emails.

Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca. If you require a response, please go to our Contact page.