6. Tables

data in rows and columns

Tables put information into rows and columns so it can be read and compared at a glance. At Level 4 the goal is not just a grid that looks right - it is markup that says clearly which cells are headers and which are data, so the table works for everyone, including screen readers.

The building blocks of a table

A table is made from a small set of elements that wrap rows and cells. Each one has one job:

<table> is the container that holds the whole table.
<caption> is a short title that describes the table; the browser shows it just above the table.
<thead> groups the header row(s); <tbody> groups the rows of data.
<tr> is one row (table row) - a horizontal line of cells.
<th> is a header cell - it names a column (or a row).
<td> is a data cell - the actual values in the table.

Try it: a small table

Copy the HTML into a file and open it in a browser. The CSS tab is a tiny extra rule just to make the cell borders visible while you learn.

You should see a two-column table with a bold header row ("Month" and "Sales (£)") and the caption "Monthly sales" shown above it.

Key points

Use <th> for header cells - the browser renders them bold, and screen readers announce them as headers.
A <caption> describes the table and appears above it.
Each row is a <tr>; the cells inside it are <th> (headers) or <td> (data).
Group header rows in <thead> and data rows in <tbody> so the structure is clear.

Exercises

Exercise 1 - Build a two-column table

Preparation: re-read "The building blocks of a table" above, and study the "Try it" snippet.

Write a <table> with two columns and three rows. The first row is a header row (two <th> cells); the other two rows are data rows (two <td> cells each). Choose your own data - for example a subject and a grade.

Try it in: save as index.html and open in a browser, or use CodePen / VS Code. Starter: <table>…</table>

Hint 1 - direction

Write one <tr> per row. The header row uses <th>; the data rows use <td>.

Hint 2 - partial solution

You need three <tr> elements: one header row plus two data rows, each containing exactly two cells.

Hint 3 - full solution

Check your work: you have three <tr> rows, the top row is bold (<th>), and the two lower rows show your data (<td>).

Exercise 2 - Add a caption

Preparation: re-read the point about <caption>.

Take the table you built in Exercise 1 and add a <caption> as the first element inside <table>. Write a caption that describes what the table shows.

Try it in: your editor, then reload the page in the browser.

Hint 1 - direction

The <caption> goes immediately after the opening <table> tag, before any <tr> or <thead>.

Hint 2 - partial solution

The caption text is the description - for example, what the columns mean, like "My results this term".

Hint 3 - full solution

Write <caption>My results this term</caption> as the first line inside <table>. It will appear above the table in the browser.

Check your work: a short description now appears above the table, and it is the first child of <table>.

Exercise 3 - Predict how th and td differ

Preparation: re-read the key point about <th> versus <td>.

Without running it, predict: in the same table, how does a <th> cell look different from a <td> cell? Explain, then check your prediction in the browser.

No code needed - answer in a sentence, then check in the browser or DevTools.

Hint 1 - direction

Think about the default styling the browser applies to each.

Hint 2 - partial solution

One of the two is emphasised more than the other.

Hint 3 - full solution

A <th> cell is rendered bold (and often centred) because it is a header; a <td> cell is normal-weight, left-aligned text. Screen readers also treat them differently.

Check your work: you said <th> is bold (a header) and <td> is normal text - not the other way around.

Exercise 4 - Fix the mixed-up headers

Preparation: note the difference between <th> and <td>.

A table has its column headers ("Name" and "Age") written as <td>, and the actual data ("Alice", "Bob", "21", "24") written as <th>. Swap them so the headers use <th> and the data use <td>, then explain the difference it makes.

Try it in: your editor, then reload the page in the browser.

Hint 1 - direction

Find the header row first, then the two data rows.

Hint 2 - partial solution

Headers describe a column (or row); data are the actual values inside the table.

Hint 3 - full solution

Check your work: "Name" and "Age" are now bold <th> cells, and "Alice", "Bob", "21", "24" are normal <td> cells.