The <thead> tag in HTML is used to group the header rows of a table. It helps to semantically separate the table’s header from its body (<tbody>) and footer (<tfoot>), improving readability and accessibility.
📌 What Is the <thead> Tag?
- The
<thead>element contains one or more<tr>(table row) elements representing the header part of a table. - Usually includes
<th>elements that label columns. - Helps browsers and assistive technologies understand the table structure.
- Enables features like sticky headers in some browsers and easier styling.
✅ Basic Syntax
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1.00</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.80</td>
<td>15</td>
</tr>
</tbody>
</table>
🧩 Benefits of Using <thead>
| Benefit | Description |
|---|---|
| Semantic clarity | Separates headers from table body |
| Accessibility | Screen readers can announce header info properly |
| Styling | Allows easy CSS targeting of header section |
| Browser optimizations | Some browsers render header first for performance |
🎨 Styling <thead>
You can style the header to make it visually distinct:
thead {
background-color: #333;
color: white;
}
thead th {
padding: 10px;
text-align: left;
}
⚠️ Important Notes
<thead>should be followed by<tbody>and optionally<tfoot>.- For older browsers, place
<thead>before<tbody>in the markup. - Avoid placing non-header rows inside
<thead>to keep semantic integrity.
🏁 Summary
The <thead> tag semantically groups the header rows of a table. It enhances accessibility, styling control, and helps browsers render tables efficiently.