Tables for Actual Tabular Data

What this is. A table is for data with two dimensions, where a cell means something because of both its row and its column. A price list, a schedule, a comparison.

When not to use one. Tables were once used to lay out entire pages. That is obsolete and actively harmful, because a screen reader announces a table as a table and tries to describe its rows and columns. CSS Grid, which you will meet in Part II, is what layout is for now.

The parts. caption names the table. thead holds the header row, tbody the data. th is a header cell and td is a data cell. The scope attribute on a th says whether it heads a column or a row, which is what lets a screen reader announce the right header alongside each value.

LIVE PREVIEW

loading editor…

Your turn → Remove the scope attributes. It still looks identical, and a screen reader has just lost the ability to say which column a value belongs to when reading across a row.

◈ Graded Build

Build the Projects section of your portfolio. It needs an unordered list of at least three skills, an ordered list of at least three process steps, and a table with a caption, a header row using scope, and at least two data rows.

Checked against the page you actually render, not against how you wrote it. 3 visible and 3 hidden checks.

loading editor…

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Semantic Structure and Landmarks →

← Back