Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:
Version:
Theme:
Version:

Table

Tables show tabular data in columns and rows.

Examples

Table with multi headers and a caption

Loading

Code

React

See Storybook "Table" page for React documentation.

Style customization

The following CSS variables can be overridden to customize Table components:

CSS variables for table
VariableDefault Core Theme Value
--table__padding16px
--table__border-colorhex value: #000000--color-black
--table-header__background-colorhex value: #f2f2f2--color-gray-lightest
--table-striped__background-colorhex value: #f2f2f2--color-gray-lightest
--table-striped-header__background-colorhex value: #f2f2f2--color-gray-lightest

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

Component maturity

For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.

Accessibility

  • Color

    Meets AA color contrast standards for accessibility and color blindness.
    Complete
  • Forced Colors Mode (FCM)

    While using FCM the components text is legible and improves readability.
    Complete
  • WCAG 2.1 Level AA Conformance

    All Axe checks for WCAG AA compliance have passed.
    Complete
  • Screen readers

    VoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.
    Complete
  • Keyboard navigation

    Component is fully navigable with a keyboard.
    Complete

Code

  • Storybook

    Component has stories to cover all defined props.
    Complete
  • Responsive

    Component designed to work in all responsive breakpoints.
    Complete
  • Spanish translations

    Includes Spanish translations for default text content.
    Not applicable

Tokens

  • Code

    Tokens implemented in code.
    Complete
  • Design

    Tokens implemented in the Sketch.
    Complete