Overview
The Table component displays a simple, responsive table for presenting small sets of tabular data. It supports 2–5 columns, optional styling variants, and built-in accessibility features such as a screen-reader-friendly title.
Common uses
- Summarize small datasets in a scannable format
- Present schedules, deadlines, or cost comparisons
- Offer feature or option comparisons
Component example
Component fields
| Element name | Required | Multiple |
|---|---|---|
|
Title
Descriptive title summarizing the table purpose. Required for accessibility. Hidden visually unless "Show table title?" is selected.
|
Yes
|
No
|
|
Show table title?
If checked, the title is displayed above the table.
|
No
|
No
|
|
Table style options
Optional. Visual styling options (for example, striped rows or compact spacing).
|
No
|
No
|
|
Column header
Header text for each column. Add between 2 and 5 columns. Limit to 1–2 words.
|
Yes
|
Yes
|
|
Row
Group containing fields for a single table row. Each row must include the same number of cells as column headers.
|
Yes
|
Yes
|
|
Cell content
Content for each table cell. Supports basic formatting. Keep content short and scannable. The number and order of cells must match the column headers. |
Yes
|
Yes
|
Accessibility
-
Use clear and concise column headersKeep headers short and descriptive so users of assistive technology can understand the table's structure.
-
Provide a clear table titleTitles help screen reader users understand the purpose of the table. Mark the title visible if it adds clarity for sighted users as well.
-
Avoid repetitive information in cellsMove repeating details (like units of measurement) into the column header instead of repeating them in each cell.
Do
- Use to show small sets of tabular data
- Use to compare related information side by side for easier scanning
- Keep cell content short and scannable (numbers, short phrases)
- Apply styling variants like striped rows for improved readability
Don't
- Use to show large datasets—these belong in downloadable reports (Excel, CSV)
- Put full sentences of text in table cells
- Embed images, media, or complex layouts inside table cells
- Use to show a list of topics or categories—use a card grid instead
- Use for lists of non-tabular data—use a list hub instead