HTML <tfoot> Tag – Table Footer Section
📌 Introduction
The <tfoot> tag is used to define the footer section of a table.
It is typically used for:
- Totals (sum of values)
- Summary information
- Notes or results
It works together with:
<thead>→ header<tbody>→ main data<tfoot>→ footer
🧱 Syntax
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product A</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>
</table>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>TFOOT Example</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Book</td>
<td>50</td>
</tr>
<tr>
<td>Pen</td>
<td>10</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>60</td>
</tr>
</tfoot>
</table>
</body>
</html>
🖥️ Output Explanation
<thead>shows column titles<tbody>shows data rows<tfoot>shows summary (like total price)
🎯 Why <tfoot> is Important
1. 📊 Used in Reports
- Sales totals
- Financial summaries
- Data analysis tables
2. 🧠 Clear Structure
Separates:
- Data (tbody)
- Summary (tfoot)
3. ⚙️ Browser Behavior
Some browsers:
- Keep footer visible while scrolling large tables
🧩 Full Table Structure
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>yourName</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>End of Table</td>
</tr>
</tfoot>
</table>
⚖️ Table Sections Overview
| Tag | Purpose |
|---|---|
<thead> |
Column headers |
<tbody> |
Main data |
<tfoot> |
Summary/footer |
🎨 Styling Example
<tfoot style="background-color:#ddd; font-weight:bold;">
<tr>
<td>Total</td>
<td>60</td>
</tr>
</tfoot>
🚫 Common Mistakes
- Forgetting
<tbody>when using<tfoot>❌ - Putting data inside
<tfoot>❌ - Mixing structure randomly ❌
🧪 Mini Exercise
Create a table with:
<thead>for product names and prices<tbody>with at least 3 products<tfoot>showing total price- Style the footer differently
🚀 Next Step
Next lesson: The <form> tag — how to create interactive user input forms (very important for real websites).