**`<th>`** marks a cell as a header rather than plain data, which browsers style as bold and centered by default, and — more importantly — which screen readers use to announce column/row context for every related data cell. The **`scope`** attribute clarifies exactly what the header applies to: `scope="col"` for a column header, `scope="row"` for a row header, helping assistive technology correctly associate each `<td>` with its header when reading the table cell-by-cell.
1Understanding <th>
`<th>` marks a cell as a header rather than plain data, which browsers style as bold and centered by default, and — more importantly — which screen readers use to announce column/row context for every related data cell. The `scope` attribute clarifies exactly what the header applies to: scope="col" for a column header, scope="row" for a row header, helping assistive technology correctly associate each <td> with its header when reading the table cell-by-cell.
Without scope (or a matching headers/id setup for complex tables), screen readers have to guess which header applies to a given cell based on position alone — explicit scope removes that ambiguity, especially for irregular tables.
<table>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
</tr>
<tr>
<td>France</td>
<td>Paris</td>
</tr>
</table>2Practical Example
Here is a real-world application of <th> showing how it is used in production HTML.
<!-- Row headers for a table where each row represents an entity -->
<tr>
<th scope="row">Total</th>
<td>$1,250</td>
</tr>3Best Practices
Follow these guidelines when working with <th>:
1. Use <th> for every header cell — column headers and, where relevant, row headers
2. Set scope="col" or scope="row" explicitly for accessibility
3. Reserve <th> for genuine headers — don't use it just to make a data cell look bold, use CSS for that instead
Tip: Without scope (or a matching headers/id setup for complex tables), screen readers have to guess which header applies to a given cell based on position alone — explicit scope removes that ambiguity, especially for irregular tables.
<table>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
</tr>
<tr>
<td>France</td>
<td>Paris</td>
</tr>
</table>