How to Group Footer Content in Table Form using HTML?

Last Updated : 19 Jun, 2024

To group footer content in a table using HTML, use the <tfoot> tag. This tag works with <thead> and <tbody> to define a table's structure. The <tfoot> tag is a child of the <table> element and a parent to <tr> and <td>, ensuring organized and semantically meaningful table footers.

Syntax:

<tfoot> Table footer contents... </tfoot>

Example: The example below shows how to group footer content in the form of a table using HTML.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Footer</title>
    <style>
        tfoot {
            color: blue;
        }

        table,
        tbody,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <center>

        <h2>
            The footer content
            in a table using HTML
        </h2>

        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th> Id</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Mukesh</td>
                    <td>Shivam_b</td>
                </tr>
                <tr>
                    <td>Shashank</td>
                    <td>@shashankla</td>
                </tr>
                <tr>
                    <td>Rahman</td>
                    <td>@rahamD</td>
                </tr>
            </tbody>

            <!-- tfoot tag starts from here -->
            <tfoot>
                <tr>
                    <td>Total user</td>
                    <td>4</td>
                </tr>
            </tfoot>
            <!-- tfoot tag ends here -->

        </table>
    </center>
</body>

</html>

Output:

Example 2: The example below shows how to group footer content in form of table using HTML.

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 Footer Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        h2 {
            text-align: center;
        }

        th,
        td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }

        thead {
            background-color: #f2f2f2;
        }

        tfoot {
            background-color: #e0e0e0;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h2>Table with Footer Example</h2>
    <table>
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Item 1</td>
                <td>10</td>
                <td>2</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Item 2</td>
                <td>15</td>
                <td>1</td>
                <td>15</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total</td>
                <td>35</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

Output:

How to group header content of a table using HTML5 ?

manaschhabra2

Improve

Article Tags :

How to Group Footer Content in Table Form using HTML?

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?