Table

Style

Use a table to organize and display data efficiently in a grid with columns and rows. When using a table, consider the structure of the data and how to make it easy for a user to scan, examine, and compare. Although a table can share space with other components and content, consider giving a table extra space on the page to help a user view dense data.

1. Title
2. Column
3. Column title
4. Row
5. Row title
6. Cell
7. Divider
8. Caption

Column and row titles

Column and row titles should be a few words that describe the data in that column or row.

Table title and caption

The table title should make it clear to a user what the data is and what purpose it serves. A caption can be added under the table to provide more information about the data or its source.

Theme

A table is available in both light and dark themes.

Light theme

Dark theme

Scrolling

A scrollbar is visible if content exceeds the width or height of a table. Content can scroll horizontally, vertically, or both.

Space

A table has equal spacing within columns, rows, and in between divider lines. The same spacing is also maintained across large and small viewport sizes.

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Hover

On hover, cell rows and columns are highlighted with a semitransparent background color to make content easier to view.

In light theme, a row is highlighted in light gray on white surface colors and white on light gray surface colors. The column highlight remains light blue.

On all dark theme surface colors, the row highlight is white, and the column highlight uses a dark blue.

Focus

Warning

A cell with focus does not display row and column highlighting unless it is hovered.