Tables

Use tables to structure large amounts of content in a way that makes it easier for people to read and comprehend.

Width

In most cases, tables are as wide as the page. However, wide tables make it difficult to read and comprehend small amounts of content. To fix this, reduce the table width to fit the content.

Author Commit Commit date
Alana Page 24 mins ago
Will Howard 1 hour ago
Mia Lopez 3 hours ago
Seema Patel 4 days ago
Harvey Smith 1 week ago

Columns and rows

Organize columns and rows based on the information needs of your users. To help people extract key information first, order the columns by importance from left to right.

An example of using table headings, inactive rows, long text, and empty values
Table heading:
Describes the content in a clear and concise way. If the cell can contain multiple values the heading should be pluralised; otherwise it should be singular. To make tables accessible, header cells must include a heading. However, if the content is secondary in nature you may visually hide the heading to reduce clutter.
Inactive rows:
If the whole row or certain options within it are inactive, the row will be disabled. When this happens, provide a tooltip with an explanation.
Long Text:
To fit a long string of text into a table cell, you can shorten the text (at the end or middle) with an ellipsis (“…”) to show exactly where the text is truncated.
Empty values:
If a cell is empty or unavailable, keep the cell empty. This includes removing the icon entirely to reduce noise and help with legibility.

Content alignment

An example of content alignment in tables

Left align content unless a different alignment helps with comprehension. For example, numeric data is easier to read when right aligned. Always align column headers with column content.

Content sorting

Sorting is switched off by default. Enable sorting to help people find items quicker in longer tables.

An example of content sorting in tables

Actions

Additional actions that a user can take from an individual table row are displayed in the far right column and are visible at all times (no on-hover visibility). If two or more rows have the same actions, those actions should be vertically aligned. Use in-line links to provide additional information to other items in the table.

An example of inline actions in a table
Links:
Use to acccess another page. Aim to include no more than three links per row, in order to focus the user's attention on secondary information.
More menu:
A collapsible menu containing secondary actions that are hidden, in order to focus the user's attention on the main actions in the table. Use the more menu if you want to display more than two secondary actions.