Table

Used for tabular data

Demo

Product
Socks $9.99
Sweater $29.99

API

Tags

Name Type Content
table Native element <thead> (optional) and <tbody>
thead Native element <tr> with <th> children
tbody Native element <tr> with <td> children
tfoot Native element <tr> with <td> children

Attributes

For <table> only:

Name Value Description
layout fixed Table cells are sized automatically by the browser. This doesn't always produce the desired layout, so use this option with colspan to control the layout. Note this option does not mean the table size won't change at all - it'll still respond nicely to screen size.
striped Boolean attribute Creates a visual distinction between alternate rows.

For <td> and <th> only:

colspan Number Defines how many columns the cell should span.

For <th> only:

aria-sort
  • ascending
  • descending
 Defines that column as sorted. Your application is responsible for the sorting behavior.

Guidelines

Not for page layout

Use Grid for creating a page's layout. Do not use Table.

Accessibility

The sorted column must have the appropriate aria-sort value. When the user clicks a sort button, add aria-pressed="true" to it to indicate the pressed state.