eBay

Table

A table is used to represent tabular data in rows and columns.

Working Examples

You can take a look at the table pattern in action on our examples site.

Best Practices

Every table requires a caption element. The summary attribute is deprecated in HTML5.

Every table cell should have a logical column header or row header.

Do not use tables for row/column layout of page or modules. See the Layout Tables Anti-Pattern for more information.

Interaction Design

This section provides interaction design for keyboard, screen reader and pointing devices.

Keyboard

The only special consideration for table is sortable columns. Typically this is achieved by adding a toggle button as the contents of the table header cell. The usual rules for button apply.

Screen Reader

Table must be visible in screen reader list of tables.

Screen reader must be navigable with screen reader table command. For example, in VoiceOver this command is VO+CMD+T.

Screen reader must announce caption of table.

Screen reader must announce value of every cell.

Screen reader must announce value of column header when instructed to do so. For example, in VoiceOver this command is VO+C.

Sortable column must be announced by screen reader.

Current sort state of sortable columns must be announce by screen reader.

When moving from column to column, screen reader announces new column scope. Typically this scope is the value of the column header.

When moving from row to row, screen reader announces new row scope. Typically this scope is the value of the row header.

Pointer

The only special consideration for table is sortable columns. Typically this is achieved by adding a toggle button as the contents of the table header cell. The usual rules for button apply.

Developer Guide

The content for this section is not yet available, please check back again for updates.

ARIA Reference

The content for this section is not yet available, please check back again for updates.

results matching ""

    No results matching ""