Use tables to structure data in rows and columns, so users can scan, sort and compare information.
When creating tables, present content in a simple and logical way for users to understand. For example, order by hierarchy or alphabetically.
There are four table variants:
Choose the table variant that best displays your data. All tables scroll horizontally on smaller breakpoints by default and columns widths can be adjusted to best space out the content for greater legibility.
Don’t use the tables to layout content on a page, instead use layouts or grids.
Captions
Use a caption to describe the table's contents. The caption may be displayed at the top or bottom of the table.
Contents
To assist with readability of the table content:
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.
Method | Description | Purpose |
---|---|---|
Prototypes that include brief notes or comments that explain the rationale behind features and design choices. |
Help give context behind decisions and reminds team members why specific design elements were selected. |
|
Sequential images showing the main interactions or events that take place throughout a service. |
Help team members and stakeholders visualize the intended user experience. |
|
A diagram that visualizes a new process or service and how the organization’s internal processes, people, systems and policies will support it. |
Helps organizations understand what will be needed for a successful implementation. |
|
Short sentences written from the perspective of users, describing their need and the reason behind. |
Help document the different needs that a service must address, shifting the focus from creating detailed requirements to discussing user needs within a specific context. |
Method | Description | Purpose |
---|---|---|
Prototypes that include brief notes or comments that explain the rationale behind features and design choices. |
Help give context behind decisions and reminds team members why specific design elements were selected. |
|
Sequential images showing the main interactions or events that take place throughout a service. |
Help team members and stakeholders visualize the intended user experience. |
|
A diagram that visualizes a new process or service and how the organization’s internal processes, people, systems and policies will support it. |
Helps organizations understand what will be needed for a successful implementation. |
|
Short sentences written from the perspective of users, describing their need and the reason behind. |
Help document the different needs that a service must address, shifting the focus from creating detailed requirements to discussing user needs within a specific context. |
Method | Description | Purpose |
---|---|---|
Prototypes that include brief notes or comments that explain the rationale behind features and design choices. |
Help give context behind decisions and reminds team members why specific design elements were selected. |
|
Sequential images showing the main interactions or events that take place throughout a service. |
Help team members and stakeholders visualize the intended user experience. |
|
A diagram that visualizes a new process or service and how the organization’s internal processes, people, systems and policies will support it. |
Helps organizations understand what will be needed for a successful implementation. |
|
Short sentences written from the perspective of users, describing their need and the reason behind. |
Help document the different needs that a service must address, shifting the focus from creating detailed requirements to discussing user needs within a specific context. |
Method | Description | Purpose |
---|---|---|
Prototypes that include brief notes or comments that explain the rationale behind features and design choices. |
Help give context behind decisions and reminds team members why specific design elements were selected. |
|
Sequential images showing the main interactions or events that take place throughout a service. |
Help team members and stakeholders visualize the intended user experience. |
|
A diagram that visualizes a new process or service and how the organization’s internal processes, people, systems and policies will support it. |
Helps organizations understand what will be needed for a successful implementation. |
|
Short sentences written from the perspective of users, describing their need and the reason behind. |
Help document the different needs that a service must address, shifting the focus from creating detailed requirements to discussing user needs within a specific context. |