How to use thead tbody tfoot in html

HtmlHow-ToBeginner · 4 min read

How to Use thead, tbody, and tfoot in HTML Tables

Use <thead> to group table header rows, <tbody> for the main body rows, and <tfoot> for footer rows in an HTML table. These tags help organize table content semantically and improve readability and accessibility.

📐

Syntax

The <thead> element contains the header rows of a table, usually with column titles. The <tbody> holds the main data rows. The <tfoot> is for footer rows, often used for summaries or totals.

All three must be inside a <table> element and contain <tr> rows. Inside rows, use <th> for headers and <td> for data cells.

html

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

Output

A table with a header row labeled 'Header 1' and 'Header 2', one data row with 'Data 1' and 'Data 2', and a footer row with 'Footer 1' and 'Footer 2'.

💻

Example

This example shows a table with a header, body, and footer. The header labels columns, the body has data rows, and the footer shows a summary.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table with thead, tbody, tfoot</title>
  <style>
    table {
      border-collapse: collapse;
      width: 50%;
      margin: 20px auto;
      font-family: Arial, sans-serif;
    }
    th, td {
      border: 1px solid #333;
      padding: 8px 12px;
      text-align: left;
    }
    thead {
      background-color: #4CAF50;
      color: white;
    }
    tfoot {
      background-color: #f2f2f2;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apples</td>
        <td>$1.00</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>$0.80</td>
        <td>8</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Total</td>
        <td></td>
        <td>18</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Output

A styled table with a green header row showing 'Product', 'Price', 'Quantity'; two data rows for Apples and Oranges with prices and quantities; and a footer row showing 'Total' and the sum quantity 18.

⚠️

Common Pitfalls

Not wrapping rows inside <thead>, <tbody>, or <tfoot> can cause inconsistent styling and accessibility issues.
Placing <tfoot> after <tbody> is allowed but putting it before <tbody> helps browsers render footers early.
Using <th> only in <thead> is common, but you can use <th> in <tbody> for row headers.

html

<!-- Wrong: Missing thead, tbody, tfoot -->
<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
  <tr><td>Bob</td><td>25</td></tr>
</table>

<!-- Right: Using thead, tbody -->
<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>30</td></tr>
    <tr><td>Bob</td><td>25</td></tr>
  </tbody>
</table>

Output

Two tables: the first without semantic grouping, the second with header and body sections clearly separated.

📊

Quick Reference

Use these tags inside a <table> to organize rows:

with with with summary or totals

Tag	Purpose	Typical Content
thead	Groups header rows
cells
tbody	Groups main data rows
or	cells
tfoot	Groups footer rows

✅

Key Takeaways

Use for table headers, for main data, and for footers to structure tables clearly.

Place before in HTML for better browser rendering, though both orders work.

Always wrap rows () inside these sections for semantic clarity and accessibility.

Use cells in for column headers and optionally in for row headers.

Proper use improves styling control, screen reader support, and table readability.