Tables

Updated May 12, 2026

Overview

Tables make information more easily readable.

Whether listing or comparing information, they help break up block text and make emails easier to scan.

Design

Comparison table

Comparison Table

Comparison tables help readers to easily compare information at a glance. Most commonly used for comparing product features or competitor offerings, they can be used impactfully to sell Sage to the reader.

Data table

Data Table

Data tables hold technical information in a visually engaging way. By using clear categorisation, the reader can easily scan an email to find the information they need.

Simple table with alternating rows

SimpleTable

Tables with alternating rows are best used to list product features. With short copy and simple icons, they can efficiently tell the reader a large amount of information.

Best practice

When to use a table

Tables should be used to break up copy-heavy information into easily digestible chunks. Readers will often scan – not read – emails, so a well-used table will efficiently provide all the information the reader needs without being off-putting.

If there is information to list, it’s best stated in a table rather than bulk copy. This is even more important if you need to compare information, such as comparing Sage products to each other or to competitors.

Constructing a table

Tables should use little copy. The fewer words the better. Tables shouldn’t be used to just split up copy, but the copy should be written to maximise the table’s benefits. If the copy is longer and cannot be shortened, it may work better as bulk text.

Accessibility

Learn about accessibility at Sage.

Requirements

• Header cells must be marked up with , and data cells with to make tables accessible. For more complex tables, explicit associations may be needed using scope, id, and headers attributes.

Known accessibility issues

The focus indicator color (#FFB500) does not meet the 4.5:1 contrast ratio. We will update this when we have a new version of the focus indicator.

Keyboard commands

Keyboard Shortcut	Action
CTRL+ A	Select all records.
SPACEBAR	Select or deselect row.
CTRL+SPACEBAR	Select or deselect row.
SHIFT+SPACEBAR	Make a block selection. Use the SPACEBAR to select a record, move down or up several records using the arrow keys, then hold SHIFT and press the SPACEBAR, and all records from the one you initially selected will now be selected.
BACKSPACE	Deselect row.
CTRL+BACKSPACE	Deselect all records.
CTRL+SHIFT+R	Select only the highlighted records in the Show Selected view and deselect all the other records.
CTRL+ENTER (or CTRL+SHIFT+ENTER)	Move to the next record and select it exclusively (particularly useful for working sequentially down through a table, reviewing or editing each record, and looking at the feature it represents on the map).
CTRL+U	Switch the selection.
SHIFT+DOWN ARROW (or SHIFT+UP ARROW)	Continuously select records (records are deselected if you switch arrow keys while still holding SHIFT).
Click top left cell of table	Clear the selection.
Hold SHIFT and click top left cell of table	Select all records.
Hold CTRL and click top left cell of table	Switch the selection.

Current WCAG conformance level

WCAG 2.1 AA

WCAG success criteria

• 1.1.1 Non Text Content

• 1.4.5 Images of Text

Date	Change
September 2024	Copied information from Web Design System / Tables.