What is the <tfoot> tag in HTML?

Introduction to the <tfoot> tag

When creating tables in HTML, structuring your data properly is essential for ensuring good readability and optimal accessibility. The <tfoot> tag plays a fundamental role in this organization by defining the table footer, which is the section that typically contains totals, summaries, or recap information for your tabular data.

Understanding and mastering the use of <tfoot> is essential for any web developer who wants to create professional and accessible tables. If you want to deepen your HTML knowledge and master all the subtleties of tables, our comprehensive HTML course will guide you step by step through this learning journey.

Definition and syntax of <tfoot>

What is <tfoot>?

The <tfoot> tag (table footer) is an HTML element that defines a group of rows constituting the footer of a table. It is used in conjunction with the <table> tag to delimit the bottom section of a table, typically intended for totals, averages, or other summary information.

This tag is a block-level element that can only contain <tr> (table row) elements. It allows browsers and assistive technologies to understand the logical structure of the table and treat footer data differently from the table body.

Basic syntax

The syntax of <tfoot> is straightforward and integrates naturally into an HTML table structure:

<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>Total</td>
      <td>Result</td>
    </tr>
  </tfoot>
</table>

Key characteristics

Here are the essential characteristics of the <tfoot> tag:

• Required parent element: must be placed inside a <table> tag
• Permitted content: only <tr> elements
• Uniqueness: only one <tfoot> per table
• Flexible position: can be placed before or afterin the source code
• Display: always rendered at the bottom of the table visually

Practical examples of <tfoot>

Simple example: grades table

Let's start with a basic example representing a grades table for learners on the Believemy platform:

<table>
  <thead>
    <tr>
      <th>Learner</th>
      <th>Course</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Marie Dupont</td>
      <td>HTML Fundamentals</td>
      <td>18/20</td>
    </tr>
    <tr>
      <td>Pierre Martin</td>
      <td>HTML Fundamentals</td>
      <td>16/20</td>
    </tr>
    <tr>
      <td>Sophie Bernard</td>
      <td>HTML Fundamentals</td>
      <td>19/20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Class average</td>
      <td>17.67/20</td>
    </tr>
  </tfoot>
</table>

In this example, the <tfoot> contains the overall grade average. The colspan="2" attribute merges the first two cells for a cleaner presentation.

Advanced example: financial table

Here's a more complex example representing a financial report with multiple rows in the table footer:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Revenue</th>
      <th>Expenses</th>
      <th>Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$15,000</td>
      <td>$8,000</td>
      <td>$7,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$18,500</td>
      <td>$9,200</td>
      <td>$9,300</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$22,000</td>
      <td>$10,500</td>
      <td>$11,500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Q1 Total</th>
      <td>$55,500</td>
      <td>$27,700</td>
      <td>$27,800</td>
    </tr>
    <tr>
      <th>Average</th>
      <td>$18,500</td>
      <td>$9,233</td>
      <td>$9,267</td>
    </tr>
  </tfoot>
</table>

Note the use of <th> in the <tfoot> for row header cells, which improves the table's semantics and accessibility.

Example with CSS styling

The <tfoot> can be easily styled to visually stand out from the rest of the table:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }
  
  thead {
    background-color: #4a90d9;
    color: white;
  }
  
  tbody tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  
  tfoot {
    background-color: #2c3e50;
    color: white;
    font-weight: bold;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Course</th>
      <th>Enrolled</th>
      <th>Completed</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML Fundamentals</td>
      <td>1,250</td>
      <td>892</td>
    </tr>
    <tr>
      <td>Advanced CSS</td>
      <td>980</td>
      <td>654</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>2,230</td>
      <td>1,546</td>
    </tr>
  </tfoot>
</table>

This approach creates a clear visual distinction between the different table sections, improving readability for your users.

Position of <tfoot> in source code

Historical vs modern order

Historically, the HTML specification recommended placing <tfoot> before <tbody> in the source code. This recommendation allowed browsers to render the table footer before loading all the body data, which was useful for very long tables.

<!-- Historical order (HTML 4) -->
<table>
  <thead>...</thead>
  <tfoot>...</tfoot>
  <tbody>...</tbody>
</table>

<!-- Modern recommended order (HTML5) -->
<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>

We recommend using the modern order (tfoot after tbody) as it is more readable and matches the table's visual logic.

Best practices for usage

Accessibility and semantics

Correct use of <tfoot> significantly contributes to your tables' accessibility:

• Screen readers: assistive technologies can identify and announce the table footer, allowing users to navigate directly to summaries
• Semantic structure: clearly distinguishing data from summaries improves content comprehension
• Keyboard navigation: facilitates navigation in complex tables

For optimal accessibility, combine <tfoot> with other attributes like scope on header cells:

<tfoot>
  <tr>
    <th scope="row">Grand total</th>
    <td>1,500</td>
    <td>2,300</td>
  </tr>
</tfoot>

When to use <tfoot>?

Use <tfoot> when your table requires:

• Totals or subtotals
• Averages or summary statistics
• Table footnotes
• Pagination information
• Legends or data explanations

Printing and multi-page tables

A lesser-known advantage of <tfoot> relates to printing. When a table spans multiple printed pages, browsers can automatically repeat the <tfoot> content at the bottom of each page, just as <thead> is repeated at the top.

To enable this behavior, you can use the following CSS properties:

thead, tfoot {
  display: table-header-group; /* for thead */
  display: table-footer-group; /* for tfoot */
}

@media print {
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
}

Common mistakes to avoid

Forgetting the complete structure

A common mistake is using <tfoot> without the other structural elements:

<!-- ❌ Avoid -->
<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
    </tr>
  </tfoot>
</table>

<!-- ✅ Correct -->
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
    </tr>
  </tfoot>
</table>

Placing unauthorized content

The <tfoot> can only contain <tr> elements. Placing <td> elements or text directly inside is invalid:

<!-- ❌ Invalid -->
<tfoot>
  <td>Total</td>
</tfoot>

<!-- ❌ Invalid -->
<tfoot>
  Direct text
</tfoot>

<!-- ✅ Correct -->
<tfoot>
  <tr>
    <td>Total</td>
  </tr>
</tfoot>

Using multiple <tfoot> elements

A table can only have one <tfoot> element. If you need multiple footer rows, place them all within the same <tfoot>:

<!-- ❌ Invalid -->
<table>
  <tbody>...</tbody>
  <tfoot>
    <tr><td>Subtotal</td></tr>
  </tfoot>
  <tfoot>
    <tr><td>Total</td></tr>
  </tfoot>
</table>

<!-- ✅ Correct -->
<table>
  <tbody>...</tbody>
  <tfoot>
    <tr><td>Subtotal</td></tr>
    <tr><td>Total</td></tr>
  </tfoot>
</table>

Available attributes

The <tfoot> tag accepts all global HTML attributes. Here are the most commonly used ones:

Browser compatibility

The <tfoot> tag enjoys excellent compatibility with all modern and older browsers:

You can use <tfoot> with confidence in your projects, even those that need to support older browsers.

Frequently asked questions about <tfoot>

The main difference is semantic. A <tfoot> tag explicitly tells browsers and assistive technologies that the rows it contains represent a table footer (totals, summaries). This improves accessibility, enables automatic repetition when printing, and facilitates CSS targeting. A simple <tr> row provides none of this contextual information.

Exactly! A table can contain multiple elements to logically group different data sections, but it can only have one <tfoot> and one . This structure allows you to create complex tables while maintaining a clear hierarchy between header, body, and footer.

No, <tfoot> is optional. You should only use it when your table actually needs a footer section with totals, averages, or summary information. For simple tables without summaries, you can stick with and , or even just <tr> rows directly inside .

To master HTML and all its subtleties, including creating accessible and semantically correct tables, we recommend our course to master HTML. You will learn step by step all the essential tags and best practices for modern web development.