Tables

Use tables to present simple, static tabular data in rows and columns.

Elements

Headers

Layout of two different table cells: text with an icon, text

Cell Examples: Icon and text and text

Headers can be used as the title of a column or cell:

Headers are visually distinct with shaded backgrounds

Headers can include an optional icon for additional context

Do not use the header button for sorting — this is not a data grid component

Cells

Layout of three different table cells: text with an icon, text and numerical

Cell Examples: Icon and text, text and numerical

Table cells have two variants:

Text cells:

Left-aligned content

Optional icon for additional context

Use for non-numerical data (names, descriptions, labels)

Numerical cells:

Right-aligned content (like a traditional spreadsheet)

No icons

Use for numbers, currencies, percentages