Use tables to structure large amounts of content in a way that makes it easier for people to read and comprehend.
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.
|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.
- 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.
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.
Sorting is switched off by default. Enable sorting to help people find items quicker in longer tables.
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.
- 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.