REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<tfoot>

AI & DATA SCIENCE // tfoot-tag

The <tfoot> element groups footer row(s) of a table, typically used for summaries, totals, or averages of the data above.

Syntax

<table>
  <tbody>...</tbody>
  <tfoot>
    <tr><td>Total</td><td>$100</td></tr>
  </tfoot>
</table>

Deep Dive Course

**`<tfoot>`** wraps summary rows — totals, subtotals, averages — that relate to the data in `<tbody>` above it. Interestingly, in the HTML source you can actually place `<tfoot>` BEFORE `<tbody>` (right after `<thead>`), and browsers will still render it visually at the bottom of the table; this ordering flexibility exists so a browser can render/print the summary footer without needing to first process the entire (potentially huge) body of data.

1Understanding <tfoot>

`<tfoot>` wraps summary rows — totals, subtotals, averages — that relate to the data in <tbody> above it. Interestingly, in the HTML source you can actually place <tfoot> BEFORE <tbody> (right after <thead>), and browsers will still render it visually at the bottom of the table; this ordering flexibility exists so a browser can render/print the summary footer without needing to first process the entire (potentially huge) body of data.

💡

Like <thead>, browsers can repeat <tfoot> content at the bottom of each printed page for a long table, giving the reader a running summary alongside the header on every page.

editor.html

<table>
  <thead><tr><th>Item</th><th>Price</th></tr></thead>
  <tbody>
    <tr><td>Book</td><td>$12</td></tr>
    <tr><td>Pen</td><td>$2</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$14</td></tr>
  </tfoot>
</table>

localhost:3000

2Practical Example

Here is a real-world application of <tfoot> showing how it is used in production HTML.

editor.html

<!-- tfoot placed early in the source, still renders at the bottom -->
<table>
  <thead><tr><th>Item</th><th>Price</th></tr></thead>
  <tfoot><tr><td>Total</td><td>$14</td></tr></tfoot>
  <tbody>
    <tr><td>Book</td><td>$12</td></tr>
    <tr><td>Pen</td><td>$2</td></tr>
  </tbody>
</table>

localhost:3000

3Best Practices

Follow these guidelines when working with <tfoot>:

1. Use <tfoot> for totals, subtotals, or summary rows, not regular data

2. Feel free to place <tfoot> in the source right after <thead> if that better fits how your data is generated — it still renders at the bottom

3. Style <tfoot> distinctly (e.g. bold, top border) to visually separate it from the data above

⚠️

Tip: Like <thead>, browsers can repeat <tfoot> content at the bottom of each printed page for a long table, giving the reader a running summary alongside the header on every page.

editor.html

<table>
  <thead><tr><th>Item</th><th>Price</th></tr></thead>
  <tbody>
    <tr><td>Book</td><td>$12</td></tr>
    <tr><td>Pen</td><td>$2</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$14</td></tr>
  </tfoot>
</table>

localhost:3000

Examples

Example 01Basic Usage

<table>
  <thead><tr><th>Item</th><th>Price</th></tr></thead>
  <tbody>
    <tr><td>Book</td><td>$12</td></tr>
    <tr><td>Pen</td><td>$2</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$14</td></tr>
  </tfoot>
</table>

Example 02Advanced Example

<!-- tfoot placed early in the source, still renders at the bottom -->
<table>
  <thead><tr><th>Item</th><th>Price</th></tr></thead>
  <tfoot><tr><td>Total</td><td>$14</td></tr></tfoot>
  <tbody>
    <tr><td>Book</td><td>$12</td></tr>
    <tr><td>Pen</td><td>$2</td></tr>
  </tbody>
</table>

Best Practices

Use for totals, subtotals, or summary rows, not regular data
Feel free to place in the source right after if that better fits how your data is generated — it still renders at the bottom
Style distinctly (e.g. bold, top border) to visually separate it from the data above

Interview Question

Does the position of <tfoot> in the HTML source have to be after <tbody>?▼

Hint: Think about why a browser might want to know the footer content before processing a huge table body.

No — the HTML spec explicitly allows <tfoot> to appear either after <tbody> (the intuitive order) or right after <thead>, before <tbody>. Regardless of its source position, browsers always render it visually at the bottom of the table. This flexibility exists so that server-rendered pages (or streaming renderers) can output the summary footer immediately after the header, without waiting to first generate a potentially very large table body.

Exercises

EasyPractice using <tfoot> in a real scenario.

View Solution

<table>
  <thead><tr><th>Item</th><th>Price</th></tr></thead>
  <tbody>
    <tr><td>Book</td><td>$12</td></tr>
    <tr><td>Pen</td><td>$2</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$14</td></tr>
  </tfoot>
</table>

Frequently Asked Questions

Does the position of <tfoot> in the HTML source have to be after <tbody>?▼

No — the HTML spec explicitly allows to appear either after (the intuitive order) or right after , before . Regardless of its source position, browsers always render it visually at the bottom of the table. This flexibility exists so that server-rendered pages (or streaming renderers) can output the summary footer immediately after the header, without waiting to first generate a potentially very large table body.

Related Functions

thead-tagtbody-tag