The same invoice table displays column headings, "Date", "Amount", "Status". These headings are not values like the others: they serve as a landmark for understanding every cell below them, and that difference needs to show in the code, not only on screen.
That is the role of the <th> tag: unlike <td>, it explicitly announces that a cell plays that landmark role.
Definition
th stands for "table header". It marks a cell as a landmark for an entire row or column, rather than an isolated value. By default, most browsers render its content bold and centred, a visual convention inherited from the very first HTML tables.
That default rendering is only a side effect of the browser's default style: the real value of th lies in the meaning it gives the document, not in its appearance. Bold and centring can be removed with one line of CSS without th losing its role.
The scope attribute: col or row
On a simple table, a screen reader often correctly guesses which cells are column headers and which are row headers. Once the table gets more complex, several row headers, merged cells, a double row of headings, that automatic guess becomes unreliable. The scope attribute removes the ambiguity by stating it explicitly.
scope="col" states that the cell is a header for the whole column below it. scope="row" states that it is a header for the whole row to its right. Two other values exist, colgroup and rowgroup, for a header that covers an entire group of columns, a value that directly echoes the <colgroup> tag, or rows rather than a single one.
<table>
<tr><th scope="col">Month</th><th scope="col">Courses sold</th><th scope="col">Revenue</th></tr>
<tr><th scope="row">June</th><td>42</td><td>$4,150</td></tr>
<tr><th scope="row">July</th><td>51</td><td>$5,030</td></tr>
</table>Semantics and accessibility
With scope correctly set, a screen reader announces the column heading and the row heading before every value: instead of simply hearing "$4,150", a blind user hears "Revenue, June, $4,150". That announcement, repeated at every cell, is what makes a long data table genuinely navigable, without having to mentally track each column's position.
A td made bold and centred with CSS looks visually like a th, but carries none of the information that lets a screen reader associate it with the cells it introduces. Replacing a real th with a styled td to "look the same" strips away all the accessibility value of the table, even though nothing changes on screen for a sighted user.
th and td: same position, different role
| Aspect | th | td |
|---|---|---|
| Role | Header, landmark for other cells | Ordinary value |
| Default rendering | Bold and centred | Normal, left-aligned |
| Read out by a screen reader | Heading announced before every related value | Value alone, with no repeated heading |
| Key attribute | scope | colspan, rowspan |
Best practices
Reserve th for cells that genuinely act as a landmark, most often the first row of the table, sometimes also the first column. Set scope as soon as a table goes beyond a handful of rows or columns, rather than relying on the browser's automatic guess. Never choose between th and td for the sake of appearance: bold and centring are fixed with one line of CSS, once th has been chosen for the right reason, the meaning of the cell.
Frequently asked questions
Can there be several th on the same row?
Yes, that is even the most common situation: a row of column headings is almost always made up entirely of th, one per column, followed by data rows made up of td.
Does scope always need to be written, even on a very simple table?
On a table with a single row of column headings, most screen readers correctly guess the structure even without scope. But adding it costs nothing and removes any ambiguity, and as soon as a table gains row headers or merged cells, scope becomes necessary rather than optional.
Can the style of a th be changed without losing its meaning?
Yes, entirely. CSS can remove the bold, remove the centring, left-align the text, change its colour: none of that affects the semantic role of the tag, which stays attached to th itself rather than to its appearance on screen.