HTML Tags

HTML <tfoot> Tag

The <tfoot> tag in HTML defines the footer section of a table.
It is used to group rows that summarize or provide totals, notes, or other information related to the table data.
Typically, <tfoot> appears after <thead> and before <tbody> in the HTML source, though browsers visually render it at the bottom of the table.

Syntax

html

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Footer Content</td>
    </tr>
  </tfoot>
</table>

Attributes

Attribute	Description
(None)	The `<tfoot>` element has no specific attributes. You may use global attributes such as id, class, or style.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tfoot Tag Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 70%;
      margin: 20px auto;
      text-align: center;
    }
    thead {
      background-color: #29AB87;
      color: white;
    }
    tfoot {
      background-color: #e0f3ec;
      font-weight: bold;
      color: #333;
    }
    th, td {
      border: 1px solid #555;
      padding: 10px;
    }
    tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>

  <h2>HTML Table with Tfoot Example</h2>

  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Price (₹)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Notebook</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Pencil</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Eraser</td>
        <td>5</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Total</td>
        <td>₹65</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

Output

Browser Output

html

Displays a table with a footer row showing the total amount.
Even though the <tfoot> tag appears before <tbody> in the HTML source, browsers render it below the table body visually.
Please use our TryIt editor to view this behavior in action.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

All major browsers, including IE9+, support the <tfoot> tag completely.

Notes

The <tfoot> section is optional but recommended for large tables with totals or summary data.
In HTML source order, <tfoot> is placed before <tbody> for faster page rendering when tables are loaded.
Use CSS to style the footer differently from other table sections.
<tfoot> improves data comprehension and accessibility, especially in screen readers.

Conclusion

The <tfoot> tag defines the footer of a table, providing space for totals, summaries, or concluding remarks.
It helps organize table data more clearly while maintaining semantic meaning and consistent presentation.

PreviousHTML <tbody> Tag NextHTML <tr> Tag