HTML Academy · Lesson

thead tbody tfoot Structure

Organize table rows into semantic header, body, and footer sections.

thead tbody tfoot Structure is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Sections of a Table

A complete HTML table has three optional but recommended sections:

<thead> — header rows
<tbody> — body rows (main data)
<tfoot> — footer rows (totals, summaries)

thead

The <thead> element wraps header rows:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

tbody

The <tbody> element wraps the main data rows:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

tfoot

The <tfoot> element wraps footer rows — typically totals or summaries:

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

Complete Structured Table

A full table with all three sections:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

Why Use thead/tbody/tfoot?

Benefits of table structure:

Semantics — screen readers understand header vs data vs summary
CSS targeting — style sections independently
Print — thead repeats on every printed page
Scrolling — scroll the tbody independently with CSS overflow

Scrollable tbody

Make only the body scroll while header stays fixed:

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

Implicit tbody

If you omit <tbody>, the browser adds one automatically:

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

Multiple tbody Elements

A table can have multiple <tbody> groups:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

Styling Table Sections

Target sections with CSS:

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

Screen Reader Behavior

With proper thead/tbody structure, screen readers can:

Announce column headers as context for each data cell
Navigate between sections (header region vs data region)
Tell users how many rows and columns exist

thead Rows with Multiple Rows

A thead can have multiple rows for complex headers:

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

Quick Check

Where does tfoot typically appear in the HTML source vs the rendered table?

Recap: thead tbody tfoot

Table structure essentials:

<thead> — header rows (repeat on print)
<tbody> — data rows (can have multiple)
<tfoot> — summary/total rows
Enables CSS section targeting and accessible table reading
Always write tbody explicitly even though browsers add it

Frequently asked questions

Is the “thead tbody tfoot Structure” lesson free?

Yes — the full text of “thead tbody tfoot Structure” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “thead tbody tfoot Structure”?

Organize table rows into semantic header, body, and footer sections. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “thead tbody tfoot Structure” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

table tr td and th
thead tbody tfoot Structure
colspan and rowspan for Spanning
Table Accessibility scope summary caption

← Back to HTML Academy