Row and Column Headers Done Right
Associate every cell with the right headers.
Row and Column Headers Done Right is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Most Tables Have Two Header Types
Real data usually has headers along the top and down the side. Each data cell sits at the crossing of a column header and a row header.
Every Cell Needs Both
The value 92 means little alone. Tie it to Ada and to Score and it becomes Ada, Score, 92. That pairing is the association you are building.
Column Headers Across the Top
The first row holds scope=col headers. As a user arrows down a column, the screen reader keeps announcing that column header for context.
<tr>
<th scope="col">Student</th>
<th scope="col">Score</th>
</tr>Row Headers Down the Side
The first cell in each body row becomes a scope=row header. It names the row so values get a who or a when as the user reads across.
<tr>
<th scope="row">Ada</th>
<td>92</td>
</tr>The Corner Cell
The top-left cell often sits above row headers and beside column headers. Leaving it as an empty th is fine and keeps the grid honest.
<tr><th></th><th scope="col">Score</th></tr>Default scope Is a Trap
Browsers try to guess scope, but the guess is unreliable for anything beyond the simplest grid. Always set scope yourself to be sure.
Use thead and tbody
Wrap header rows in thead and data rows in tbody. It clarifies structure for assistive tech and makes your markup far easier to read.
<thead>
<tr><th scope="col">Name</th></tr>
</thead>
<tbody>
<tr><th scope="row">Ada</th></tr>
</tbody>How a Screen Reader Reads It
Move to a data cell and the user hears the row header, the column header, then the value. Good scope is what makes that announcement accurate.
One Header Cell, One Job
Keep a th to a single role: a column header or a row header. Mixing data and labels in one cell muddies the association for everyone.
Test by Reading One Cell
Pick a random data cell and ask: do its headers fully explain it? If you cannot tell what a number means from its headers, your scope is wrong.
A Two-Axis Example
Column headers on top, row headers on the left, data in the middle. This matrix shape covers the vast majority of tables you will build.
<tr><th scope="row">Ada</th><td>92</td><td>88</td></tr>Quick Check
A user arrows onto a data cell deep inside a well-marked table.
Recap: Two Axes, Two Scopes
Column headers use scope=col, row headers use scope=row, and every data cell sits where they cross. Set scope yourself and never trust the guess.
Frequently asked questions
Is the “Row and Column Headers Done Right” lesson free?
Yes — the full text of “Row and Column Headers Done Right” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Row and Column Headers Done Right”?
Associate every cell with the right headers. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Row and Column Headers Done Right” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- th, scope, and the caption Element
- Row and Column Headers Done Right
- Complex Tables: headers and id Pairing
- Layout Tables Are a Trap