Table

A table organises data into rows and columns, making it easy to scan and compare information. Tables should only be used for tabular data, not for layout purposes.

Interactive tables extend the basic structure with sorting and expandable rows, allowing users to control how data is presented and revealed.

Accessibility Features

<th> identifies a header cell and <td> a data cell, allowing screen readers to associate a data cell with its corresponding header.
scope="col" on a <th> identifies it as a column header and scope="row" as a row header.
<caption> provides a title for the table.
<thead> groups the header row and <tbody> groups the data rows, helping screen readers understand the table structure.

Sortable Table

A sortable table lets users reorder rows by pressing column headers.

aria-sort="ascending/descending/none" on a column header communicates its current sort direction to screen readers.
A <button> inside a column header identifies it as a pressable sort control.

Example

Code Snippet

Expandable Rows

An expandable row allows users to reveal additional detail for a table entry without leaving the page. It is practically a custom accordion within a table.

Expanding must be triggered by a dedicated button whose label or accessible name clearly communicates which row's details it opens, for example, using aria-labelledby.
aria-expanded on a trigger button communicates its state to screen readers.
aria-controls on a trigger button points to the rows it controls.