HTML provides three elements to divide tables into logical sections: thead for headers, tbody for the main content, and tfoot for footers. This semantic structure improves accessibility, makes styling easier, and helps with printing long tables.
Table Sections Overview
Tables can be divided into three main sections:
<thead>- Table header section<tbody>- Table body (main data)<tfoot>- Table footer section
The THEAD Element
The <thead> element groups header content in a table. It typically contains one or more rows of column headers.
thead-basic.html
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<!-- tbody content here -->
</table>The TBODY Element
The <tbody> element groups the body content (main data rows) in a table. This is where your actual data lives.
tbody-basic.html
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$999</td>
</tr>
<tr>
<td>Mouse</td>
<td>$25</td>
</tr>
</tbody>
</table>The TFOOT Element
The <tfoot> element groups footer content in a table. It's typically used for summary rows, totals, or notes.
tfoot-basic.html
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product A</td>
<td>$50</td>
</tr>
<tr>
<td>Product B</td>
<td>$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$80</td>
</tr>
</tfoot>
</table>Complete Table Structure
Here's a complete table using all three sections:
complete-structure.html
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>2</td>
<td>$999</td>
<td>$1,998</td>
</tr>
<tr>
<td>Mouse</td>
<td>5</td>
<td>$25</td>
<td>$125</td>
</tr>
<tr>
<td>Keyboard</td>
<td>3</td>
<td>$75</td>
<td>$225</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Grand Total</td>
<td>$2,348</td>
</tr>
</tfoot>
</table>Why Use Table Sections?
✨ Benefits of Table Sections:
- Semantic meaning: Clear structure for browsers and assistive technologies
- Styling: Easier to style different sections independently
- Accessibility: Screen readers can navigate table sections better
- Printing: Headers and footers can repeat on each printed page
- Scrolling: Headers can remain fixed while body scrolls
- Maintenance: Better code organization
Practical Examples
Financial Report
financial-report.html
<table>
<thead>
<tr>
<th>Category</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Revenue</td>
<td>$150,000</td>
<td>$175,000</td>
<td>$200,000</td>
<td>$225,000</td>
</tr>
<tr>
<td>Expenses</td>
<td>$100,000</td>
<td>$110,000</td>
<td>$120,000</td>
<td>$130,000</td>
</tr>
<tr>
<td>Profit</td>
<td>$50,000</td>
<td>$65,000</td>
<td>$80,000</td>
<td>$95,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Annual Total</td>
<td colspan="4">$750,000 Revenue | $460,000 Expenses | $290,000 Profit</td>
</tr>
</tfoot>
</table>Student Grades with Average
grades-average.html
<table>
<thead>
<tr>
<th>Student</th>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
<th>Average</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>95</td>
<td>88</td>
<td>92</td>
<td>91.7</td>
</tr>
<tr>
<td>Bob</td>
<td>87</td>
<td>91</td>
<td>85</td>
<td>87.7</td>
</tr>
<tr>
<td>Carol</td>
<td>92</td>
<td>89</td>
<td>94</td>
<td>91.7</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Class Average</td>
<td>91.3</td>
<td>89.3</td>
<td>90.3</td>
<td>90.3</td>
</tr>
</tfoot>
</table>Product Inventory
inventory.html
<table>
<thead>
<tr>
<th>SKU</th>
<th>Product Name</th>
<th>Stock</th>
<th>Price</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>SKU-001</td>
<td>Laptop</td>
<td>25</td>
<td>$999</td>
<td>$24,975</td>
</tr>
<tr>
<td>SKU-002</td>
<td>Mouse</td>
<td>150</td>
<td>$25</td>
<td>$3,750</td>
</tr>
<tr>
<td>SKU-003</td>
<td>Keyboard</td>
<td>75</td>
<td>$75</td>
<td>$5,625</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total Inventory</td>
<td>250 units</td>
<td>—</td>
<td>$34,350</td>
</tr>
</tfoot>
</table>Event Schedule
schedule.html
<table>
<thead>
<tr>
<th>Time</th>
<th>Activity</th>
<th>Location</th>
<th>Speaker</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 AM</td>
<td>Opening Keynote</td>
<td>Main Hall</td>
<td>Jane Smith</td>
</tr>
<tr>
<td>10:30 AM</td>
<td>Web Development Workshop</td>
<td>Room A</td>
<td>John Doe</td>
</tr>
<tr>
<td>1:00 PM</td>
<td>Design Patterns</td>
<td>Room B</td>
<td>Sarah Johnson</td>
</tr>
<tr>
<td>3:00 PM</td>
<td>Panel Discussion</td>
<td>Main Hall</td>
<td>Multiple Speakers</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<em>Schedule subject to change. Check website for updates.</em>
</td>
</tr>
</tfoot>
</table>Multiple TBODY Elements
You can use multiple tbody elements to group related rows:
multiple-tbody.html
<table>
<thead>
<tr>
<th>Department</th>
<th>Employee</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Engineering</td>
<td>John Doe</td>
<td>$120,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>$115,000</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">Marketing</td>
<td>Bob Wilson</td>
<td>$95,000</td>
</tr>
<tr>
<td>Alice Brown</td>
<td>$90,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total Payroll</td>
<td>$420,000</td>
</tr>
</tfoot>
</table>Styling Table Sections
Table sections make styling much easier:
section-styles.css
/* Style thead */
thead {
background-color: #4CAF50;
color: white;
font-weight: bold;
}
thead th {
padding: 12px;
text-align: left;
border-bottom: 2px solid #ddd;
}
/* Style tbody */
tbody tr {
border-bottom: 1px solid #ddd;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #e0e0e0;
}
tbody td {
padding: 10px;
}
/* Style tfoot */
tfoot {
background-color: #f5f5f5;
font-weight: bold;
}
tfoot td {
padding: 12px;
border-top: 2px solid #333;
}
/* Fixed header while scrolling */
thead {
position: sticky;
top: 0;
z-index: 10;
}Element Order in HTML
In HTML, you can place tfoot before tbody (for historical reasons), but browsers will render it at the bottom:
element-order.html
<!-- Both orders work the same -->
<!-- Option 1: Logical order -->
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>
<!-- Option 2: tfoot before tbody (legacy) -->
<table>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>...</tbody>
</table>Recommendation: Use the logical order (thead, tbody, tfoot) for better code readability.
Accessibility Benefits
♿ Accessibility Improvements:
- Screen readers can identify and announce table sections
- Users can navigate directly to headers, body, or footer
- Better context for understanding table structure
- Improved keyboard navigation through logical sections
- Assistive technologies can skip to relevant sections
Best Practices
✅ Do:
- Use thead for column headers
- Use tbody for main data content
- Use tfoot for summary rows and totals
- Place one or more tr elements inside each section
- Use semantic sections even for simple tables
- Style sections independently with CSS
- Keep section structure consistent
❌ Don't:
- Put content directly in thead/tbody/tfoot (must be in tr)
- Use multiple thead or tfoot elements (only one each)
- Skip sections for simple tables (still use them)
- Mix sectioned and non-sectioned rows
- Forget closing tags
Common Mistakes
❌ Wrong:
MARKUP
<!-- Content directly in tbody -->
<tbody>
Some text
</tbody>
<!-- Multiple thead elements -->
<table>
<thead>...</thead>
<thead>...</thead>
<tbody>...</tbody>
</table>
<!-- Mixing sectioned and non-sectioned -->
<table>
<thead>...</thead>
<tr><td>Data</td></tr>
<tbody>...</tbody>
</table>✅ Correct:
MARKUP
<!-- Proper structure -->
<tbody>
<tr>
<td>Text in td element</td>
</tr>
</tbody>
<!-- One thead, multiple tbody allowed -->
<table>
<thead>...</thead>
<tbody>...</tbody>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>
<!-- All rows in sections -->
<table>
<thead>
<tr><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
</tbody>
</table>When to Use Each Section
| Section | Use For | Example Content |
|---|---|---|
thead | Column headers | Name, Age, City |
tbody | Main data rows | Actual data entries |
tfoot | Summaries, totals | Total: $1,000 |
Key Takeaways
<thead>groups header rows<tbody>groups main data rows<tfoot>groups footer rows (totals, summaries)- All sections must contain tr elements with cells
- Only one thead and tfoot per table, but multiple tbody allowed
- Sections improve accessibility and make styling easier
- Headers and footers can repeat when printing long tables
- Use sections even for simple tables for better semantics
What's Next?
Now that you understand table sections, you're ready to learn about spanning columns and rows. In the next lesson, we'll explore the colspan and rowspan attributes to create more complex table layouts.