Examples

Table with multi headers and a caption

Code

React

See Storybook "Table" page for React documentation.

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 align prop 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" or scope="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 id and each data cell should have a headers attribute with each related header cell’s id listed.
• When adding a title to a table, include it in a <caption> tag inside of the <table> element.

Learn more

• W3C Web Accessibility Tutorial - Table Concepts
• Design Better Data Tables

Component maturity