Table
Like an HTML <table> element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget. Thus, its cells are not focusable or selectable. The grid pattern is used to make an interactive widget that has a tabular structure. However, tables are often used to present a combination of information and interactive widgets. Since a table is not a widget, each widget contained in a table is a separate stop in the page tab sequence.
— Table Pattern, WAI ARIA Authoring Practices Guide (APG)
§ Notes
Missing.css uses the <table>
element for tables; for full-width tables, use the .width:100%
utility class.
"Pseudo-tables" can be created from other elements by applying the .table
and .rows
classes.
Keyboard Interaction
Not applicable.
§ Example
Person | Most interest in | Age |
---|---|---|
Chris | HTML tables | 22 |
Dennis | Web accessibility | 45 |
Sarah | JavaScript frameworks | 29 |
Karen | Web performance | 36 |
Average age | 33 |
Example from The Table element, MDN Web Docs