th, scope, and the caption Element
Give a table a title and proper header cells.
th, scope, and the caption Element is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 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.
Data Tables Carry Meaning
A real data table shows relationships between rows and columns. Mark it up well and screen readers can announce which header each value belongs to.
A Plain Table Is Confusing
If every cell is just a td, a screen reader reads numbers with no context. The user hears values but never learns what they mean.
<table>
<tr><td>Name</td><td>Score</td></tr>
<tr><td>Ada</td><td>92</td></tr>
</table>Header Cells Use th
Swap header cells from td to th. Now the browser knows those cells label the data, not hold it, and exposes them as headers.
<tr><th>Name</th><th>Score</th></tr>Why th Changes Everything
A th element is announced as a header and can be tied to the cells it describes. That link is what gives lonely numbers their meaning.
The scope Attribute
Add scope to each th to say which cells it covers. The value is col for a column header or row for a row header.
<th scope="col">Score</th>scope=col for Top Headers
Use scope=col on the header at the top of a column. Every cell below it inherits that label as the user moves down.
<th scope="col">City</th>scope=row for Side Headers
Use scope=row on the first cell of a row when it names that row, like a person or a date along the left edge.
<th scope="row">Ada</th>caption Names the Table
The caption element gives the whole table a title. Screen reader users hear it first, so they know what they are about to explore.
<table>
<caption>Quiz scores by student</caption>
</table>caption Must Come First
Place caption as the very first child inside the table, right after the opening tag. Any other position is invalid and may be ignored.
Caption Beats a Heading
A nearby h2 is not enough. The caption is programmatically tied to the table, so users discover the title even when jumping table to table.
A Complete Simple Table
Caption, header row of th with scope, then data rows. This foundation makes most simple tables fully accessible with zero ARIA.
<table>
<caption>Scores</caption>
<tr><th scope="col">Name</th><th scope="col">Score</th></tr>
<tr><th scope="row">Ada</th><td>92</td></tr>
</table>Quick Check
You are labeling the column header at the top of a table.
Recap: The Three Building Blocks
You learned the trio of accessible tables: th for headers, scope to aim them, and caption to name the table. That is most of the job done.
Frequently asked questions
Is the “th, scope, and the caption Element” lesson free?
Yes — the full text of “th, scope, and the caption Element” 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 “th, scope, and the caption Element”?
Give a table a title and proper header cells. 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 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “th, scope, and the caption Element” 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