Tables

Tables assist users to scan and compare data.

Guidance
Demo & Code

Usage

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.

Table types

There are four table variants:

Horizontal lined
Stripped
Bordered
Stripe and Bordered

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.

When to avoid

Don’t use the tables to layout content on a page, instead use layouts or grids.

How this component works

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:

left align with the exception of numerical data, to facilitate easy scanning
right align numerical data and apply mono-spacing for easier scanning and comparison
favour wrapping over truncating content. Multiple items starting with the same word may appear the same when truncated.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

View in new window View theming example

Default

Table caption for responsive scroll version
Method	Description	Purpose
Annotated prototypes	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.
Storyboards	Sequential images showing the main interactions or events that take place throughout a service.	Help team members and stakeholders visualize the intended user experience.
Service blueprint	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.
User stories	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.

Striped

Table caption for responsive scroll version
Method	Description	Purpose
Annotated prototypes	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.
Storyboards	Sequential images showing the main interactions or events that take place throughout a service.	Help team members and stakeholders visualize the intended user experience.
Service blueprint	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.
User stories	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.

Caption Top

Table caption for responsive scroll version
Method	Description	Purpose
Annotated prototypes	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.
Storyboards	Sequential images showing the main interactions or events that take place throughout a service.	Help team members and stakeholders visualize the intended user experience.
Service blueprint	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.
User stories	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.

Bordered

Table caption for responsive scroll version
Method	Description	Purpose
Annotated prototypes	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.
Storyboards	Sequential images showing the main interactions or events that take place throughout a service.	Help team members and stakeholders visualize the intended user experience.
Service blueprint	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.
User stories	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.

Stripe and Bordered

Table caption for responsive scroll version
Method	Description	Purpose
Annotated prototypes	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.
Storyboards	Sequential images showing the main interactions or events that take place throughout a service.	Help team members and stakeholders visualize the intended user experience.
Service blueprint	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.
User stories	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.