Table Example

The below example illustrates an implementation of the WAI-ARIA table 설계 패턴. Note that when possible, using a native HTML table element is recommended.

유사한 예는 다음과 같습니다:

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.

키보드 지원

Not Applicable

Role, Property, State, Tabindex 어트리뷰트

역할(role)	어트리뷰트	엘리먼트	사용법
`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와 CSS 소스 코드

CSS: table.css
Javascript: Not applicable.

Table Example

Example

키보드 지원

Role, Property, State, Tabindex 어트리뷰트

Javascript와 CSS 소스 코드

HTML Source Code