Project: Data table

HTML course · Intermediate · Lesson 24/67

Overview of the 5-lesson project: an accessible data table.

Project: Data table

In this 5-lesson project you'll build an accessible monthly sales report table. Each lesson adds one piece, and by the final lesson you'll have a complete report.

You'll use:

Document skeleton (DOCTYPE, html, head, body)
table, caption, thead, tbody, tfoot
tr, th (scope), td
colgroup and col for column styling
colspan to merge cells
HTML comments for documentation

Ready? Let's start.

Anatomy of a data table

A data table has several sections:

caption: the table's title
thead: the column header row
tbody: the actual data rows
tfoot: the summary/totals row
tr: one row
th: a header cell
td: a data cell

These sections organize the table both visually and semantically, making the structure clear for screen readers.

Accessible table basics

In an accessible table, every th cell carries a scope attribute. It tells screen readers whether the cell is a column header (scope="col") or a row header (scope="row"). That way, when a user reads a cell's value, they also hear which header it belongs to. Throughout this project we'll add scope to every header cell.

Exercise Start with an empty document skeleton

To start the project, write an empty HTML document skeleton. It should contain DOCTYPE, <html>, <head>, and an empty <body>. We'll add lang, meta, and headings in later lessons.

Show example solution

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Test yourself

Which element gives a table a visible title?
- thead
- caption
- title
- th
Show answer

caption — Correct. caption carries the table's title and shows above the data.
Match each table section to its role

caption

Table title
thead

Header row section
tbody

Body data section
tfoot

Summary/totals section

Project: Data table