Illustration of a timetable-style table with a highlighted header row and merged cells

Module 5: Tables · Lesson 2 of 5

HTML Table Headers and Captions: th, scope, caption

Q: What is the difference between th and td in HTML?

<td> is an ordinary data cell, and <th> is a header cell that labels other cells, usually in the top row or the first column. Browsers show th text bold and centered. More importantly, screen readers read the header aloud with each related data cell, so 19:00 is announced as "Time, 19:00". The W3C table pattern describes how assistive technology uses these cells.

Q: How do I add a title to an HTML table?

Put a <caption> element directly after the opening <table> tag, before any rows. Browsers center it above the table by default, and screen readers announce it when a user reaches the table. A heading placed above the table looks much the same. The difference is that only a caption is formally tied to the table it describes.

Q: What does scope do in an HTML table?

The scope attribute says which cells a <th> labels. With scope="col" , that is the cells below it in the same column. With scope="row" , it is the cells to its right in the same row. Browsers can often guess in a simple table. Scope removes the guessing, which helps most when a table has row headers and column headers at once. The th reference lists all its attributes.

About 7 min

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

All lessons in Module 5

Module overview

Goal: Give a table header cells and a caption.

Learn

A grid of plain cells, like the ones from Table Basics, leaves readers guessing. Is 19:00 a time or a price? Two tags clear that up.

<th> (table header) takes the place of <td> in a heading cell. Browsers show it bold and centered. Screen readers read it out with each data cell, so users hear "Time, 19:00" and not a bare "19:00".
<caption> is the title of the whole table. It has to be the first element inside <table>.

Headers usually fill the first row, one per column. They can also open each row, like player names on a scoreboard. To say which way a header points, add scope="col" or scope="row". The HTML standard defines the scope attribute (opens in a new tab).

The short version

A <th> is a header cell that labels a column or a row, and <td> holds the data.
<caption> is the table's title. It goes first inside <table>.
scope="col" and scope="row" tell assistive technology which cells a header labels.
Use <th> for every label, even one you later restyle to look plain. The tag describes meaning.

Example

<table>
  <caption>Top scorers</caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Goals</th>
  </tr>
  <tr>
    <td>Mia</td>
    <td>14</td>
  </tr>
  <tr>
    <td>Leo</td>
    <td>11</td>
  </tr>
</table>

Your task

The cinema's table is missing its headers and its title.

Make the three cells of the first row <th> header cells. The movie cells stay <td>.
Add a <caption> reading Saturday showtimes as the very first thing inside the table.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Common mistakes

Wrong

<tr>
  <td><strong>Movie</strong></td>
  <td><strong>Time</strong></td>
</tr>

Right

<tr>
  <th scope="col">Movie</th>
  <th scope="col">Time</th>
</tr>

Bold text looks like a header to sighted users, while th makes screen readers announce the label with every cell in its column.

Wrong

<caption>Saturday showtimes</caption>
<table>
  <tr>
    <th>Movie</th>
  </tr>
</table>

Right

<table>
  <caption>Saturday showtimes</caption>
  <tr>
    <th>Movie</th>
  </tr>
</table>

Browsers drop a caption tag found outside a table, and its words become plain text with no link to the table.

Go deeper

Larger tables usually split their rows into groups: <thead> for the header row, <tbody> for the data and <tfoot> for totals. They come in that order, after the caption. By default the groups change nothing on screen. They do give CSS and scripts clear hooks, and many browsers repeat the thead row at the top of each page when a long table is printed.

scope has two more values, colgroup and rowgroup, for a header over a whole group of columns or rows. In a truly complex table, each <td> can list its exact header cells with a headers attribute that points at their ids. If you ever need that, try splitting the data into two simpler tables first. Everyone reads those more easily. WCAG checks these header relationships under Info and Relationships (opens in a new tab).

A good caption says what the data is and when or where it applies, like "Saturday showtimes, Screen 1 and 2". Screen reader users hear it before anything else in the table. To experiment with header styles, an HTML table generator (opens in a new tab) lets you style th cells and preview the result.

Frequently asked questions

What is the difference between th and td in HTML?

<td> is an ordinary data cell, and <th> is a header cell that labels other cells, usually in the top row or the first column. Browsers show th text bold and centered. More importantly, screen readers read the header aloud with each related data cell, so 19:00 is announced as "Time, 19:00". The W3C table pattern (opens in a new tab) describes how assistive technology uses these cells.

How do I add a title to an HTML table?

Put a <caption> element directly after the opening <table> tag, before any rows. Browsers center it above the table by default, and screen readers announce it when a user reaches the table. A heading placed above the table looks much the same. The difference is that only a caption is formally tied to the table it describes.

What does scope do in an HTML table?

The scope attribute says which cells a <th> labels. With scope="col", that is the cells below it in the same column. With scope="row", it is the cells to its right in the same row. Browsers can often guess in a simple table. Scope removes the guessing, which helps most when a table has row headers and column headers at once. The th reference lists all its attributes.

Tags in this lesson

<caption>A table's title, written as the table's first child.<table>Tabular data laid out in rows and columns.<tbody>Wraps the main rows of data in a table.<td>A normal data cell inside a table row.<tfoot>Holds summary rows such as totals at the foot of a table.<th>Header cell for a column or row, shown bold and centered by default.<thead>Wraps the header row or rows of a table.