Table Example
NOTE: Please provide feedback on this example page in issue 566.
The below example illustrates an implementation of the WAI-ARIA
table design pattern.
Note that when possible, using a native HTML table element is recommended.
Similar examples include:
- Layout Grid Examples: Three example implementations of grids that are used to lay out widgets, including a collection of navigation links, a message recipients list, and a set of search results.
- Data Grid Examples: Three example implementations of grid that include features relevant to presenting tabular information, such as content editing, sort, and column hiding.
- Advanced Data Grid Example: Example of a grid with behaviors and features similar to a typical spreadsheet, including cell and row selection.
Example
Students currently enrolled in WAI-ARIA 101 for the coming semester
First Name
Last Name
Company
Address
Fred
Jackson
Acme, Inc.
123 Broad St.
Sara
James
Acme, Inc.
123 Broad St.
Ralph
Jefferson
XYZ, Inc.
456 Main St.
Nancy
Jensen
XYZ, Inc.
456 Main St.
Keyboard Support
Not Applicable
Role, Property, State, and Tabindex Attributes
| Role | Attribute | Element | Usage |
|---|---|---|---|
table |
div |
Identifies the element containing the table structure. | |
aria-label="Students"
|
div |
Provides an accessible name for the table. | |
aria-describedby="IDREF"
|
div |
Refers to the element that serves as the caption for the table. | |
rowgroup |
div |
|
|
row |
div |
Identifies each element that contains the cells for a row. | |
columnheader |
span |
Identifies elements that serve as a cell containing a column label. | |
cell |
span |
Identifies elements containing content for a single cell. |
Javascript and CSS Source Code
- CSS: table.css
- Javascript: Not applicable.
HTML Source Code