Design Pattern

Table

A table is a pattern for organizing and listing data in rows and columns. When heading cells, scope, and captions are set correctly, assistive technology can understand the structure as intended.

Difficulty: Beginner Category: Data Display

When to use / not use

Use it when

  • When users need to compare multiple items
  • When meaning emerges from the intersection of rows and columns
  • When you want to present spreadsheet-like data in a structured list

Don't use it when

  • For layout purposes → use CSS Grid or Flexbox
  • For simple lists → use ul or ol
  • When there are too many columns for a responsive table → consider a card layout

Anatomy

1 Caption (caption)
2 Heading row (thead > tr > th)
3 Data rows (tbody > tr > td)
4 Scope attribute (scope)
  1. Caption — Briefly explains the purpose or content of the table
  2. Heading cells — Use th for row or column headings and declare direction with scope
  3. Data cells — Use td for the actual data content
  4. Scope — Use scope="col" or scope="row" to express the relationship between headers and data

HTML Structure

Key points

  • Use a caption element to state the purpose of the table
  • Separate heading rows and data rows structurally with thead and tbody
  • Use th scope="col" for column headings and th scope="row" for row headings
  • For complex tables, use the headers attribute to associate cells with headings explicitly

CSS Implementation

Styling points

  • Borders — Use border-collapse: collapse to avoid double borders between cells
  • Striping — Use nth-child to alternate row backgrounds and improve scanability
  • Responsive handling — Wrap the table in an overflow-x: auto container for horizontal scrolling
  • Sticky header — Use position: sticky when the header row should stay visible during vertical scrolling

Accessibility

WCAG 1.3.1 Info and Relationships

Heading cells and scope need to communicate the relationship between headers and data programmatically.

WCAG 1.3.2 Meaningful Sequence

The table data needs to be announced in a logical order.

WCAG 2.1.1 Keyboard

Any links or buttons inside the table need to be operable with the keyboard.

Keyboard operation

  • Use Tab to move to interactive elements inside the table
  • In screen readers, users can move between cells with table navigation commands
  • A caption helps users understand the table purpose before entering it

Live Demo

Basic table

A basic structure with proper row and column headings plus a caption.

PreviewFullscreen

Striped table

A variation that improves scannability with alternating row backgrounds.

PreviewFullscreen

Responsive table

A pattern that preserves the table layout on mobile through horizontal scrolling.

PreviewFullscreen

Common mistakes

Using tables for layout

If you use a table for anything other than tabular data, assistive technology conveys the wrong structure.

Using only td and no th

Without heading cells, screen reader users cannot understand what each cell means.

No caption, so the purpose is unclear

Without a caption or equivalent explanation, users have a harder time understanding what the table represents.