---
title: "Give tables headers · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/data-tables
updated: 2026-10-20
licence: "All rights reserved"
---

# Give tables headers

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Mark up data tables with `th`, `scope` and a caption or label. Use tables only for data, never for layout. This is WCAG criterion 1.3.1 (A).
- How: Use `<th scope="col">` and `<th scope="row">` with a `<caption>`. On narrow screens, let rows stack instead of scrolling. Then add explicit table roles, because changing `display` drops the table role in some browsers.
- Check: axe `th-has-data-cells` and `td-headers-attr` pass. A test finds a `caption` or `aria-label` on every `table`.

Example:

```html
<!-- Explicit roles, because stacked rows lose their table role in some browsers -->
<table class="table" role="table">
  <caption>Opening hours</caption>
  <thead><tr role="row"><th scope="col" role="columnheader">Day</th><th scope="col" role="columnheader">Hours</th></tr></thead>
  <tbody><tr role="row"><th scope="row" role="rowheader">Monday</th><td role="cell" data-label="Hours">9:00 to 17:00</td></tr></tbody>
</table>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/data-tables`.

- Previous: [Caption video, transcribe audio](https://agentwranglers.se/playbook/website/accessibility/captions-and-transcripts)
- Next: [Never make people scroll sideways](https://agentwranglers.se/playbook/website/accessibility/no-sideways-scrolling)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)