<th>: The TH Element
Last updated: 2026-10-13
<th>The TH Element
A table header cell identifying a row/column, bold and centered by default with accessibility semantics.
| Category | Tables |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </th> tag |
| Status | Standard |
📝 Syntax
<th scope="col">Column header</th>⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
scope | Scope: col, row, colgroup or rowgroup. | |
colspan | Number of columns to span. | |
rowspan | Number of rows to span. | |
headers | IDs of related header cells (complex tables). | |
abbr | Abbreviated title for screen readers. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <th> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： scope helps screen readers read tables correctly; set it whenever possible.
❓ FAQ
QWhat does the scope attribute on th do?
A
scope='col'/row declares whether the header governs a column or a row, letting screen readers announce cells with full context — column header, row header, then data. Simple tables let browsers infer; mixed or merged-header tables must set scope explicitly.QCan th be used inside tbody?
AYes — the category cell at the start of a row (Name, Age in the first column) should be
<th scope='row'>: it is that row's header. th is not thead-exclusive; the test is whether it describes a row or column property.QCan the default th styling be changed?
AYes — bold centering is just browser stylesheet behavior; override freely with
th { text-align: left; font-weight: normal; }. Changing style never changes semantics, so never demote to td just because you dislike bold.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
