ContextQMD
Back to Chromium

Table Example

third_party/aria-practices/src/content/patterns/table/examples/table.html

153.0.8001.11.9 KB
Original Source

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-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 NameLast NameCompanyAddress

FredJacksonAcme, Inc.123 Broad St.

SaraJamesAcme, Inc.123 Broad St.

RalphJeffersonXYZ, Inc.456 Main St.

NancyJensenXYZ, Inc.456 Main St.

Keyboard Support

Not Applicable

Role, Property, State, and Tabindex Attributes

RoleAttributeElementUsage
tabledivIdentifies the element containing the table structure.
aria-label="Students"divProvides an accessible name for the table.
aria-describedby="IDREF"divRefers to the element that serves as the caption for the table.
rowgroupdiv
  • 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.