# Table Elements Learn how to build accessible and responsive tables using semantic HTML and CMS Design System utility classes. ## Overview The CMS Design System encourages using semantic HTML table elements (``, ``, ``, ``, `
`, `
`, and ``) 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. The React Table component will eventually be deprecated in favor of these HTML-based patterns. ### 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 `` 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 `
` for column headers and `
` for context. Here’s an example:
Founding documents
Document title Description Links Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. View 1776
Articles of Confederation This document served as the United Statesʼ first constitution. View 1777
The Constitution Replaced the Articles of Confederation with a new form of government. It created a federal system with a national government composed of 3 separated powers, and included both reserved and concurrent powers of states View 1787
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. View 1791
### 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 `
`, where X is the number of columns that belong to the group. - In the second header row, use `` for each individual sub-column. - Assign `scope="row"` to the first `` in each body row for accessibility. - Use `ds-u-text-align--left` for consistent alignment with other table variants. Here’s an example:
Household members
Address Employment
Name Street ZIP code Employer Industry
John Doe 123 Braavos Ave. 20005 Acme Co. Healthcare
Jane Doe 456 King's Landing 20005 Acme Co. Healthcare
### 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 ``. See the next section to choose the appropriate `stacked` variant for your use case. - For each `
` 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. | Class | Stacking behavior | Breakpoint | |-------|-------------------|------------| | `ds-c-table--stacked` | Always stacked, on all screen sizes | — | | `ds-c-sm-table--stacked` | Stacked on small screens only | `≤ 544px` | | `ds-c-md-table--stacked` | Stacked on medium screens and below | `≤ 768px` | | `ds-c-lg-table--stacked` | Stacked on large screens and below | `≤ 1024px` | The example below uses the `ds-c-table--stacked` class:
Founding documents
Document title Description Links Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. View 1776
Articles of Confederation This document served as the United Statesʼ first constitution. View 1777
The Constitution Replaced the Articles of Confederation with a new form of government. It created a federal system with a national government composed of 3 separated powers, and included both reserved and concurrent powers of states View 1787
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. View 1791
The Design System will offer guidance and tooling for implementing scrollable tables in both HTML and React. Stay tuned for updates!