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>