Table Headers & Footers

⏱️ 14 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress74%

🎯 What you'll learn: Grouping a table into <thead>, <tbody>, and <tfoot> — the final, fully semantic table structure.

Section 1

thead, tbody, tfoot

These three elements group your rows by role: <thead> for header rows, <tbody> for the main data, <tfoot> for summary/total rows. Browsers can even keep thead visible while tbody scrolls in a long table.

table-full.html

HTML

<table>
  <caption>Monthly Expenses</caption>
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Rent</td><td>$500</td></tr>
    <tr><td>Food</td><td>$200</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$700</td></tr>
  </tfoot>
</table>

Category	Amount
Rent	$500
Food	$200
Total	$700

Section 2

Required Order

These elements must appear in a specific order: <caption> first, then <thead>, then <tbody>, then <tfoot> last — even though tfoot describes the "bottom" row, HTML historically allowed it before tbody so browsers could render it early; modern practice keeps it last for readability.

💡

You only need one of each

A table can have exactly one thead, one tfoot, but MULTIPLE tbody sections — useful for visually grouping large tables into logical chunks (e.g., one tbody per month in a yearly report).

Section 3

Full Accessible Table — Everything Together

This lesson completes Phase 7. A production-quality table combines everything: caption, thead with scoped th, tbody with row-scoped th where useful, and tfoot for totals.

table-complete.html

HTML

<table>
  <caption>2026 Quarterly Revenue</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Q1</th><td>$45,000</td></tr>
    <tr><th scope="row">Q2</th><td>$52,000</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>$97,000</td></tr>
  </tfoot>
</table>

🧩 Knowledge Check — Lesson 26

5 questions to test your table structure knowledge.

1. What does thead group?

2. How many tbody sections can one table have?

3. What comes first inside a table with all these elements?

4. What's tfoot typically used for?

5. A financial table needs "Total: $97,000" as the last row — which element wraps it?

💪

Coding Challenge — Lesson 26

Apply what you learned · Intermediate Level

Challenge: Build a Complete Expense Report Table

Build a full table with caption "Weekly Expenses", a thead with scoped column headers ("Item", "Cost"), a tbody with 3 expense rows, and a tfoot showing the total.

💡 Show hints if you're stuck

Remember the order: caption → thead → tbody → tfoot

Finished this lesson?

Mark it complete to track your progress.

Module 26 of 62Phase 7 — Tables

Table Headers & Footers

thead, tbody, tfoot

Required Order

Full Accessible Table — Everything Together

Phase 7 Complete!