Table

Version 6.0.1

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

Table with four 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 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.

Date

Version

Spectrum

Express UI Kit

Jun 08, 2022

6.0.1

Download

Apr 06, 2022

6.0.0

Download

Apr 20, 2019

5.0.0

Download

Table of contents#

Anatomy
Options
Usage guidelines
Internationalization
Keyboard interactions
Theming
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#

Use a standard table when a table is the main focus of an experience. Quiet tables are for when a table is meant to be supplementary, subtle, or 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#

Column dividers are for organizing table content and aid the user in parsing related data. These are optional; use them carefully to group related content.

Selection#

Some tables should allow a user to select rows, on which they can take an action. If a table has selectable rows, it 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. Never use center alignment.

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 users need to compare numerical values, use tabular (monospaced) and lining (not old style) numbers to make it 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. Only use these when necessary, and don't add them 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.

Theming#

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.

Spectrum for Adobe Express#

Tables in Spectrum for Adobe Express have more rounding and an indigo accent for selection.

Changelog#

Date

Number

Notes

Jun 08, 2022

6.0.1

Replaced uppercase detail typography style with heading style in column headers

Apr 06, 2022

6.0.0

Updated all colors to 6.0.0

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.