Provides standard designs and layouts for static (i.e. CSS-only) tables.
Usage Guidelines
Every instance of a static table should use this component. For more complex tables with sorting, filtering, etc. see the Interactive Table component.
Features
The basic table does what you would expect, presenting data in a static tabular format with headers.
Columns can be left, center, or right aligned.
Multiline cell content should be avoided where possible, but is allowed if necessary. Content should be top aligned.
Note that headers are required for accessibility compliance.
A more compact table for situations where the table needs to fit in a smaller space or a large amount of data needs to be presented.
Multiline cell content should be avoided where possible, but is allowed if necessary. Content should be top aligned.
There are a couple special features available for the basic table (not the small size).
Forms can include smaller form inputs or buttons if necessary.
Cells may contain a secondary line of related data below the main entry.
This option should not be used if any of the cells wrap to two or more lines on content.
There are several strategies for ensuring a table works at each breakpoint.
If you determine that certain fields in your table are optional in nature, you can simply remove them to reduce the overall table width until it fits in mobile viewports.
Depending on the type of information presented, a simple way to fit tables into a smaller viewport is combining multiple columns into one. For example, dedicated First and Last name columns can be joined under ‘Name’.
Less important information may be moved from a dedicated column to the secondary row option.
This method should not be used if any cell might wrap to two or more lines.
For larger, more complex tables with a lot of non-optional data it may be necessary to change from using a table to some other display strategy in the mobile view. For example, you may adopt a list view where each item can be opened up to view its complete dataset.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Basic Table | [](/design/c/tables/v1.0.0/#rd-basic-table) |
| Secondary Row | [](/design/c/tables/v1.0.0/#rd-secondary-row) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Small Table | [](/design/c/tables/v1.0.0/#rd-small-table) |
Initial Version
Tables