Figma
StorybookExamples
Table with multi headers and a caption
Loading
Code
React
See Storybook for React guidance of this component.
Style customization
The following CSS variables can be overridden to customize Table components:
Guidance
When to use
- When you need tabular information, such as statistical data.
- When users need to compare sets of information.
When to consider alternatives
- Depending on the type of content, consider using other presentation formats such as definition lists or hierarchical lists.
- If you're writing out name / value pairs, there's often a more compact way compared to using a table.
Usage
- Right-align numerical data in tables. You can use the
alignprop on the TableCell to accomplish this. Right alignment makes it easier to scan and compare numerical values.
Accessibility
- Tables can have two levels of headers. Each header cell should have
scope="col"orscope="row". Learn more about the "scope" attribute. - Complex tables are tables with more than two levels of headers. Each header should be given a unique
idand each data cell should have aheadersattribute with each related header cell’sidlisted. - When adding a title to a table, include it in a
<caption>tag inside of the<table>element.
Learn more
Component maturity
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.