Tables
Data Tables help communicate relationships between content.
A table is a page section containing data arranged in rows and columns.
Tables communicate relationships between content. They are used for:
- Reference - To help users find relevant data for specific items.
- Comparison - To help users compare the features of different items. Users should be able to compare features by scanning horizontally.
- Choice - To help users understand their choices when they are presented with an array of options, typically through links and mini buttons.
Simple tables don't include sorting and filtering capability, while complex tables do.
Do not use tables for layout. Use CSS to define page structure.
Authors should prefer the use of the host language's semantics for table whenever possible, such as the HTML table element.
Rows contain cell or gridcell elements, and thus serve to organize the table or grid.
The table role is intended for tabular containers which are not interactive. If the tabular container maintains a selection state, provides its own two-dimensional navigation, or allows the user to rearrange or otherwise manipulate its contents or the display thereof, authors should use grid or treegrid instead.
Do's and Don'ts
Types
Basic Table
Basic tables allow users to quickly scan vertically and horizontally to easily comprehend data. On smaller breakpoints, the table provides horizontal scrolling for overflow content. Doesn't include sorting or filtering.
Table with Vertical Mobile Layout
A table in which the row orientation changes from horizontal to vertical on SM and XS breakpoints (circumventing the need for horizontal scrolling). Doesn't include sorting or filtering.
Table with Fixed Column
A table in which the first column is fixed to create a persistent point of reference, while all other columns may be manipulated with scroll bars (if there's content overflow). Includes sorting and filtering.
Table with Expandable Details
A table that provides functionality similar to a Secondary Accordion for disclosing additional information in each row. Includes sorting and filtering. In responsive, the user can sort by the parent/active rows only.
Table with Collapsing Columns
A table in which the columns collapse into the expandable details as the table shrinks in width, to circumvent the need for horizontal scrolling. Includes sorting and filtering. In responsive, the user can sort by the parent/active rows only.
Variants
With Zebra Stripes
Zebra stripes make a table easier to read row by row, especially with larger data sets and wider data tables.
Common Button Labels and Usage
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
Basic Table
Basic Table
Basic Table with Zebra Stripes
Basic Table with Zebra Stripes
Redlines
Basic Table with Zebra Stripes
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Please follow the best practices for static tables and the best practices for interactive grids from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for static tables and these recommendations for interactive grids from WAI-ARIA 1.1.
You may refer to this example of a static table, these examples of interactive data grids, and these examples of interactive layout grids from WAI-ARIA practices 1.1.
You may also refer to these tutorials for table concepts from Web Accessibility Tutorials.
You may also refer to this article about creating accessible data tables from WebAIM.