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.
ShareTable 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.
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.
Horizontal scrolling
Use TableScrollContainer around a Table to enable it to scroll horizontally when there's not enough room.
