A table displays content using rows and columns
Where it goes: In page content
Use: When you have data that’s easiest to read in rows and columns with headers on one or both axes.
Don’t use: For simple data that you can easily describe in regular text. Often, a definition list or bulleted list is more effective than a table.
Additional Instructions
- Right-align numerical data.
- Align headers with their data.
- Enable row sorting only if it can assist the user in completing a task.
- Tables are auto width by default, but content editors can make them full width if needed for consistency, or change column widths.
Usability Notes
- Styles are already set up for tables, including headers. Do not add additional styles.
- Every table must include a
<caption>
element that describes the contents of the table.
Accessibility Notes
- Tables must have
<th>
header cells either along the top or left axis. - Avoid using merged cells.
Example
Wide Screen
![A table with plenty of horizontal space. The top row is header cells, which are grey background with blue text.](/sites/default/files/hrsa/design-system/table-wide.jpg)
Medium Screen
![The same table as the previous image, but for a medium-sized screen with less horizontal space. Some of the text is wrapping.](/sites/default/files/hrsa/design-system/table-medium.jpg)
Narrow Screen
![The same table as the previous images, but for a narrow-sized screen with not much horizontal space. All of the text in the first column is wrapping.](/sites/default/files/hrsa/design-system/table-narrow.jpg)
Variations
Bordered Table
![A table with a border around the exterior and around each cell. The top row is header cells, which are grey background with blue text.](/sites/default/files/hrsa/design-system/table-option-border.jpg)
Borderless Table
![The same table as the previous image, but with the border only between cells and along the bottom of the table. The top row is header cells, but they are on a white background with blue text.](/sites/default/files/hrsa/design-system/table-option-no-border.jpg)
Live examples
![Example of several tables displayed on a web page.](/sites/default/files/hrsa/design-system/table-live-example-bloodstemcell.jpg)
![Example of one table displayed on a web page.](/sites/default/files/hrsa/design-system/table-live-example-awards.jpg)
Date Last Reviewed: