Proper use of tables

Accessibility

Tables must be used carefully so that all users—including those using screen readers—can understand how information is organized.

When a table is structured properly, assistive technologies can communicate how data is related across rows and columns. This ensures that users can interpret the content accurately, even if they cannot see the visual layout.

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

Use tables only when appropriate

• Use tables only for data that has clear relationships (rows and columns).
• Avoid using tables for layout or positioning content on a page.
• Consider whether a list or simple text would be clearer.

Provide clear headers

• Identify column headers and/or row headers.
• Make sure headers clearly describe the content beneath or beside them.

This helps screen reader users understand what each data point refers to.

Keep tables simple

• Use a straightforward structure with a clear reading order.
• Avoid:
  • Merged cells
  • Nested tables
  • Complex layouts

Simple tables are easier for everyone to understand and navigate.

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

Add context and description

• Provide a clear title or caption that explains what the table contains. [w3.org]
• If the table is complex, explain the information in the surrounding text.

Users should understand the purpose of the table before interacting with it.

Ensure completeness and readability

• Do not leave cells empty—use “0” or “no data” where appropriate.
• Ensure the table content follows 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