Build Accessible Data Tables

A table is for tabular data: information whose values gain meaning from both a row and a column.

Our library data compares the same properties for several study rooms. Each room has a Seats value and a Computers value. That repeated pattern lets someone compare rooms or compare one property across rooms.

Choose a table because of these relationships—not because you want content to look like columns.

Do not use a table merely to place unrelated content beside other content.

A library page with a welcome paragraph, opening-hours text, and a list of events should use the ordinary semantic structure you already know: headings, paragraphs, and lists. Even if a visual design later places those sections in columns, they do not become a comparison dataset.

Ask: “Does each item belong at the intersection of a consistent row and column?” If yes, a table may fit. If no, use ordinary page structure.

A <table> contains related data. Inside it, each <tr> creates one row, and cells belong inside that row.

Use <th> for a header cell and <td> for a data cell. This is semantic meaning—not a choice to make text look bold. In this fragment, the first row names the values below it. In the next row, Maple is also a header cell because it identifies that room; 12 and 2 are data cells.

Each row has three cells. Their left-to-right sequence establishes their positions: Room, Seats, then Computers.

A short structural fragment using the shared dataset

Read each row from left to right. The first cell in the second row aligns with Room; the second aligns with Seats; the third aligns with Computers.

The browser may display a simple grid, but the HTML nesting supplies the structure: a table contains rows, and rows contain cells.

A caption tells readers what a table is about. It is associated with the table as a whole; it does not replace the column header or row header cells inside the table.

Put <caption> directly inside <table> as its first child, before any row groups. For this table, use: Library study rooms: seats and computers.

<thead> and <tbody> are row groups. Put <tr> elements directly inside these groups—never put <th> or <td> elements directly inside a row group.

<thead> contains the one column header row. <tbody> contains the three room rows. These elements organize rows only: existing header cells remain <th>, and numeric data cells remain <td>.

This structural outline focuses on where the caption and row groups go. The existing cells stay inside their rows.

A column header names a property that runs down a column, such as Seats or Computers. A row header names the record that runs across a row, such as Maple or Oak.

In this simple table, add scope="col" to each column header in the top row. Add scope="row" to each room-name header, even though those headers are inside <tbody>. The numeric entries remain data cells (<td>).

scope makes the header direction explicit. Put it on a <th>, never on a <td>.

This reference uses scope="col" across the top and scope="row" for each room name in the body.

Complete table markup with explicit header directions

A data cell is meaningful because of the two headers that meet at its position. Trace from the cell up to find its column header, then left to find its row header.

For example, a value of 8 is not useful by itself. Its full context is expressed with the row header first: Oak / Seats = 8.

This two-direction trace is a practical way to check a simple table. Correct header markup helps assistive technologies convey that context, although the exact announcement can vary by browser and assistive technology.

A table can look understandable in a browser even when its HTML weakens the header associations. Inspect the element and its scope value, not only the visible text.

A room name in a body row is a row header. A property name across the top is a column header. scope belongs on a <th>, never on a <td>.

Compare the header role and direction in these short fragments.

Work on your own computer in study-rooms.html. The starting file below produces only the page heading. Save it, open it in your browser, and confirm that initial state before adding the table.

Then place a table after the <h1>. Use the shared rooms and values in this order: Maple—12 seats and 2 computers; Oak—8 seats and 0 computers; Pine—16 seats and 4 computers.

Include the required caption, one <thead> for the column-header row, and one <tbody> for the three room rows. Each row has exactly three cells. Save and refresh after you build your version.

Save this as study-rooms.html if you need a standalone starting point. Before adding the table, opening this file shows only the heading in the output below.

After building your own version, compare your saved HTML with this reference. The completed browser view should include the caption and all table values. No CSS, borders, or presentational attributes are needed.

Complete reference solution

Verify both the rendered page and the saved HTML. In the browser, check that the caption and all six numeric values appear. In the source, check that the caption is the first child of <table>, there is one <thead> and one <tbody>, every row has three cells, and scope appears only on <th> elements.