HTML <th> Tag – Table Header Cell
📌 Introduction
The <th> tag defines a header cell in a table.
It is used to label columns or rows in a table.
By default:
- Text is bold
- Text is centered
🧱 Syntax
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>TH Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<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
<th>creates column titles- They appear bold and centered by default
- They improve table readability
🎯 Why <th> is Important
1. 🧠 Better Structure
It clearly labels:
- Columns
- Rows
2. 📊 Improves Readability
Users immediately understand the data meaning.
3. ♿ Accessibility
Screen readers identify headers easily.
⚖️ <th> vs <td>
| Tag | Purpose | Style |
|---|---|---|
<th> |
Header cell | Bold + centered |
<td> |
Data cell | Normal text |
🧩 Example in Full Table
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>yourName</td>
<td>20</td>
</tr>
</table>
🎯 Advanced Usage
Row Header
<tr>
<th>Student</th>
<td>yourName</td>
</tr>
✔ <th> can also be used for row labels
🎨 Styling Example
<th style="background-color:#ddd; padding:5px;">Name</th>
🚫 Common Mistakes
- Using
<th>inside wrong structure ❌ - Forgetting
<tr>❌ - Using
<td>instead of<th>for headers ❌
🧪 Mini Exercise
Create a table with:
- 3 columns using
<th> - At least 3 rows of data
- Style headers with background color
- Add borders