HTML <tbody> Tag – Table Body Section
📌 Introduction
The <tbody> tag is used to group the main data content of a table.
It contains all the rows (<tr>) with actual data (<td>).
It helps separate:
- Header →
<thead> - Data →
<tbody> - Footer →
<tfoot>
🧱 Syntax
<table>
<thead>
<tr>
<th>Column 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>TBODY Example</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>yourname</td>
<td>20</td>
<td>Algeria</td>
</tr>
<tr>
<td>Sara</td>
<td>22</td>
<td>Morocco</td>
</tr>
</tbody>
</table>
</body>
</html>
🖥️ Output Explanation
<tbody>contains all data rows- It separates data from headers
- Makes table structure clean and organized
🎯 Why <tbody> is Important
1. 🧠 Better Structure
It clearly separates:
- Headers (
<thead>) - Data (
<tbody>)
2. 📊 Used in Real Applications
Most real systems use it:
- Admin dashboards
- Data tables
- Reports
3. ⚙️ JavaScript Control
You can easily manipulate table data:
document.querySelector("tbody").innerHTML = "";
✔ Useful for dynamic data loading
🧩 Full Table Structure
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>yourname</td>
</tr>
</tbody>
</table>
⚖️ <tbody> vs Other Parts
| Tag | Purpose |
|---|---|
<thead> |
Table headers |
<tbody> |
Main data |
<tfoot> |
Summary/footer |
🎨 Styling Example
<tbody style="background-color:#f9f9f9;">
<tr>
<td>yourname</td>
</tr>
</tbody>
🚫 Common Mistakes
- Putting headers inside
<tbody>❌ - Mixing structure randomly ❌
- Not using
<thead>+<tbody>together ❌
🧪 Mini Exercise
Create a table with:
<thead>for column titles<tbody>with at least 3 rows- Style alternating row colors (optional challenge)