caption, headers & scope

Make a table explain its data

Lesson 14 of 20 · 11 min · Module 5: Interfaces people can operate

A data table describes relationships between headers and cells. Its structure should make sense without relying on color or spacing alone.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Connect headers to table data
Distinguish data structure from page layout

The idea

Use a caption to name the table, th for header cells, and scope to identify column or row headers. Use CSS layout tools rather than tables for arranging unrelated page sections.

<table>
  <caption>Study time</caption>
  <thead><tr><th scope="col">Day</th><th scope="col">Minutes</th></tr></thead>
  <tbody><tr><th scope="row">Monday</th><td>20</td></tr></tbody>
</table>

01Name the table’s purpose

A caption explains what the whole table represents. It is part of the table structure, rather than an unrelated paragraph placed nearby.

02Identify each direction

Column headers explain vertical groups of data. Row headers explain horizontal groups. scope makes that direction explicit.

03Keep the structure consistent

Every row should follow the same column order. If the columns are Day and Minutes, each row needs one day and its corresponding number.

Your turn

Create a table with caption Weekly study plan. Its column headers must be Day and Minutes, both with scope="col". Add Monday/20 and Tuesday/30 as two body rows, using scope="row" on each day header.

What the checks look for

Caption names the data
Column headers have explicit scope
Row headers identify the days
Data cells contain the planned minutes

Try it in the editor →

Take this with you

A useful table explains how its cells relate to each other.

Go a little further

Add a total in tfoot without changing the column order or header relationships.