Tables: Canada.ca design system

Last updated: 2021-05-21

Data tables allow you to communicate data efficiently using rows and columns.

When to use

Use to present data visually
Use to organize related information, such as contact numbers and details
Use tables to organize data (Canada.ca Content Style Guide)

What to avoid

Do not use data tables to force layout for text
Never include a data table as an image
Limit the use of texture and colour (Canada.ca Content Style Guide)
Avoid having blank cells (Canada.ca Content Style Guide)

How to implement

You can use either the beta or the stable version of this pattern. The beta tables use provisional CSS to make the tables responsive on small screens.

The beta version will eventually replace the stable version.

Beta (responsive) data tables

Beta responsive tables are:

supported only for simple WET tables that don't have merged rows or columns
not supported by IE 11

Responsive tables create cards in mobile and small tablet view.

Because this is still in beta, make sure to test your tables in different views, especially if you add a lot of customization.

Screen size:

Code

<table class="provisional gc-table table" id="myTable1">
 <caption>Population growth in Canadian cities</caption>
 <thead>
  <tr>
   <th>City</th>
   <th>Population in 2007</th>
   <th>Population in 2017</th>
   <th>Percentage change</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td data-label="City">Toronto</td>
   <td data-label="Population in 2007">5,418,207</td>
   <td data-label="Population in 2017">6,346,088</td>
   <td data-label="Percentage change">17.1%</td>
  </tr>
  <tr>
   <td data-label="City">Montréal</td>
   <td data-label="Population in 2007">3,714,846</td>
   <td data-label="Population in 2017">4,138,254</td>
   <td data-label="Percentage change">11.4%</td>
  </tr>
  <tr>
   <td data-label="City">Vancouver</td>
   <td data-label="Population in 2007">2,218,134</td>
   <td data-label="Population in 2017">2,571,262</td>
   <td data-label="Percentage change">15.9%</td>
  </tr>
  <tr>
   <td data-label="City">Ottawa–Gatineau</td>
   <td data-label="Population in 2007">1,188,073</td>
   <td data-label="Population in 2017">1,377,016 </td>
   <td data-label="Percentage change">15.9%</td>
  </tr>
 </tbody>
</table>

Customizing tables

Option	Description	How to use
Table borders	Adds a border to help visually separate the table cells when they have a lot of content	Add the class `table-bordered` to the `<table>`
Condensed spacing	Narrows the height of the cells within the table	Add the class `table-condensed` to the `<table>`
Striped rows	Alternates the colour of the table rows from white to grey	Add the class `table-striped` to the `<table>`
Hover rows	Causes the background to darken when a mouse hovers over a row	Add the class `table-hover` to the `<table>`
Left aligned	Align the text in any cell on mobile cards	Add the class `text-left` to the HTML item in the `<td>` you wish to align left, like a `<span>` or a `<ul>`
Simple filter	Provides simple filtering for the table	Add the class `wb-filter` to the `<table>`
Enable DataTables plugin	Provides searching, sorting, filtering, pagination, etc. DataTables plugin documentation	Add the class `wb-tables` to the `<table>` and add the appropriate `data-wb-tables=""` values

Stable data tables

Use defined presentation classes for tables included in WET
Ensure each column treats only one data facet
Where possible, use WET 4 tables to enable sorting and filtering controls
- this is recommended when there are more than 12 rows
Add optional pagination controls for any table with more than 12 rows
Never include tabular data as an image

Working example

WET: Tables

Example

Screenshot illustrating the data table pattern on Canada.ca. Details on this graphic can be found in the surrounding text. — **Data tables pattern**

Research and blog posts

We tested the use of responsive tables successfully during optimization projects with Health Canada for recalls and safety, with CRA for organizing contact information, and across various COVID-19 content. Responsive tables are easier for users on small screens to use without having to scroll sideways to see all the content.

Latest changes

2021-05-21: Updated to include the provisional code for responsive cards

Discussion

Discuss the pattern in github issues

Did you find what you were looking for?

What was wrong?

I can't find the information

The information is hard to understand

There was an error or something didn't work

Other reason

Please provide more details

You will not receive a reply. Telephone numbers and email addresses will be removed.
Maximum 300 characters

Date modified:: 2021-05-21

Language selection

Search