Overview
Tables display alphanumeric information in an ordered arrangement of columns and rows. Every table has a header row that describes or categorizes the following column. Tables may have a footer row that describes, for instance, the total sum of the preceding columns.
Design
Table 1. Generic example of a table
| Heading 1 | Heading 2 |
|---|---|
| Data 1.1 | Data 1.2 |
| Data 2.1 long to test responsive on small screen | Data 2.2 also long to test responsive on small screen |
| Data 3.1 | Data 3.2 |
| Data 4.1 | Data 4.2 |
| Data 5.1 | Data 5.2 |
| Total x.1 | Total x.2 |
Usage guidelines
Structure
Every table needs columns, rows and cells. Cells show the relationship and intersection between information in the rows and columns.
Tables must also have row and column headers to describe the information and data that populates the cells.
Avoid blank cells as screen readers will read the space as blank.
On smaller screens
While tables automatically expand their widths based on the number of characters that each cell row contains, it could exceed the width of the container. This is commonly seen on devices with smaller screens. Solve this by using a horizontal overflow scroll.
Content guidelines
Add a table to a page when comparing data, statistics or information.
Table parts
- Table heading
- Mandatory, bolded – Example “Table 1. Table title”
- Top row header
- Mandatory, bolded, max 50 characters with spaces
- Left row header
- Optional, bolded, max 50 characters with spaces
- Body cells
- Footer
- Optional
- Table notes
- Optional, use Caption component
Best practices
- Build a simple table structure for accessibility purposes.
- Avoid nesting a table within a table.
- Avoid merged, split and blank cells.