Spectrum

Version 5.0.0

Table

Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.

Table with three rows and five columns and a table header. The gray backgrounded column header is split in four rows with the titles "File name", "Last modified", "Type" and "Size", each of them in all caps and smaller in font size than a regular table cell. The first table header item "File Name" indicates with an arrow pointing downwards as a sort item a sorting selection.
The white backgrounded table cells with a larger font size than the column headers are separated by gray dividers. The font color is slightly darker compared to the column header. All text but in the last table row table is aligned left. The text in the last table row is aligned right.

Table of contents#

Anatomy
Options
Usage guidelines
Internationalization
Keyboard interactions
Changelog
Design checklist

Anatomy#

Image illustrating through labels the component parts of a table. Two rows and four columns create through cells a table. Each table cell is separated by row and column dividers. On top of the table a column header with two rows indicates the content type of each table column. A sort icon, a downwards pointing arrow in the first column header cell after the column header text indicates an alphabetical sorting order starting with the letter "a".

Options#

Standard or quiet#

Standard tables are best used when the table is the main focus of your page. Quiet tables can be used when your table is meant to be more subtle and lightweight.

Key example showing the column divider options for tables. A standard and a quiet table, each of them with three rows and four columns. The first row functions as a table header. Both tables are missing a column divider between the first and second table rows. A column divider is present between the second and third row.

Column dividers#

Dividers are used for organizing table content and aid the user in parsing related data. Column dividers are optional; they should be used carefully to group related content.

Selection#

Some tables should allow the users to select rows, on which they can take an action. If your a table has selectable rows, the table should have checkboxes to the left of the table. All tables have a hover state regardless of if actions or selections can be made. This aids the user in viewing content in a single row.

Usage guidelines#

Left align textual data#

Similar to a paragraph of text, textual data is always left-aligned within a table. Center alignment should never be used.

Key example showing the correct usage of left aligned textual data. A table with two rows and four columns, the first one functioning as a column header, align text left aligned in every table cell.

Key example showing the incorrect usage of left aligned textual data. A table with two rows and four columns, the first one functioning as a column header, center aligns text in the first column.

Right align numerical data#

Numerical data should generally be right-aligned for the ease of scanning and comparing. This should only be left-aligned when numbers are arbitrary identifiers, known as “nominal numbers,” which means they can’t be compared or combined arithmetically (e.g., ZIP codes, IP addresses, phone numbers). Column headers follow the alignment of the data.

Key example showing the correct usage of right aligned numerical data. A table with three columns and four rows, the first one functioning as a column header, aligns text right in the last column. The content of the last column is numeric and is based on data size.

Key example showing the incorrect usage of right aligned numerical data. A table with three columns and four rows, the first one functioning as a column header, aligns text left in the last column. The content of the last column is numeric and is based on data size.

Use tabular numbers for numerical data#

When numerical values need to be compared, use tabular (monospaced) and lining (not old style) numbers to make this easier. These features are supported by Adobe Clean via the OpenType panel in Illustrator or via the CSS font feature settings.

Key example showing the correct usage of tabular numbers for numerical data. A table with three columns and four rows, the first one functioning as a column header, displays the table cell content in the last column tabular (monospaced) and uses lining (not old style) numbers as the content is numeric data.

Key example showing the incorrect usage of tabular numbers for numerical data. A table with three columns and four rows, the first one functioning as a column header, displays the table cell content in the last column tabular (monospaced) and uses lining (not old style) numbers as the content is numeric data.

Respect vertical alignment#

All content should be centered vertically within the row to offer the right visual balance.

Key example showing the correct usage of vertical alignment. A table with three columns and four rows, the first one functioning as a column header, aligns text vertically center in each table cell.

Key example showing the incorrect usage of vertical alignment. A table with three columns and four rows, the first one functioning as a column header, vertically aligns text top in each table cell.

Don't use zebra stripes#

Both standard and quiet tables already have row dividers to aid users in parsing related data. Don't customize the background color of alternating rows.

Key example showing the incorrect usage of zebra stripes. A table with three columns and four rows, the first one functioning as a column header, sets a dark background for every other table row.

Use column dividers sparingly#

Column dividers are optional decorations that can help organize table content and create groups of data. They should be used when necessary and not be added to every column.

Key example showing the correct usage of columns dividers. A table with three columns and four rows, the first one functioning as a column header, displays a column divider only between the last two rows.

Key example showing the incorrect usage of columns dividers. A table with three columns and four rows, the first one functioning as a column header, displays column dividers between every table row.

Use an en dash (–) for missing values#

When there are gaps in the data, use an en dash (–) to represent null or not applicable (N/A) values.

Key example showing the correct usage of en dashes for missing value. A table with three columns and four rows, the first one functioning as a column header, shows an en dash (-) for every empty table cell.

Key example showing the incorrect usage of en dashes for missing value. A table with three columns and four rows, the first one functioning as a column header, shows the word "null in every empty table cell.

Internationalization#

Key example showing a table in the right-to-left language use case. A table with three columns and four rows, the first one functioning as a table header. The gray backgrounded column header is split in four rows, each of them in all caps and smaller in font size than a regular table cell. The last table row indicates with an arrow pointing downwards as a sort item a sorting selection. The arrow is placed on the left side of the table cell text. The white backgrounded table cells with a larger font size than the column headers are separated by gray dividers. The font color is slightly darker compared to the column header. All text in the table cells is horizontally aligned right.

RTL#

For RTL (right-to-left) languages, the layout of the table is mirrored. The columns are ordered from right to left, and each individual column text alignment is also inverted. Make sure to consider that some types of content (e.g., file extensions) are not translated.

Keyboard interactions#

Key	Interaction
Right Arrow	Moves focus to the cell on the right. If focus is already on the right-most cell, the focus does not move.
Left Arrow	Moves focus to the cell on the left. If focus is already on the left-most cell, the focus does not move.
Up Arrow	Moves focus to the cell above. If focus is already on the top cell in that column, the focus does not move.
Down Arrow	Moves focus to the cell below. If focus is already on the bottom cell in that column, the focus does not move.
Home	Moves focus to the first cell in the focused row.
End	Moves focus to the last cell in the focused row.
Page Up	For scrollable tables, moves the focus up such that the top visible row becomes the last visible row in the viewport.
Page Down	For scrollable tables, moves the focus down such that the bottom visible row becomes the first visible row in the viewport.
Control/Command + Home	Moves focus to the first cell in the first row.
Control/Command + End	Moves focus to the last cell in the last row.

Changelog#

Date	Number	Notes
Apr 20, 2019	5.0.0	This component is now individually versioned (individual versions of existing components start at 5.0.0) Added RTL (right-to-left) guidelines

Design checklist#

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Content design

UI language and information design considerations have been incorporated into component design.

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.

Headers

Adobe XD plugin