HTML <thead> Tag – Table Header Section
📌 Introduction
The <thead> tag is used to group the header content of a table.
It contains the column titles (usually <th> elements).
It helps browsers, developers, and screen readers understand the structure of a table.
🧱 Syntax
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
</table>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>THEAD Example</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tr>
<td>yourName</td>
<td>20</td>
<td>Algeria</td>
</tr>
<tr>
<td>Sara</td>
<td>22</td>
<td>Morocco</td>
</tr>
</table>
</body>
</html>
🖥️ Output Explanation
<thead>contains the table headers- It separates headers from data
- Improves readability and structure
🎯 Why <thead> is Important
1. 🧠 Better Structure
It clearly separates:
- Headers →
<thead> - Data →
<tbody>
2. 📊 Better for Large Tables
In big tables, browsers can:
- Freeze headers
- Improve scrolling experience
3. ♿ Accessibility
Screen readers understand table structure better.
🧩 Full Table Structure
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>yourName</td>
<td>20</td>
</tr>
</tbody>
</table>
⚖️ <thead> vs Other Parts
| Tag | Purpose |
|---|---|
<thead> |
Table header |
<tbody> |
Table data |
<tfoot> |
Table footer |
🎨 Styling Example
<thead style="background-color:#ddd;">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
🚫 Common Mistakes
- Using
<thead>without<tr>❌ - Putting data rows inside
<thead>❌ - Ignoring
<tbody>❌
🧪 Mini Exercise
Create a table with:
<thead>containing 3 column headers<tbody>with 3 rows of data- Add borders and background color to header