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


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 Expandable Details

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.

Table with Expandable Details


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,, for further information regarding call-to-action labels and usage.

Button Label:
Corresponding Action:
Add to Cart
Sign In/Sign Out
View Details
Learn More
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows