Make a table readable by everyone – HTML Practice

This table looks fine, but a screen reader cannot tell what its numbers mean.

What to build

The same data, with proper structure.

Requirements

A caption reading Exam results.
A thead containing the header row, whose cells are th with scope="col".
A tbody with the two data rows.
In each data row, the name is a th with scope="row".

Constraints

Keep the same text in the same order.

Example

<th scope="row">Rina</th> labels everything in Rina's row.

Why it works

With header cells and scope, each score can be announced together with the student and subject it belongs to.

Hints

Hint 1

caption goes right after the opening table tag.

Hint 2

Wrap the header row in thead and the others in tbody.

Hint 3

A th for a column has scope="col".

Solution

Show one correct solution (try it yourself first)

<table>
  <caption>Exam results</caption>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Maths</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Rina</th><td>85</td></tr>
    <tr><th scope="row">Arif</th><td>72</td></tr>
  </tbody>
</table>

Lesson: Tables for data that has rows and columns →