Table
A table displays data in rows and columns.
Basic
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Alpha | One | @alphaone |
| 2 | Beta | Two | @betatwo |
| 3 | Charlie | Three | @charliethree |
#
First Name
Last Name
Username
1
Alpha
One
@alphaone
2
Beta
Two
@betatwo
3
Charlie
Three
@charliethree
Shaded
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Alpha | One | @alphaone |
| 2 | Beta | Two | @betatwo |
| 3 | Charlie | Three | @charliethree |
#
First Name
Last Name
Username
1
Alpha
One
@alphaone
2
Beta
Two
@betatwo
3
Charlie
Three
@charliethree
Zebra
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Alpha | One | @alphaone |
| 2 | Beta | Two | @betatwo |
| 3 | Charlie | Three | @charliethree |
#
First Name
Last Name
Username
1
Alpha
One
@alphaone
2
Beta
Two
@betatwo
3
Charlie
Three
@charliethree
Usage
When and how to use it
A table helps visitors scan and understand information by grouping similar content.
Use the table component to show long lists of sequential or structured content. This makes your content easier to read and compare.
Tables also help users find specific information within a large data set. For example, someone looking for their body mass index (BMI) might find it easier to spot the intersection of their height and weight than reading a paragraph of text.
A table should include a table caption to provide brief descriptive text about the data. Tables must identify any row and column headers. Table headers should never be empty.
How not to use it
Tables do not inherently place information in a logical order. Determine the best order for your content (sequential, chronological, alphabetical), and keep it consistent.
Avoid using tables to display long-form content. Consider using a normal page with headings instead.
Also avoid complex tables with multiple merged cells; these are hard to understand and difficult to make accessible. Instead, consider using more than one table.
Do not use a table to demonstrate complex relationships in the data. Use a bar graph, infographic or chart instead.
Do not use a table to format a web page.
Accessibility
Standard accessibility review
Each time a new component version is published:
- Test with the axe accessibility tool
- Review with the VoiceOver or NVDA screen reader
- Ensure all actionable elements are accessible by keyboard command and tab in a logical order
- Check the component layout on a variety of screen sizes