Basic layout with a column of row headers. Rows alternate background colors.
Layout for making comparisons such as between size/sleeve length. Column headers and row headers are displayed. When columns scroll, row header column is locked in place.
Compact and Borderless
Layout with reduced spacing within each cell. All cells are borderless. Defines a column of row headers.
To ensure that usage of this component complies with accessibility guidelines and screen readers can correctly read data:
- Table caption should be included
- Row headers and column headers should be defined
- Table headers should never be empty
- Including the top-left cell of the data table
- If needed, use
cdr-sr-onlyto hide descriptive text that explains the content for the first column
- Set the scope attribute to
colto indicate that a header applies to the entire row or column
This component has compliance with WCAG guidelines by:
<caption>element for data tables
<th>element for row or column headers