Test your knowledge: HTML Tables

A short assessment covering captions, scope, row groups, and the judgment calls tabular data asks for.

Stuck? Each question has an optional hint.

Skip a hard question and review it before your results.

Questions and answer options can shuffle between attempts.

You can retake this quiz whenever you like.

Question 1 of 5

What does `scope="col"` on a header cell actually do?

Tables have two axes; scope says which one a header speaks for.

Answer options A Colors the column for visual identification. B Tells assistive technology the header labels its column, so values can be announced with it. C Merges the header across the whole column. D Sorts the column when clicked.

Scope declares which axis a header labels, letting screen readers attach it to every value in that column or row. Nothing on screen changes, which is exactly why it is easy to forget and why its loss lands quietly on others.

Review this lesson

Question 2 of 5

Where must the `<caption>` element sit, and why does position matter?

When does a reader need the table's name: before or after its contents?

Answer options A Anywhere inside the table; position is a style choice. B After the header row, so it reads like a title once the headers are known. C As the table's first child, so it is announced before any cell is read. D Outside the table, directly above it.

The caption must be the first child of the table so it is announced before any cell, giving readers the context to decide whether to dive in or skip past. A heading above the table carries no such guaranteed relationship.

Review this lesson

Question 3 of 5

A schedule table lists days down the first column and hours across the top. How should the day cells be marked?

Reading across Friday's row, what should each value be announced with?

Answer options A As <td>, since only the top row holds headers. B As <th scope="row">, so the day is announced with each value across its row. C As <caption> entries, one per day. D As a separate nested table in the first column.

Row headers let a reader moving across a row hear the day attached to every value, which is how the position stays known. Data cells in that column would leave the values anonymous after the first one.

Review this lesson

Question 4 of 5

You are drawing the table on paper to track where each `rowspan` ends. What is that usually a sign of?

Heavy spanning tends to fight something simpler underneath.

Answer options A The table is large enough to need <thead> and <tfoot>. B The content wants to be several simpler tables, or a different structure entirely. C The browser needs the cells pre-measured in CSS. D Nothing; this is the normal authoring workflow for tables.

Sparse spanning is fine, but heavy spanning produces a lattice hostile to screen readers and restyling. Needing paper to track it is the tell that the content wants simpler tables or a description list instead.

Review this lesson

Question 5 of 5

Why is a page grid built from table markup considered a mistake, even though it renders correctly?

A table tells tools something about the content. What does a page scaffold not contain?

Answer options A Tables render too slowly for layout work. B The markup announces row-and-column data that does not exist, misleading assistive technology. C Table cells cannot hold headings or images. D It is valid HTML but forbidden by validators for marketing pages.

A layout grid is not tabular data, so table markup announces relationships that do not exist. Grid and flexbox exist precisely so structure can be expressed without borrowing a reporting element's meaning.

Review this lesson

Test your knowledge: HTML Tables