| Table of Contents |
|---|
Tables vs.
...
list views
Tables should be used for cases where users need to compare pieces of related information. In all other cases, we recommend the use of the list view component (Guidelines for List Viewsviews). Selecting the appropriate component is important, as they have different accessibility features and behave differently on smaller browser widths.
For example, in Figure 1 you can see a table of “Most populous countries”. If each row were to be presented individually, there would not be sufficient information for the content to have meaning. In Figure 1, the population of the United States seems large, but the user does not have the full story until they see this piece of data in the larger context illustrated in Figure 2.
Most populous countries
Name | Population | Area (km2) |
|---|---|---|
United States | 339,815,039 | 9.4M |
Figure 1 - Most populous countries table showing one row
Most populous countries
Name | Population | Area (km2) |
|---|---|---|
India | 1,427,320,458 | 3.3M |
China | 1,425,706,656 | 9.7M |
United States | 339,815,039 | 9.4M |
Indonesia | 277,306,989 | 1.9M |
Figure 2 - Most populous countries table showing four rows
Conversely, Figure 3 illustrates an example where each row of information could be presented individually and retain meaning. In this example, a list view component should be used (Guidelines for List Views).
Attachments
Name | Date modified | Type |
|---|---|---|
Stakeholder Presentation | 2023-05-30 | Microsoft PowerPoint Presentation |
Project Requirements | 2023-05-27 | Microsoft Word Document |
Annual Report 2022 | 2023-01-15 | PDF File |
Usage Data | 2022-12-09 | Microsoft Excel Macro |
Figure 3 - Attachments table
Helpful Questions
Try using these questions to determine the appropriate component:
Is the purpose of displaying this data to allow the user to compare information and gain insights?
Is each piece of data only meaningful when it is presented in context with other data?
If you answered “Yes” to the questions above, it is recommended to use a table component. If you answered “No”, it is recommended to use a list view component.
When to use this
...
component
Use tables when presenting rows and columns of related information that needs to be compared
When not to use this
...
component
Avoid using tables to make the layout of a page look a certain way - Use a layout grid instead
Avoid using tables for data that is long and wordy - Use conventional page headings and paragraphs instead
Best
...
practices
Do
Keep tables as simple and small as possible
Order the columns to reflect the importance of the data to the user
Position related columns adjacent to one another
Left-align textual data
Right-align quantitative numbers like amounts, measures and percentages – Qualitative numbers like dates, postal codes and phone numbers can be left-aligned
Consider the experience on smaller devices and, when possible, use a responsive table
Don’t
Clip, truncate or obscure cell content
Nest tables within other tables - This will make it difficult for screen readers to read the information in the table aloud in a way that makes sense
Merge or split cells - Despite being standard markup for tables for many years, some screen readers still do not fully support complex tables with spanned or multiple levels of row and/or column headers
Have empty table cells - Blank cells may mislead someone using a screen reader into thinking that there is nothing more in the table
Use zebra striping when the table has interactive elements as users may have a difficult time effectively differentiating between disabled, hover, focused and active states
Tips
Get users involved in determining what information needs to be displayed and how they will use it
Test tables using real content in English and French – Placeholder content may not surface issues with clipping or truncation
Accessibility
The WCAG criteria outlined in this section were chosen because they represent some of the most common failures when designing and implementing these components. For a comprehensive list, please see Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org).
1.3.1: Info and Relationships
Identify Row and Column Headers
A critical step toward creating an accessible data table is to designate row and/or column headers. The scope attribute identifies whether a table header is a column header or a row header. The scope attribute tells the browser and screen reader that everything within a column that is associated to the header with scope=”col" in that column, and that a cell with scope=”row” is a header for all cells in that row.
...
H63: Using the scope attribute to associate header cells and data cells in data tables | WAI | W3C
Associating Cells to Headings
Relying on visual cues alone is not sufficient to create an accessible table. Tables without structural markup to differentiate and properly link between header and data cells, create accessibility barriers.
...
Including Captions
When a person accesses your website with assistive technologies, they may not be able to perceive tables visually. Data tables very often have brief descriptive text before or after the table that indicates the content of that table. This text should be associated to its respective table using the <caption> element. The <caption> element must be the first thing after the opening <table> tag.
...
Understanding Success Criterion 1.3.1: Info and Relationships | WAI | W3C
1.4.4 Resize Text
The intent of this success criterion is to ensure that text can be resized without assistive technology up to 200 percent without loss of content or functionality. Users may benefit from scaling all content on the web page, but text is most critical.
...
Understanding Success Criterion 1.4.4: Resize Text | WAI | W3C
1.4.10 Reflow
WCAG success criterion 1.4.10 Reflow (AA) was introduced in WCAG version 2.1 (June 2018). This criterion requires that content be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
...
While scrolling in two dimensions is permitted as an exemption under this criterion, this may still present usability challenges on smaller viewports. Please see the Resources section for examples of responsive tables.
Content Disappearing
A technique that is often used to make tables more manageable on smaller browser widths is to remove columns. Reflow does not require that content be displayed in the same way on all browser widths, but it must still be available.
...
Understanding Success Criterion 1.4.10: Reflow | WAI | W3C
Key
...
component features
Telerik Blazor DataGrid Component - Overview
Pagination
The Telerik DataGrid component for Blazor supports pagination. You can dynamically choose different Button counts, change the items per page, configure the input type, and control whether you want to show the page size dropdown to your users.
Blazor DataGrid Demos - Paging | Telerik UI for Blazor
...
Grid Row Selection
The Telerik DataGrid for Blazor allows you to select an item or a multitude of items.
Blazor DataGrid Demos - Selection | Telerik UI for Blazor
...
Sorting
The Telerik DataGrid for Blazor allows you to sort its data by one or multiple fields in ascending and descending order.
Blazor DataGrid Demos - Sorting | Telerik UI for Blazor
...
Examples
| Info |
|---|
Note: The following example is a visual illustration of how this component could be used in a MAACE application. Live examples of the Telerik UI component implemented in MAACE applications will be added when available. |
...
Resources
Government of Canada
...
resources
Data tables - Canada.ca design pattern - Canada.ca
5.3 Use tables to organize data - Canada.ca Content Style Guide - Canada.ca
External
...
resources
Tables | Ontario Design System
...