Header and caption
Set up the skeleton, header row and caption.
Open the table: caption and thead
A table is wrapped by the table element. Inside it comes caption (the title) first, then thead (the header row section). Inside thead, each row is a tr and each header cell is a th. Column header th cells get scope="col" so a screen reader knows they head a column.
scope="col" and scope="row"
scope="col" marks a cell as a column header; it's used for the header cells at the top of the table. scope="row" means a row header; it's typically given to the first cell in a tbody row (for example a month name). Both let screen readers build cell relationships. A wrong value misleads users, so pick the scope that matches the cell's position.
Exercise Fill head, open the table with caption and thead
Take the empty skeleton from the previous lesson. Add lang="en" to <html>. Inside <head> add meta charset=utf-8, viewport (width=device-width, initial-scale=1), and title with content Monthly Sales Report. Inside <body> open a <table>; add a caption (Monthly Sales Report — 2026), then a thead with one tr and four th scope="col" (Month, Product, Units, Revenue).
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Monthly Sales Report</title>
</head>
<body>
<table>
<caption>Monthly Sales Report — 2026</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Product</th>
<th scope="col">Units</th>
<th scope="col">Revenue</th>
</tr>
</thead>
</table>
</body>
</html>Test yourself
-
What should scope be on a column header th cell?
<th scope="?">Month</th>- col
- row
- column
- header
Show answer
col — Correct. scope="col" marks the cell as a column header.
-
Complete the th cell's scope
<th ____>Month</th>Show answer
<th scope="col">Month</th> -
Match each table element to its purpose
- caption
- Table title
- thead
- Column headers section
- th
- Header cell
- scope
- Cell scope