Best practices
Tables are intended to display data that can be easily scanned and compared. Do not use tables to display long paragraphs of text.
When to use
- To help users scan structured data to make informed decisions.
When not to use
- A more detailed amount of information needs to be displayed.
- There is more than one piece of information within a cell.
- For creating layouts.
- For simple, non-tabular information — use a list instead.
Anatomy
- Table caption (can be visibly hidden but important for accessibility)
- Column header
- Row header (border optional)
- Cell – blank (border optional)
- Cell – text (border optional)
- Cell – link (border optional)
Designing tables
Designers – to enable flexibility and options, there is no “table component” as such. Instead, a Table cell component hosts a number of variants that allow you to create many different types of tables. This requires the use of Auto Layout (for cell rows and columns), the Typography component (for table captions), and the Space component (for separating rows on small screens).
By combining the different Table cell variants, it’s possible to create most simple tables that display data and don’t need to support complex interaction.
Responsive tables
Tables are notoriously difficult to handle on smaller screens, such as phones. Consider simplifying the tables on smaller screens by removing some of the less important information.
Tables that require horizontal scrolling are less helpful and if the tables are really wide, they become a hassle to understand. That’s why these tables alter layout, by grouping rows and repeating headers – making it easier for users to understand each row.
Example (same information in both tables)
Content guidelines
- Keep headers short – Tables are useful for scanning for the right information. Users get slowed down in scanning if there’s too much information at once.
- Keep the data short – especially in headers. Use only one or two words when possible to communicate the essence of what the table contains.
- Align consistently – to quickly scan data, it helps if it’s all presented in the same way. Keep your data aligned in the same way throughout the table so users don’t get confused about where the information is.