Proper use of tables

Accessibility

Properly structured tables allow screen readers to communicate relationships between rows and columns, helping users understand the content.

Tables used to lay out the content of a page are especially inaccessible. Never do this.

Reason

Tables are designed to present structured data, but they only work when their structure is clear and meaningful.

• Screen readers rely on defined headers and structure to explain how data is related. [w3.org]
• If structure is missing or unclear, information may be read in the wrong order or lose its meaning. [w3.org]
• Visually formatted tables (for example, using spacing or layout techniques) do not communicate relationships to assistive technologies.

In short, a table must communicate its structure both visually and programmatically to be accessible.

Best practice

Copilot said:

Use tables only when appropriate

• Use tables only for data with clear row and column relationships.
• Avoid using tables for layout.
• Consider whether a list or simple text would be clearer.

Provide clear headers

• Identify row and/or column headers.
• Ensure headers clearly describe the related content.

This helps screen reader users understand each data point.

Keep tables simple

• Use a clear structure and reading order.
• Avoid merged cells, nested tables, and complex layouts.

Simple tables are easier to understand and navigate.

Here is an example of a properly constructed table with a header row and data appropriate to a table.

Add context and description

• Provide a clear title or caption explaining the table content. [w3.org]
• For complex tables, explain the information in surrounding text.

Users should understand the table’s purpose before interacting with it.

Ensure completeness and readability

• Do not leave cells empty; use “0” or “no data” where appropriate.
• Follow a logical order from left to right and top to bottom.

Example of poor practice

Using tables for layout

• A table is used to position images, menus, or page sections
• No meaningful relationship exists between rows and columns
• Screen readers interpret the content as unrelated data

Missing headers

• A table displays data but does not clearly identify headers
• Users cannot tell what each row or column represents
• Screen reader users lose important context

Visually formatted “tables”

• Content is aligned using spaces or line breaks instead of proper table structure
• It may look correct visually, but assistive technologies cannot interpret it properly [w3.org]

Overly complex tables

• Multiple merged cells or nested tables
• Irregular layout or inconsistent structure
• Difficult to navigate and understand, especially with assistive technology

Additional benefits

Usability

• Makes information easier to scan and compare
• Improves clarity for all users

SEO

• Proper structure helps search engines better understand content
• Can improve indexing and discoverability

Marketing

• Creates a clear and professional presentation
• Ensures content is accessible to a wider audience

What WCAG says

From WCAG (Success Criterion 1.3.1 – Info and Relationships):

This means that:

• The relationships within a table must be clear and detectable by technology
• Structure must not rely only on visual formatting

Learn more:

• W3C Table Technique H51
• W3C Header Associations Technique H63

Quick checklist

• Table is used for data (not layout)
• Clear headers are identified
• Table structure is simple
• No merged or nested cells
• Table has a clear description or title
• No empty cells