Tables

Accessible data tables with native semantics, sorting, and Schema.org microdata.

Default Table

List of registered users
Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol Williams	carol@example.com	Viewer	Inactive
David Brown	david@example.com	Editor	Active
Eve Davis	eve@example.com	Admin	Away

Striped Table

Users displayed with alternating row colors
Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol Williams	carol@example.com	Viewer	Inactive
David Brown	david@example.com	Editor	Active
Eve Davis	eve@example.com	Admin	Away

Hoverable Table

Users with hover highlight on rows
Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol Williams	carol@example.com	Viewer	Inactive
David Brown	david@example.com	Editor	Active
Eve Davis	eve@example.com	Admin	Away

Bordered Table

Users displayed with visible cell borders
Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol Williams	carol@example.com	Viewer	Inactive
David Brown	david@example.com	Editor	Active
Eve Davis	eve@example.com	Admin	Away

Compact Table

Users displayed with reduced padding
Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol Williams	carol@example.com	Viewer	Inactive
David Brown	david@example.com	Editor	Active
Eve Davis	eve@example.com	Admin	Away

Combined Variants

Users with striped, hoverable, and bordered styles combined
Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol Williams	carol@example.com	Viewer	Inactive
David Brown	david@example.com	Editor	Active
Eve Davis	eve@example.com	Admin	Away

Sortable Headers

Click column headers to sort the table

Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol Williams	carol@example.com	Viewer	Inactive
David Brown	david@example.com	Editor	Active
Eve Davis	eve@example.com	Admin	Away

Selected Row

Table with a visually selected row
Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol Williams	carol@example.com	Viewer	Inactive
David Brown	david@example.com	Editor	Active
Eve Davis	eve@example.com	Admin	Away

Accessibility Notes

These table components use native HTML table semantics, ensuring full compatibility with screen readers and assistive technologies. Each header cell includes scope="col" to explicitly associate headers with their columns. The TableCaption component provides a programmatically associated description of the table's purpose. Schema.org Table itemType microdata is applied for enhanced structured data support. When tables overflow their container, a scrollable wrapper with role="region" and an accessible label ensures keyboard and screen reader users can navigate the content.