Data Table Vs Layout Table

title: "Data Table vs Layout Table — When to Use Tables for Accessibility" description: "Learn the difference between data tables and layout tables, and why layout tables must be marked with role=presentation to avoid confusing screen readers." weight: 10 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, tables]

Data tables present structured information with row/column relationships. Layout tables use table markup for visual positioning and must be hidden from screen readers.

## What You'll Learn

The difference between data and layout tables, how to mark layout tables correctly, and when to use CSS grid instead.

## Why It Matters

Screen readers announce table navigation commands for all tables. Layout tables trigger these commands unnecessarily, confusing users.

## Real-World Use

A page uses a table for a multi-column newsletter layout. A screen reader user enters the page and hears "Table with 3 rows and 2 columns." They spend time trying to navigate table cells that are just layout containers.

## Layout Table with role=presentation

```html
<table role="presentation">
  <tr>
    <td style="width: 200px;">Left sidebar content</td>
    <td>Main content area</td>
  </tr>
</table>

Data Table

<table>
  <caption>Monthly sales data</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$50K</td>
    </tr>
  </tbody>
</table>

CSS Grid Alternative

.layout-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
}

Common Mistakes

1. Using tables for layout without role=presentation

Layout tables without role="presentation" are announced as data tables to screen readers.

2. Using data table markup for layout

Adding th, scope, caption to layout tables makes them even more confusing.

3. Not migrating to CSS layout

CSS Grid and Flexbox have replaced layout tables. Only use tables for actual data.

4. Adding role=presentation to data tables

Data tables must not have role="presentation". Only layout tables should be hidden.

5. CSS display:table for layout

Using display:table in CSS for layout purposes still creates table semantics. Use display:grid instead.

Practice Questions

1. How do you hide a layout table from screen readers? Add role="presentation" to the table element.

2. Why are layout tables problematic for screen readers? They trigger table navigation commands, causing confusion when the content is not actually tabular data.

3. What is the modern alternative to layout tables? CSS Grid for two-dimensional layouts and CSS Flexbox for one-dimensional layouts.

Challenge: Find a layout table in existing code and replace it with CSS Grid. If replacement is not possible, add role="presentation".

FAQ

Mini Project

Audit an existing codebase for layout tables. Replace them with CSS Grid where possible. Add role="presentation" where replacement is not feasible.

What's Next

Learn how to perform Table Testing to verify your data tables are accessible.