UI Component Lab 日本語

← All components

Data display

Table

Data arranged in rows and columns, with headings that explain each column.

Plan prices
PlanStorage
Free$05 GB
Team$121 TB
Personal$4100 GB

Also known as

How to recognize it

A grid of cells with a bold header row at the top, separated by lines. Numbers are usually right-aligned.

Variations

Data grid
An interactive table where arrow keys move between cells, used when cells can be edited or selected.

Behavior

  • The cells themselves are not interactive; screen readers announce the matching column and row headings while moving through cells.
  • A sortable column has a button in its heading, and aria-sort tells which way it is sorted.
  • Native <table>, <caption>, and <th scope> give the structure without extra ARIA.

Keyboard

KeyAction
TabMoves only between controls inside the table, such as the sort button.
Enter / SpaceOn the sort button, switches between ascending and descending order.

Usage notes

  • Do not use it for layout or for pairs of names and values. Use a description list for those.
  • List: A table compares several values per row in columns; a list shows one item per row without columns.
  • Description list: A table compares values across rows and columns; a description list shows name–value pairs for one subject.

Sources