HTML <tfoot> Tag

HTML <tfoot> tag is used to group footer content in a table. It is typically used to contain summaries, totals, or other data that is repeated or relevant to the entire table. The <tfoot>  element, when used in combination with the <thead> and <tbody> tags, provides a structured way to format tables, improving readability and accessibility. It is positioned after the <thead> and before the <tbody> in the table structure, although it will appear at the bottom when rendered.

Syntax of the <tfoot> Tag

html
<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>

In this syntax, the <tfoot> tag contains footer rows that summarize or provide additional information about the table data.

Attributes of the <tfoot> Tag

The <tfoot> tag supports both global and event attributes. These attributes allow you to customize the appearance and behavior of the table footer.

AttributeDescription
Global AttributesThese include common HTML attributes like class,id,style,and lang.
Event AttributesThese allow for event handling, such as onclick, onmouseover, and onfocus.

Global Attributes

  • class: Assigns one or more class names to the <tfoot> for CSS styling.
  • id: Provides a unique identifier for the <tfoot>, useful for CSS or JavaScript.
  • style: Allows for inline CSS styling of the footer section.
  • lang: Specifies the language of the content inside the <tfoot> element.

Event Attributes

  • onclick: Executes JavaScript when the <tfoot> is clicked.
  • onmouseover: Executes JavaScript when the user hovers over the footer.

Examples of HTML <tfoot> Tag

Example 1: Basic Use of <tfoot> for Totals.

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</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Total</td>
                <td>$500</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Laptop</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Tablet</td>
                <td>$200</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

In this example, the <tfoot> tag is used to display the total price of products at the bottom of the table.

Example 2: Customizing the <tfoot> Using CSS.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Table Footer</title>
    <style>
        tfoot {
            background-color: #f2f2f2;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Item</th>
                <th>Cost</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Total</td>
                <td>$150</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Book</td>
                <td>$50</td>
            </tr>
            <tr>
                <td>Pen</td>
                <td>$100</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

This example demonstrates how to apply CSS styling to the <tfoot> to make it visually distinct, enhancing the table's appearance.

FAQs About HTML <tfoot> Tag

Q1: What is the purpose of the HTML <tfoot> tag?
A: The <tfoot> tag is used to group and define the footer section of a table, typically for displaying summaries, totals, or additional information related to the data.

Q2: Can the <tfoot> tag be used before the <tbody> in an HTML table?
A: Yes, in the HTML source code, the <tfoot> tag is placed before the <tbody> tag for better browser compatibility, though it will appear at the bottom of the table when rendered.

Q3: Does the <tfoot> tag improve accessibility?
A: Yes, the <tfoot> tag improves accessibility as it provides a structured way for screen readers to identify the footer content, enhancing user experience for those with disabilities.

Q4: Can the <tfoot> tag contain multiple rows?
A: Yes, the <tfoot> tag can contain multiple rows. You can add as many <tr> elements inside the <tfoot> as needed to display summary or footer information.

Q5: What is the difference between <tfoot> and <thead>?
A: The <thead> tag is used for the table's header, typically containing column names or titles, while the <tfoot> tag is used for the table's footer, containing summary information such as totals or averages.

tools

HTML

Related Articles