Tables
Tables are used to display tabular data. If you’re unsure whether you should be using a table or a list, here’s a guide.
Guidelines
- It’s fine to have icons, images, avatars etc in tables.
- By default text in tables should be wrapped. See the section about Text wrapping below.
Navigation
- Navigation should use links (an
aelement) rather than other elements and javascript. - More than one column may contain a link.
Actions
- Actions must apply to the item in the row.
- Table actions must be right-aligned.
- Do not have more than 3 actions; consider an overflow menu or another alternative approach.
- The actions column should not have a header.
Selection
For some uses it makes sense to allow bulk actions, for instance choose 3 items and delete them all. In this case:
- The checkbox must be in the first column.
- There should be a ‘select all’ box in the table header.
See the section on Selection below for more.
Expandable rows
- Try to keep the number of columns in the table to a useable minimum. If you wish to show more information about an item without navigating to another page, consider an expandable row. See the section about this below.
