📊 Phase 7 · Tables🟢 BeginnerMODULE 24
Table Rows & Columns
Course progress69%
🎯 What you'll learn: Replacing plain
<td> header cells with proper <th>, the scope attribute, and how this fixes accessibility for real screen reader users.
Section 1
th — the Missing Piece from Lesson 23
Last lesson's table used <td> for its header row too — technically it rendered fine, but it wasn't semantically a header. <th> (table header) fixes that: it's bold by default and, more importantly, is announced differently by screen readers.
table-th.html
HTML
<table> <tr> <th>Plan</th> <th>Price</th> </tr> <tr> <td>Starter</td> <td>$10</td> </tr> </table>
| Plan | Price |
|---|---|
| Starter | $10 |
| Premium | $25 |
Section 2
scope — Column vs. Row Headers
The scope attribute tells a screen reader whether a <th> heads a column or a row. Without it, screen readers guess based on position — scope removes the guesswork, especially in complex tables.
table-scope.html
HTML
<table> <tr> <th scope="col">Plan</th> <th scope="col">Price</th> </tr> <tr> <th scope="row">Starter</th> <td>$10</td> </tr> </table>
💡
Why this matters in practice
A screen reader navigating this table can announce "Price, $10, row: Starter" — giving full context for every cell, not just its raw value. Without scope, that context is much weaker or missing entirely in complex tables.
Section 3
colspan & rowspan Preview
Sometimes a header needs to span multiple columns or rows — like a "Q1 2026" heading over three monthly sub-columns. That's colspan/rowspan, covered in full next lesson (Advanced Tables) — here's a quick preview.
table-colspan-preview.html
HTML
<tr> <th colspan="3">Q1 2026</th> </tr> <tr> <th>Jan</th><th>Feb</th><th>Mar</th> </tr>
Section 4
td vs th — Quick Reference
| Cell type | Use for |
|---|---|
<th> | Column or row labels — the "headings" of the table's data |
<td> | The actual data values |
🧩 Knowledge Check — Lesson 24
5 questions to test your table headers knowledge.
1. What's the semantic difference between th and td?
2. What does scope="col" tell a screen reader?
3. Why does scope matter for accessibility?
4. What is colspan used for?
5. A table row has a th with scope="row" as its first cell — what does that mean?
Coding Challenge — Lesson 24
Apply what you learned · Beginner Level
Challenge: Build an Accessible Product Table
1. Build a table with a header row using th scope="col" for "Product", "Price", "Stock".
2. Add 3 data rows, each with a th scope="row" for the product name, then td cells for price and stock.
1. Build a table with a header row using th scope="col" for "Product", "Price", "Stock".
2. Add 3 data rows, each with a th scope="row" for the product name, then td cells for price and stock.
💡 Show hints if you're stuck
- Header row:
<th scope="col">Product</th> - Row label:
<th scope="row">Widget A</th><td>$15</td><td>12</td>
Finished this lesson?
Mark it complete to track your progress.
Module 24 of 62Phase 7 — Tables