Skip to content

Alert - Layout table

  • WAVE Category: Alert
  • WAVE Alert: Layout table

Page Content Status

  • WAVE Error guidance text
  • Example of a DOM Snippet Generated From WAVE Tool
  • Project Team Error guidance
    • Project Team Page Details
    • Project Team Issue and PR details
    • Project Team Solution
  • Credits/Authors

WAVE Error guidance

WAVE Tool's Reference material on Layout table may not specifically address your problem. We provide it here for optional reading.

Click to see WAVE Tool Reference

This content added 2026-02-26. Check for updated guidance at: https://wave.webaim.org/api/docs?format=html#table_layout

WAVE Category

Alerts

WAVE Error

Layout table

What It Means

A layout table is present.

Why It Matters

Layout tables exist merely to position content visually - to create columns, insert spacing, or align content neatly for sighted users. Their content is not at all tabular in nature. Layout tables should not be used in HTML5. They can introduce reading and navigation order issues. Screen readers may interpret them as data tables (i.e., announcing column and row numbers), especially if they contain table header (<th>) cells. This introduces significant overhead on screen reader users.

What To Do

In almost every case, layout tables can be replaced with other HTML elements and styled with CSS to achieve the desired visual presentation. If the table contains tabular data, provide appropriate header (<th>) cells. If the layout table remains, verify that the reading and navigation order of table content (based on underlying source code order) is logical and give it role="presentation" to ensure it is not identified as a table to screen reader users.

The Algorithm... in English

A <table> element is present that does not contain any header (<th>) cells.

Standards and Guidelines

Example of a DOM Snippet Generated From WAVE Tool

[HTML snippet showing the problematic code structure that WAVE detected]

Project Team Error guidance

The following material covers how the Project Team has provided a solution to the layout table WAVE alert.

Project Page Details

  • Project Page name: [INSERT PAGE NAME or "ALL"]
  • Project Staging URL: [INSERT URL or "N/A"]
  • Requires sign in: [TRUE OR FALSE]
    • Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
    • Can access page directly from URL: [TRUE OR FALSE]
    • Accepts URL parameters: [TRUE OR FALSE]

Project Team Issue and PR details

  • Related GitHub Issue(s):
    • [INSERT ISSUE URL]
  • Related Pull Request(s):
    • [INSERT PR URL]
  • React Component(s)
    • [INSERT PATH: e.g. path/to/Component.jsx]

Project Team Solution

What is the specific problem that was occurring?

[INSERT CONTENT]

What is the proposed solution to this problem?

[INSERT CONTENT]

Step-By-Step Guide

Click to see step-by-step guide

[ADD DETAILED INSTRUCTIONS HERE]

Other Technical Details

Click to see other technical details

[INSERT OTHER DETAILS e.g. Prop References, Return Value]

Code Snippet With Solution

Click to see code snippets

[INSERT PATH file/path/to/Snippet.jsx]

[Code example showing the fix/solution]

Why the Fix Works

[INSERT CONTENT]

Where this solution is applicable

  • [INSERT SCENARIO 1]
  • [INSERT SCENARIO 2]
  • [INSERT SCENARIO N]

Screenshots of WAVE Error

1. Descriptive Title for Screenshot Set 1

Description/text for image

[INSERT IMAGE HERE]

Description/text for image

[INSERT IMAGE HERE]

1. Descriptive Title for Screenshot Set 2

Descriptoin/text for image

[INSERT IMAGE HERE]

Credits/Authors

  • @Rabia2219
  • [INCLUDE Contributor 2]
  • [INCLUDE Contributor N]