COMPONENTS

Table

Table is used to display simple datasets that do not need to be filtered or edited.

table-intro
table-anatomy
  1. Column Headers
  2. Single Column
  3. Single Row
  4. Cell

Borders can be used between rows, between columns or on all sides of a cell. Borders can be used to distinguish groupings. To create more distinction, use borders in conjunction with striping.

table-appearance-borders

The heading rows can have either a subtle or bold emphasis. Headings can be turned off if not needed.

table-appearance-heading

A subtle background color can be applied to on alternating rows to help create distinction between the rows in the table.

table-appearance-striping

Table provides a hover state on rows to allow for easy scanning.

table-states

Tables are available in large, medium or small sizes. Each size is available in standard and compact density. Size controls font size and density controls the padding within the cells.

table-sizes
table-guideline-do

DO: Use multiple heading rows if you need to provide a higher-level grouping of the columns.