Tables

Tables assist users to scan and compare data.

What it is

The table block renders a NSW Design System table. Each cell is a container, so a cell can hold rich text, an image or a video — not just plain text.

Table

How to
Example

How to add it

Add a Table block, choose the number of rows and columns, then type into each cell. Use the toolbar to mark header rows or columns and to pick a style.

Add a table, then add rows and columns

Configure it

Style — choose Default, Striped, Bordered, or Striped + Bordered. A caption can be shown above or below the table.

Headers — mark the first row, the first column, or both as headers. First-row cells are column headers; first-column cells become row headers (th scope="row") so screen readers associate each row with its label. Header cells hold a single line of text; numeric columns right-align automatically.

Cycle the style and header options

Tips

Use tables for tabular data, not for page layout.

Add a caption and mark header rows/columns so screen-reader users get the row and column context.

For a term paired with its value (contact details, metadata), use a Definition list instead of a two-column table.

Example

Table caption for responsive scroll version
Method	Description	Purpose
Annotated prototypes	Prototypes with notes.	Give context.
Storyboards	Sequential images.	Visualize UX.
Service blueprint	A process diagram.	Plan implementation.
User stories	Short user sentences.	Document needs.

Table caption for responsive scroll version
Method	Description	Purpose
Annotated prototypes	Prototypes with notes.	Give context.
Storyboards	Sequential images.	Visualize UX.
Service blueprint	A process diagram.	Plan implementation.
User stories	Short user sentences.	Document needs.

Table caption for responsive scroll version
Method	Description	Purpose
Annotated prototypes	Prototypes with notes.	Give context.
Storyboards	Sequential images.	Visualize UX.
Service blueprint	A process diagram.	Plan implementation.
User stories	Short user sentences.	Document needs.

Table caption for responsive scroll version
Method	Description	Purpose
Annotated prototypes	Prototypes with notes.	Give context.
Storyboards	Sequential images.	Visualize UX.
Service blueprint	A process diagram.	Plan implementation.
User stories	Short user sentences.	Document needs.

Table caption for responsive scroll version
Method	Description	Purpose
Annotated prototypes	Prototypes with notes.	Give context.
Storyboards	Sequential images.	Visualize UX.
Service blueprint	A process diagram.	Plan implementation.
User stories	Short user sentences.	Document needs.

Plan	Basic	Pro
Price	$0	$10
Users	1	Unlimited