<tfoot> Tag in HTML | Defining Table Footer

The <tfoot> tag in HTML is used to define a footer section for a table. It typically contains summary information or totals for columns, and it appears at the bottom of the table. This tag is used along with <thead> (table header) and <tbody> (table body) to create a structured, accessible, and well-organized table.

Key Points on <tfoot> Tag:

• Table Footer: The <tfoot> tag is placed after <thead> and before <tbody> in HTML, although it displays at the bottom of the table.
• Footer Content: It is commonly used to display total values, summary information, or any relevant footer content for the table data.
• Accessibility: Using <tfoot> improves accessibility and helps screen readers interpret table structure more effectively.

Syntax of <tfoot> Tag:

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

Example of <tfoot> Tag in HTML:

This example demonstrates the use of the <tfoot> tag to define a footer in a table, displaying total values for the table data.

<table border="1">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>Total</td>
                    <td>$30</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Item 1</td>
                    <td>$10</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                    <td>$20</td>
                </tr>
            </tbody>
        </table>

Attributes of <tfoot> Tag:

• Global Attributes: The <tfoot> tag supports global attributes like class, id, style, and title.

Advantages of Using <tfoot> Tag:

• Improved Readability: Separates footer content from data rows, making tables easier to understand.
• Enhanced Styling: Allows separate styling for table footers, enhancing the overall design.
• Screen Reader Support: Enhances accessibility by providing semantic structure for screen readers.

The <tfoot> tag is a valuable addition to HTML tables, providing a clear way to organize footer content like totals or summary information, making tables more readable and accessible.