Home Blog Contact

Web Design Tutorial — Lesson 22 of 27 [ Updated: 11 Aug 2026 ]

HTML Table Structure with <thead>, <tbody>, and <tfoot>

Learning Objectives

After completing this tutorial, you will be able to:

  • Understand <thead>, <tbody>, and <tfoot>.

  • Organize table content into logical sections.

  • Create cleaner and more semantic tables.

  • Build a professional table structure.

  • Understand when these elements are useful.

Table of Contents

  1. Introduction

  2. Why Table Structure Matters

  3. What Is <thead>?

  4. What Is <tbody>?

  5. What Is <tfoot>?

  6. Building a Complete Table

  7. Real-World Example

  8. Best Practices

  9. Common Beginner Mistakes

  10. Practice Exercise

  11. Assignment

  12. Summary

  13. Frequently Asked Questions

  14. Next Tutorial

Introduction

In the previous tutorial, you learned how to create basic HTML tables using:

<table>
<tr>
<th>
<td>

That structure is enough for a small table.

But imagine creating a table with 50, 100, or even 1,000 rows.

The code can quickly become difficult to understand.

HTML provides three elements that help organize larger tables:

<thead>  → Table header section
<tbody>  → Main table data
<tfoot>  → Table footer section

These elements don't just make the code look cleaner. They give your table a meaningful structure.

Why Table Structure Matters

Consider this table:

<table>

    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>$800</td>
        <td>2</td>
    </tr>

    <tr>
        <td>Keyboard</td>
        <td>$50</td>
        <td>5</td>
    </tr>

</table>

It works correctly.

However, if the table becomes larger, it becomes harder to identify:

  • Where the headers start.

  • Where the main data begins.

  • Where summary information belongs.

That's where <thead>, <tbody>, and <tfoot> become useful.

What Is <thead>?

The <thead> element contains the header rows of a table.

Example:

<thead>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
    </tr>
</thead>

Think of <thead> as:

"This is the header section of my table."

It usually contains one or more <tr> elements containing <th> cells.

What Is <tbody>?

The <tbody> element contains the main data of the table.

Example:

<tbody>

    <tr>
        <td>Laptop</td>
        <td>$800</td>
        <td>2</td>
    </tr>

    <tr>
        <td>Keyboard</td>
        <td>$50</td>
        <td>5</td>
    </tr>

</tbody>

Think of <tbody> as:

"This is the main content of my table."

Most of the rows in a typical table will be inside <tbody>.

What Is <tfoot>?

The <tfoot> element contains the footer or summary information of a table.

For example:

<tfoot>
    <tr>
        <th>Total</th>
        <td>$850</td>
        <td>7</td>
    </tr>
</tfoot>

A footer is useful for information such as:

  • Total

  • Average

  • Summary

  • Final result

  • Calculated values

Building a Complete Table

Now let's combine everything.

<table>

    <caption>Product Inventory</caption>

    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$800</td>
            <td>2</td>
        </tr>

        <tr>
            <td>Keyboard</td>
            <td>$50</td>
            <td>5</td>
        </tr>

        <tr>
            <td>Mouse</td>
            <td>$25</td>
            <td>10</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Total</th>
            <td>$875</td>
            <td>17</td>
        </tr>
    </tfoot>

</table>

Now the table has a clear structure:

Table
│
├── Caption
│
├── Thead
│   └── Header Row
│
├── Tbody
│   ├── Product Row
│   ├── Product Row
│   └── Product Row
│
└── Tfoot
    └── Total Row

This is much easier to understand when working with larger projects.

Real-World Example

Let's create a simple student result table.

<table>

    <caption>Student Results</caption>

    <thead>
        <tr>
            <th>Student</th>
            <th>HTML</th>
            <th>CSS</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>John</td>
            <td>85</td>
            <td>80</td>
        </tr>

        <tr>
            <td>Sarah</td>
            <td>92</td>
            <td>95</td>
        </tr>

        <tr>
            <td>David</td>
            <td>78</td>
            <td>84</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Class Average</th>
            <td>85</td>
            <td>86</td>
        </tr>
    </tfoot>

</table>

Here:

  • <thead> identifies the column headings.

  • <tbody> contains student results.

  • <tfoot> contains the class average.

This is a realistic example of how structured tables are used.

Best Practices

Use <thead> for headers

Keep your table's heading rows inside <thead>.

<thead>
    <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>
</thead>

Use <tbody> for main data

Put the primary records inside <tbody>.

<tbody>
    <tr>
        <td>John</td>
        <td>85</td>
    </tr>
</tbody>

Use <tfoot> for summaries

Use <tfoot> when your table has meaningful summary information.

For example:

<tfoot>
    <tr>
        <th>Total</th>
        <td>$1,500</td>
    </tr>
</tfoot>

You don't need <tfoot> simply because the element exists.

Use it when the data has a meaningful footer or summary.

Common Beginner Mistakes

Mistake 1: Putting everything inside <thead>

Don't put normal data rows inside <thead>.

Incorrect:

<thead>
    <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>John</td>
        <td>85</td>
    </tr>
</thead>

The student data belongs in <tbody>.

Mistake 2: Using <tfoot> for normal data

The footer should contain summary or footer information, not ordinary records.

Mistake 3: Thinking these elements automatically make tables beautiful

They don't.

<thead>, <tbody>, and <tfoot> organize the structure.

CSS will later control:

  • Colors

  • Borders

  • Spacing

  • Typography

  • Alignment

  • Responsive behavior

Practice Exercise

Create a table called Monthly Sales.

Use:

  • <caption>

  • <thead>

  • <tbody>

  • <tfoot>

Example structure:

<table>

    <caption>Monthly Sales</caption>

    <thead>
        <tr>
            <th>Month</th>
            <th>Sales</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>January</td>
            <td>$1,200</td>
        </tr>

        <tr>
            <td>February</td>
            <td>$1,500</td>
        </tr>

        <tr>
            <td>March</td>
            <td>$1,800</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Total</th>
            <td>$4,500</td>
        </tr>
    </tfoot>

</table>

Try writing it yourself first.

Then compare your code with the example.

Assignment

Create a Website Projects table.

Your table should contain:

Header

  • Project

  • Technology

  • Status

Body

At least three projects.

Footer

A summary such as:

Total Projects: 3

Try to build the complete table without copying the previous example.

Summary

In this tutorial, you learned how to organize HTML tables using:

<thead> → Header section
<tbody> → Main data section
<tfoot> → Footer or summary section

You also learned that these elements improve the structure and readability of your HTML.

A professional table can now follow this pattern:

<table>
    <caption>...</caption>

    <thead>
        ...
    </thead>

    <tbody>
        ...
    </tbody>

    <tfoot>
        ...
    </tfoot>
</table>

You now have a stronger foundation for creating structured HTML tables.

Frequently Asked Questions

Is <tbody> required?

Browsers can automatically create a <tbody> when it is omitted, but explicitly writing it makes your HTML structure clearer and easier to maintain.

Can a table have multiple <tbody> elements?

Yes. Multiple <tbody> sections can be useful when grouping different sets of rows.

Is <tfoot> always required?

No. Use it when the table has meaningful footer or summary information.

Do these elements change the table's design?

Not significantly by themselves. They mainly provide structure. CSS will be used later to create the visual design.

Next Tutorial

HTML Table Cells – Using colspan and rowspan

In the next tutorial, you'll learn how to make one table cell span across multiple columns or rows. This is useful for creating more advanced tables such as schedules, reports, invoices, and comparison tables.

← Previous Next →