Table of contents

HTML <tfoot> Tag

What is HTML <tfoot> Tag?

The HTML tfoot tag is used to group all footer content of a table. It defines the footer section that usually contains summary data, totals, or notes related to the table content.

This tag helps organize table structure, making it more readable and accessible. The tfoot tag is placed after the table header (thead) and before the table body (tbody) in the HTML document structure. It ensures consistent formatting and alignment of footer data across browsers.

Syntax of HTML <tfoot> Tag

plaintext
<tfoot>
  <tr>
    <td>Footer Content</td>
  </tr>
</tfoot>

The tfoot tag should always be placed inside the table tag and contain one or more tr (table row) elements. Each tr element may contain td (table data) or th (table header) elements.

Examples of HTML <tfoot> Tag

Example 1: Basic HTML tfoot Tag

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

  <table border="1">
    <thead>
      <tr>
        <th>Item</th>
        <th>Price</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Laptop</td>
        <td>$800</td>
      </tr>
      <tr>
        <td>Mouse</td>
        <td>$20</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>Total</td>
        <td>$820</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

In this example, the tfoot tag is used to display the total cost of items in a table. It provides a clean separation between data and summary information.

Example 2: SEO-Friendly tfoot Tag Example

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

  <table border="1">
    <thead>
      <tr>
        <th>Course</th>
        <th>Fees</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Web Development</td>
        <td>$500</td>
      </tr>
      <tr>
        <td>Graphic Design</td>
        <td>$400</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>Total Fees (Scholar247)</td>
        <td>$900</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

This SEO-friendly example uses the tfoot tag to summarize course fees for Scholar247. It improves user understanding and maintains table structure for both accessibility and SEO benefits.

Attributes of HTML <tfoot> Tag

The HTML tfoot tag does not have any unique attributes. It supports only global HTML attributes such as:

• id – Assigns a unique identifier.
• class – Adds a class name for CSS styling.
• style – Defines inline CSS styles.
• title – Adds additional information as a tooltip.

Best Practices for HTML <tfoot> Tag

 Always place the tfoot tag after the thead and before the tbody for better structure and browser rendering.
• Use the tfoot tag for totals, summary data, or closing remarks only.
• Keep formatting consistent with thead and tbody for visual balance.
• Add appropriate CSS styling to make the footer visually distinct.
• Avoid using the tfoot tag for unrelated or non-tabular data.

FAQs About the HTML <tfoot> Tag

Q1: What is the purpose of the HTML tfoot tag?

The tfoot tag is used to define the footer section of a table, usually containing totals, summaries, or notes related to the table data.

Q2: Where should the tfoot tag be placed in an HTML table?

It should be placed after the thead tag and before the tbody tag to maintain proper structure and browser compatibility.

Q3: Can I use multiple tfoot tags in a single table?

No, only one tfoot tag is allowed per table as it represents the overall footer section.

Q4: Does the tfoot tag support any specific attributes?

The tfoot tag has no unique attributes but can use global attributes like id, class, and style for styling and identification.

Q5: Why is the tfoot tag important for SEO and accessibility?

It improves table readability, ensures structured data for search engines, and enhances screen reader accessibility by clearly defining the footer content of the table.

HTML

Related Articles