Language selection

Government of Canada / Gouvernement du Canada

Search

Tables: Canada.ca design system

  • Last updated: 2021-05-21

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

On this page

When to use

What to avoid

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.

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

Example

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

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

Updated to include the provisional code for responsive cards

Page details

Date modified: