Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
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.
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.
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.
Similar to a paragraph of text, textual data is always left-aligned within a table. Center alignment should never be used.
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.
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.
All content should be centered vertically within the row to offer the right visual balance.
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.
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.
When there are gaps in the data, use an en dash (–) to represent null or not applicable (N/A) values.
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.
|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.|
|Apr 20, 2019||5.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
Component is included in the Spectrum for Adobe XD plugin.