Table Example
- -About This Example
-
- The below example illustrates an implementation of the WAI-ARIA Table Pattern.
- Note that when possible, using a native HTML table element is recommended.
-
Similar examples include:
--
-
- Sortable Table Example: Basic HTML table that illustrates implementation of
aria-sortin the headers of sortable columns.
- - Data Grid Examples: Three example implementations of grid that include features relevant to presenting tabular information, such as content editing, sort, and column hiding. -
-
-
Example
-Students currently enrolled in WAI-ARIA 101 for the coming semester
@@ -84,104 +47,5 @@
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
-To copy the following HTML code, please open it in CodePen.
- -
-
-
-