Overview

The CMS Design System encourages using semantic HTML table elements (<table>, <thead>, <caption>, <tbody>, <tr>, <th>, and <td>) in combination with our utility CSS classes. This approach improves accessibility and supports framework-agnostic implementations.

This guidance outlines how to replicate the core functionality of our React Table component using native HTML and Design System classes.

Simple Table

Use a simple table when you need to display static, tabular data with a single header row and consistent column structure.

How to build a simple table

• Use the ds-c-table class on the <table> to apply base styling.
• Use ds-c-table__caption for visible captions to provide context.
• Use the ds-u-text-align--left class on headers and cells to apply consistent alignment.
• Follow semantic HTML best practices for accessibility, such as using <th scope="col"> for column headers and <caption> for context.

Here’s an example:

Multi-header Table

Use a multi-header table when your data requires grouped columns with separate subheaders.

How to build a multi-header table

• To group related columns in the first header row, use <th colspan="X">, where X is the number of columns that belong to the group.
• In the second header row, use <th scope="col"> for each individual sub-column.
• Assign scope="row" to the first <th> in each body row for accessibility.
• Use ds-u-text-align--left for consistent alignment with other table variants.

Here’s an example:

Stackable Table

Stackable tables are useful when you need to display tabular data on small screens. On narrow viewports, each row stacks vertically, and each cell includes a bolded label pulled from its data-title attribute.

How to build a stackable table

• Add the ds-c-table ds-c-table--stacked classes to your <table>. See the next section to choose the appropriate stacked variant for your use case.
• For each <td> cell, include a data-title="[Column name]" attribute that matches its corresponding header.
• Use ds-u-text-align--left for consistent alignment with other table variants.

Choosing a stackable variant

The Design System provides size-based modifiers that control when the table switches to a stacked layout.

The example below uses the ds-c-table--stacked class: