1. Home
  2. Design System
  3. Components
  4. Table

Table

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.

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.

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.

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.

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.

Live examples

Blood Stem Cell

Example of several tables displayed on a web page.

Awards table

Example of one table displayed on a web page.
Date Last Reviewed: