HTML <tfoot> Tag

The HTML <tfoot> tag is used to group footer content in an HTML table. Typically, it contains summary or aggregate information like totals or other concluding data related to the table’s content. The <tfoot> tag is placed inside a <table> element and is used in conjunction with the <thead> (table header) and <tbody> (table body) tags to create well-structured tables.

When browsers render tables, the <tfoot> content is displayed after the <tbody>, but it is defined before the <tbody> in the HTML markup for semantic and organizational purposes.

Basic Syntax of HTML <tfoot> Tag

The basic structure of a table with the <tfoot> tag is:

</>
Copy
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

The <tfoot> contains rows (<tr>) and cells (<td> or <th>) similar to the other table sections.

Example of a Table Using the <tfoot> Tag

Here’s an example of a table summarizing sales data with a footer for total sales:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Sales Report</h2>
        <table border="1">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="2">Total</td>
                    <td>$3000</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Laptop</td>
                    <td>10</td>
                    <td>$2000</td>
                </tr>
                <tr>
                    <td>Phone</td>
                    <td>5</td>
                    <td>$1000</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
Example of a Table Using the <tfoot> Tag

Explanation: The footer row in <tfoot> summarizes the table data, providing the total sales amount.

Styling the <tfoot> Tag with CSS

The <tfoot> tag can be styled independently to differentiate it from the table header and body:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: center;
            }
            thead th {
                background-color: #f4f4f4;
                font-weight: bold;
            }
            tfoot td {
                background-color: #f9f9f9;
                font-weight: bold;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Table Footer</h2>
        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="2">Total</td>
                    <td>$3000</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Laptop</td>
                    <td>10</td>
                    <td>$2000</td>
                </tr>
                <tr>
                    <td>Phone</td>
                    <td>5</td>
                    <td>$1000</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
Styling the <tfoot> Tag with CSS

Result: The footer is highlighted with a light background and bold text to distinguish it from the table’s body.

Practical Applications of the <tfoot> Tag

  • Summary Rows: Use <tfoot> to display totals, averages, or other summary data for a table.
  • Footer Styling: Apply distinct styles to footer content for improved readability.
  • Accessibility: Enhance table semantics and improve screen reader compatibility by grouping footer rows.
  • Dynamic Tables: Populate the footer dynamically using JavaScript for data-driven applications.