Table
Tables should enable users to scan, understand, analyze, compare, and act upon the information within them. Use tables to organize and display data efficiently in rows and columns. Users read tables one row or column at a time, making it easy to digest and compare information.
When to use
- Displaying tabular data
- Displaying directories
When not to use
- Non-tabular data
- Robust data visualization
- Dashboard and other layouts
- Long-form content
- Groups of items with different structures
How to determine when to use a table
1. Is content similarly formatted and needs to be compared?
- If yes, continue to next decision point
- If no, consider using another component
The content under the columns for BMI, blood pressure, cholesterol and glulcose are of different structure and formatting, and don’t need to be compared.
This content would be more successful in a list to help make it easier to read and scan.
Example page
The content under the columns for BMI, blood pressure, cholesterol and glulcose are of different structure and formatting, and don’t need to be compared.
This content would be more successful in a list to help make it easier to read and scan.
Example page
2. Is the content long-form?
- If yes, consider using another component
- If no, use the table component
While the content between HSA, HRA and FSA is important to compare and has the same formatting and structure, it is longform content and putting it in a table may make it diffuclt for a user to be able to easily scan and digest.
This content would be more successful in a more content-heavy friendly component like accordions to help make it easier to digest each section.
While the content between HSA, HRA and FSA is important to compare and has the same formatting and structure, it is longform content and putting it in a table may make it diffuclt for a user to be able to easily scan and digest.
This content would be more successful in a more content-heavy friendly component like accordions to help make it easier to digest each section.
Anatomy
- Header: tables should always use a table header row or table header column and in some cases can use both when needed
- Cell: follows the standard paragraph text style, can contain icons with alt text if absolutely needed
- Styling: rows and columns have the option to have horizontal or vertical borders or shading with white, gray 2 or bright blue 10%
Demos & variations
Simple table with alternate shading
If alternate row shading is used, refrain from using horizontal borders.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Data cell | Data cell | Data cell |
| Data cell | Data cell | Data cell |
| Data cell | Data cell | Data cell |
Simple table with horizontal borders
If no cell shading is used, horizontal rules should always be used. If cell text is short and simple, vertical borders don't need to be used. This helps keep visual clutter to a minimum.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Data cell | Data cell | Data cell |
| Data cell | Data cell | Data cell |
| Data cell | Data cell | Data cell |
Complex table with horizontal and vertical borders
For more complex and full tables, use horizontal shading and vertical borders to distinguish the difference between each cell in the table.
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 |
|---|---|---|---|---|
| Row header 1 | Nulla ultricies tempus ex, eget dictum sapien pretium nec. | Suspendisse potenti. Maecenas auctor vehicula mattis. Quisque at vehicula nulla, eu auctor purus. | Nam sed lorem in urna egestas vulputate. Curabitur sit amet augue elit. | Phasellus ultricies fringilla luctus. In placerat purus ut suscipit dignissim. |
| Row header 2 | Nulla ultricies tempus ex, eget dictum sapien pretium nec. | Suspendisse potenti. Maecenas auctor vehicula mattis. Quisque at vehicula nulla, eu auctor purus. | Nam sed lorem in urna egestas vulputate. Curabitur sit amet augue elit. | Phasellus ultricies fringilla luctus. In placerat purus ut suscipit dignissim. |
| Row header 3 | Nulla ultricies tempus ex, eget dictum sapien pretium nec. | Suspendisse potenti. Maecenas auctor vehicula mattis. Quisque at vehicula nulla, eu auctor purus. | Nam sed lorem in urna egestas vulputate. Curabitur sit amet augue elit. | Phasellus ultricies fringilla luctus. In placerat purus ut suscipit dignissim. |
Responsive behavior
Double check that table compresses properly for mobile. If the content in the table does not appear well on mobile or tablet, consider alternative layout options.
Compress columns
For table layouts that are no more than 2 columns.
Stacked table
For table layouts that have 3 or more columns.
Complex table with horizontal and vertical borders in mobile using stacked table behavior.
