1. Introduction

Goal of the tutorial

This tutorial aims to equip you with the skills to use table headers and footers effectively in HTML. It will provide a clear understanding of how to use the <thead>, <th>, and <tfoot> elements.

What you will learn

• The purpose of table headers and footers.
• How to create table headers using the <thead> and <th> elements.
• How to create table footers with the <tfoot> element.
• Best practices for using these elements.

Prerequisites

Basic knowledge of HTML is required. Familiarity with HTML tables would be beneficial but not necessary as this tutorial will cover everything from the ground up.

2. Step-by-Step Guide

In HTML, tables are a way to present data in rows and columns. Headers (<thead> and <th>) provide labels for the columns, while footers (<tfoot>) can be used to summarize data or add additional information.

<thead> and <th>

The <thead> element is used to group the header content in an HTML table. The <th> element defines a header cell in a table. It makes the text bold and center-aligned by default.

<tfoot>

The <tfoot> element is used to group the footer content in an HTML table. It goes always after any <tbody> and <tr> elements, but before the <thead> and <tr> elements.

3. Code Examples

Example 1: Basic table with headers

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>1234567890</td>
        </tr>
    </tbody>
</table>

In this example, the <thead> element is used to create a header row for the table. Each <th> element within the <thead> produces a header cell.

Example 2: Basic table with headers and footer

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>1234567890</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total Records: 1</td>
        </tr>
    </tfoot>
</table>

In this example, the <tfoot> element is used to create a footer row for the table. It summarizes the number of records in the table.

4. Summary

In this tutorial, you learned how to create table headers using the <thead> and <th> elements, and how to create a table footer with the <tfoot> element.

Continue practicing to get more familiar with these elements. Try to incorporate headers and footers in your future tables to make them more readable and structured.

For more information on HTML tables, check out the official HTML tables documentation.

5. Practice Exercises

Exercise 1: Basic table with headers

Create a table with headers for "Product", "Quantity", and "Price".

Exercise 2: Basic table with headers and footer

Add a footer to the table from Exercise 1, summarizing the "Total Price".

Solutions

1. Here is the solution for Exercise 1.

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apples</td>
            <td>5</td>
            <td>$5</td>
        </tr>
    </tbody>
</table>

1. Here is the solution for Exercise 2.

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apples</td>
            <td>5</td>
            <td>$5</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total Price: $5</td>
        </tr>
    </tfoot>
</table>

Remember, practicing is key to mastering any concept. Keep trying different table structures to get a good grasp of these concepts.