Use Table...
- To present information in a grid so that its easy to compare.
- To present information from a large dataset.
Don't use Table...
- For page layout.
The preview has been updated.
Table caption
Use TableCaption
around the first child of the Table for accessibility. This is usually the heading of the Table. Use Typography to set the heading, text size, and text alignment as needed.
If your Table does not have a visible heading, you will need to add a visually hidden label for accessibility support.
The preview has been updated.
Header cell
For the React API, TableCell
will intelligently render a th
vs a td
depending on whether it's rendered inside of a TableHead
or a TableBody
.
For the Vanilla API, use td
for regular cells and th
for header cells. For row headers, use th
along with scope="row"
. If your Table has both row and column headers, the column headers will need scope="col"
.
Cell alignment
Use textAlign
to adjust the text alignment of a Cell to the left
, center
, or right
. This is a core prop.
The preview has been updated.
Horizontal scrolling
Use TableScrollContainer
around a Table to enable it to scroll horizontally when there's not enough room.
The preview has been updated.