HTML <thead>, <tbody>, and <tfoot>: Table Sections

Thead groups header rows, tbody groups the main rows, and tfoot groups totals or other footer rows. These wrappers help organize long tables. Before writing the code, picture the information as a small grid. Each label should help a reader understand the value next to it.

What You Need to Know

They do not replace th and td. You still need meaningful header cells, and tfoot should contain valid tr rows.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<table>
    <caption>Weekly club times</caption>
    <thead>
        <tr>
            <th scope="col">Day</th>
            <th scope="col">Club</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Tuesday</th>
            <td>Photography</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">More activities are coming soon.</td>
        </tr>
    </tfoot>
</table>

Let’s Understand the Example

• Thead groups the rows used as the table header.
• Tbody groups the main data rows in a table.
• Scope explains which table row, column or group a th cell labels.
• Colspan makes a table cell stretch across several columns.

Look at a data cell and ask: “What row and column does this value belong to?” The header elements help answer that question, including for people who navigate the table with a screen reader.

What Should You See?

You should see a grid for “Weekly club times”, with headers such as “Day”, “Club”, “Tuesday”. The browser displays cells, but meaningful table markup also helps readers connect each cell to its labels.

Read the first data row aloud together with its column labels. If you cannot explain a value without pointing to its position on screen, strengthen the headers.

Try It Yourself

1. Add a second row to tbody and update the footer summary.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Putting text directly inside thead without wrapping it in tr and cells.
• Do not replace actual header cells with bold ordinary cells. Header markup is part of the meaning, not just the appearance.

Key Takeaways

• Thead groups header rows, tbody groups the main rows, and tfoot groups totals or other footer rows.
• Thead groups the rows used as the table header.
• They do not replace th and td. You still need meaningful header cells, and tfoot should contain valid tr rows.