Skip to content

Table Example

Table Example

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

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-sort in 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
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
  • Identifies the elements that serve as containers for the table header and table body rows.
  • Unlike HTML, WAI-ARIA does not include separate roles for the table header and table body row sets.
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

HTML Source Code

To copy the following HTML code, please open it in CodePen.

Back to Top