The
<th>tag in HTML defines a header cell in a table.
Header cells are typically displayed in bold text and centered by default. They help describe the content of each column or row, making data tables easier to understand and accessible.
Syntax
<th scope="col|row">Header Content</th>Attributes
| Attribute | Description |
|---|---|
abbr | Provides an abbreviated version of the header cell content for screen readers. |
colspan | Specifies the number of columns a header cell should span. |
rowspan | Specifies the number of rows a header cell should span. |
headers | Associates the header cell with one or more data cells (id values of <td> elements). |
scope | Defines whether the header applies to a row, column, row group, or column group (row, col, rowgroup, colgroup). |
💡 Tip: Use the
scopeattribute to improve accessibility, especially for assistive technologies.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML th Tag Example</title>
</head>
<body>
<h2>Example of the <th> Tag</h2>
<table border="1">
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$150</td>
</tr>
</table>
</body>
</html>Output
Browser Output
There is visible output for this tag — it displays the table header cells in bold and center-aligned text by default.
Use our TryIt Editor to test and modify the example live.
Browser Support
Chrome | Firefox | Edge | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
Notes
<th>is always contained inside<tr>.- Can be used with
<thead>,<tbody>, or<tfoot>to structure table headers. scope,colspan, androwspanattributes improve accessibility and semantic clarity.- Browser styling: Bold and center-aligned by default, but fully customizable via CSS.
Conclusion
- The
<th>tag defines header cells in a table, giving structure to columns or rows. - It enhances readability and accessibility, especially for screen readers.
- Using
<th>properly ensures your tables are semantic, clear, and easy to interpret.