Table

A table is a pattern for organizing data sets. While data visualization helps quickly summarize a data set, a table allows users to compare and analyze individual data rows.

Classes

Class Applies to Description
.d-table N/A Base table style.
.d-table--inverted .d-table Inverted table style.
.d-table--striped .d-table Applies zebra stripes. Can be used with base and inverted styles.
.d-table__caption N/A Applies base table caption style.

Examples

Base Style

Inverted Style

Used when you want to display a data table on a darker background.

Striped

Accessibility

Use the caption element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.

We provide .d-table__caption for a basic caption style, but you can also use utility classes to apply custom styles as needed.