Table

Tables present structured data in rows and columns, allowing users to scan, compare, and analyse information efficiently.

They display multi-dimensional data with clear visual separation between different attributes.

Use tables when users need to compare multiple items with several attributes, or when data relationships are important for understanding.

Use tables when you need to:

• display multi-dimensional data with more than one attribute per item
• present information where users need to compare items side-by-side
• show relationships between several sets of data
• display lists, products, statistics, or other structured information
• support analysis or decision-making based on multiple data points
• present data that’s too complex or structured for simpler formats

Don’t use tables when other components work better.

Use summary list instead when:

• you’re displaying simple field-value pairs
• users need to review or confirm personal details or form answers
• information doesn’t require comparison across multiple items

Use body text or lists instead when:

• information is unrelated or not structured for comparison
• you only have one row or one column of data
• content flows better as narrative text

Avoid tables when:

• using them purely for design or layout purposes
• data would be clearer in a different format
• table complexity would overwhelm users rather than help them

Structure table content to support scanning, comparison and accessibility.

Table captions

Provide clear context for all table content:

• include a <caption> element at the start of every table
• write concise, informative captions that describe what the table shows
• ensure captions help users understand the table’s purpose before they navigate through it

Column and row headers

Create clear, descriptive headers that support navigation:

• use clear, specific labels for both columns and rows
• avoid abbreviations and jargon in headers
• arrange columns in logical order that supports user tasks
• ensure headers accurately describe the data in each column or row

Data presentation

Format content for clarity and scannability:

• keep cell content concise and easy to scan
• use consistent formatting for similar data types (dates, numbers, currencies)
• align numerical data appropriately for comparison
• ensure data accuracy and completeness

Content organisation

Structure information to support user understanding:

• organize rows in logical order (alphabetical, chronological, or by importance)
• group related information together when helpful
• consider whether data sorting would benefit users