Table
A Table is a collection of information displayed across columns and rows.
Accessibility insight: navigating tables with a screen reader
Learn more about why semantic table markup is important in this demo video by Inclusive Components that shows what it's like to explore a data table with a screen reader.
Default Table
The Default Table uses an automatic table layout algorithm dictated by the browser. The width of the table cells are adjusted to fit the content.
| Date | SID | From |
|---|---|---|
| 16:24:28 PDT 2020-09-17 | SM0yc4mxi6cn4z13bte7qmflc2drc85mlp | (602) 609-6747 |
| 16:24:28 PDT 2020-09-17 | SMl29llgoihx286uhxfb0yc5n0sg391x5n | (602) 609-6747 |
| 16:24:28 PDT 2020-09-17 | SMxarke3v30fv17hauqn86a7nhgm3b5d87 | (602) 609-6747 |
Fixed Column Width
The Fixed Table variant sets equal column widths for the table.
| Agents | Skills | Tasks |
|---|---|---|
| Adam Brown | English, French, Sales, Spanish | 35 |
| Adriana Lovelock | English, French, Sales, Spanish | 28 |
| Amanda Cutlack | English, French, Sales, Spanish | 7 |
| 70 |
Striped Table
Tables can have zebra stripes (i.e. alternating row highlighting), which can improve readability of particularly large data sets.
| Agents | Skills | Tasks |
|---|---|---|
| Adam Brown | English, French, Sales, Spanish | 35 |
| Adriana Lovelock | English, French, Sales, Spanish | 28 |
| Amanda Cutlack | English, French, Sales, Spanish | 7 |
| Total tasks | 70 |
Borderless Table
Tables can support a borderless variant, which can be useful in cases where the Table is placed inside of another containing element.
| Agents | Skills | Tasks |
|---|---|---|
| Adam Brown | English, French, Sales, Spanish | 35 |
| Adriana Lovelock | English, French, Sales, Spanish | 28 |
| Amanda Cutlack | English, French, Sales, Spanish | 7 |
| Total tasks | 70 |
Table with Avatars
Tables can be composed using Avatar, which can be used to make a table of user data more scannable.
| User | Skills | Tasks |
|---|---|---|
| AB | English, French, Sales, Spanish | 35 |
| AL | English, French, Sales, Spanish | 28 |
| AC | English, French, Sales, Spanish | 7 |
Table with Status Indicators
Tables can support custom compositions using status indicators. When including statuses in a table, be sure to include supporting text so color isn't the only indicator of status.
| Result | SID | Email address |
|---|---|---|
| ✓ Valid 2020-09-17 | SM0yc4mxi6cn4z13bte7qmflc2drc85mlp | [email protected] |
| ⚠ Risky 2020-09-17 | SMl29llgoihx286uhxfb0yc5n0sg391x5n | [email protected] |
| ✗ Invalid 2020-09-17 | SMxarke3v30fv17hauqn86a7nhgm3b5d87 | [email protected] |
Table with Sticky Header
Tables support a "sticky header", which can be useful in tables with a large amount of data.
| Agents | Skills | Tasks |
|---|---|---|
| Adam Brown | English, French, Sales, Spanish | 35 |
| Adriana Lovelock | English, French, Sales, Spanish | 28 |
| Amanda Cutlack | English, French, Sales, Spanish | 7 |
| Sofie Korneliya | English, French, Sales, Spanish | 47 |
| Gerarda Che | English, French, Sales, Spanish | 2 |
| Natalia Hiroshi | English, French, Sales, Spanish | 9 |
| Gaël Kambiz | English, French, Sales, Spanish | 18 |
| Amelina Muriel | English, French, Sales, Spanish | 29 |
| Luisa Hipólito | English, French | 9 |
| Machteld Vašek | English, Spanish | 18 |
| Cayetano Helmuth | French | 29 |
| Total tasks | 70 |
Guidelines
About Table
A Table is a grid of static textual and numeric data of the same content structure presented in rows and columns of cells. For example, a Table would be a good way to represent a list of multiple support agents and their respective skills and online/offline status.
Accessibility
Tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.
Accessibility requirements:
- Tables must have a
THead, containing aThfor each column. - Tables must have a
TBodywrapping the table body of rows.
Accessibility recommendations:
- It is a best practice to include row headers, which can be added by including a header (
Th) as the first cell in each row (Tr), withscope="row". - Any component can be placed in a Table, but tables should only contain static textual and numeric data, rather than actionable components like buttons, whenever possible.
When to use Table
Tables are used to represent static, tabular data. For example, a list of users' first names, last names, and email addresses.
Do's and Don'ts
- Do: Left-align textual table data, such as an email address.
- Don't: Don't right- or center-align textual table data.
- Do: Right-align numeric table data that is meant to be compared along a single column.
- Don't: Don't left- or center-align numeric table data that is meant to be compared along a single column.
- Do: Include supporting text when providing a status in a table row.
- Don't: Don't use color as the only indicator of status in a table row.