Table Head, Body & Footer in HTML (<thead>, <tbody>, <tfoot>)
When a table becomes large and complex, it is a good practice to divide it into three sections. This makes the table more organized, accessible, and SEO-friendly.
1. <thead> – Table Head
- Defines the heading section of a table.
- Usually contains one row with
<th>(table header cells). - Helps browsers, screen readers, and search engines understand the title of each column.
Example:
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
</table>Output :
<tbody> – Table Body
- Contains the main content/data of the table.
- Holds multiple rows (
<tr>) with data cells (<td>). - Even if
<tbody>is not written, browsers automatically treat all rows as part of the body.
Example:
<table border="1">
<tbody>
<tr>
<td>Laptop</td>
<td>$800</td>
<td>10</td>
</tr>
<tr>
<td>Phone</td>
<td>$500</td>
<td>20</td>
</tr>
</tbody>
</table>Output :
<tfoot> – Table Footer
- Defines the footer section of the table.
- Usually contains summary rows (like totals, averages, or notes).
- Appears after
<tbody>in HTML code but may be displayed at the bottom of the table.
Example:
<table border="1">
<tfoot>
<tr>
<td colspan="2">Total Quantity</td>
<td>30</td>
</tr>
</tfoot>
</table>Output :
Complete Example with <thead>,<tbody>,<tfoot> :
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$800</td>
<td>10</td>
</tr>
<tr>
<td>Phone</td>
<td>$500</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total Quantity</td>
<td>30</td>
</tr>
</tfoot>
</table>Output :
