`<tfoot>` Table foot

Q: Where should tfoot go in an HTML table?

At the end. In current HTML, <tfoot> follows <tbody> and any rows. HTML 4 required it before tbody, and browsers still render that order correctly, but the Living Standard only allows tfoot after the body rows. Browsers show it at the bottom in both cases.

Holds summary rows such as totals at the foot of a table.

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

<tfoot> wraps the rows that summarize columns: totals, averages and the like. It always displays at the bottom of the table.

Current HTML puts it after the tbody. Print a long table and browsers can repeat the footer on every page. Notes that are not part of the data do not belong here; put them in a caption or a paragraph.

The tfoot element in the WHATWG standard (opens in a new tab) allows it after the tbody elements. The header group is covered on the thead element page.

Syntax

<table>
  <tbody>
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Summary</td>
    </tr>
  </tfoot>
</table>

When to use it

<tfoot> is for rows calculated from the columns above them. Think of an invoice total, a monthly average, a head count of attendees or the hours added up at the bottom of a timesheet. As a footer they can get their own look, say a top border and bold text, and the browser knows they summarise the whole table instead of one group of rows.

A last row is not automatically a footer. When it is one more entry, it stays in the tbody. Source notes and abbreviation explanations go in the caption or a paragraph under the table; squeezed into a footer row, they have to follow the column grid and get awkward to read.

HTML does no arithmetic. A tfoot total is text you typed, and it will not change when someone edits a row in the body. If the page changes often, have the server or a script calculate the total so the numbers always agree.

Live example

Edit the code and watch the preview.

<table>
  <tbody>
    <tr><td>Tea</td><td>$2</td></tr>
    <tr><td>Cake</td><td>$4</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>$6</td></tr>
  </tfoot>
</table>

More examples

Timesheet with total and average

Footers can have several rows. This one adds up the hours on the first row and gives the daily average on the second. The labels are header cells with scope="row", so a screen reader announces each number along with what it means.

<table>
  <caption>Hours worked</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Hours</th></tr>
  </thead>
  <tbody>
    <tr><td>Monday</td><td>7</td></tr>
    <tr><td>Tuesday</td><td>8</td></tr>
    <tr><td>Wednesday</td><td>6</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>21</td></tr>
    <tr><th scope="row">Average</th><td>7</td></tr>
  </tfoot>
</table>

Invoice footer with colspan

The invoice has three columns, yet each footer label has only one value next to it. Giving the label cells colspan="2" pushes subtotal, tax and total into line under the price column.

<table>
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Qty</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Notebook</td><td>2</td><td>$6.00</td></tr>
    <tr><td>Pen</td><td>5</td><td>$4.00</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row" colspan="2">Subtotal</th><td>$10.00</td></tr>
    <tr><th scope="row" colspan="2">Tax (20%)</th><td>$2.00</td></tr>
    <tr><th scope="row" colspan="2">Total</th><td>$12.00</td></tr>
  </tfoot>
</table>

Tip: Totals and summaries go in tfoot.

Browser support

All browsers support tfoot. The HTML Living Standard defines it and puts it after the tbody elements. In older HTML 4 code you will often find tfoot before tbody; browsers still draw it at the bottom, though today's standard wants it last. Repeating the footer on printed pages depends on the browser.

Accessibility

Label each total with a th inside tfoot, such as Total, so screen reader users know what the footer value means. The W3C note Understanding Info and Relationships (opens in a new tab) explains the reasoning.

Common mistakes

Wrong

<tfoot>
  <tr><td>Total</td><td>45</td></tr>
</tfoot>

Right

<tfoot>
  <tr><th scope="row">Total</th><td>45</td></tr>
</tfoot>

Total labels the row, which makes it a th with scope="row".

Frequently asked questions

Where should tfoot go in an HTML table?

At the end. In current HTML, <tfoot> follows <tbody> and any rows. HTML 4 required it before tbody, and browsers still render that order correctly, but the Living Standard only allows tfoot after the body rows. Browsers show it at the bottom in both cases.

What should I put in tfoot?

Summary information about the columns: totals, averages or notes. A Total row on an invoice is the classic example. Mark the row label with <th scope="row"> so screen readers read Total together with the value. Each table can have only one tfoot.

Related tables elements

<table>Tabular data laid out in rows and columns.<caption>A table's title, written as the table's first child.<colgroup>Groups table columns so you can style them as one.<col>Stands for one or more columns in a colgroup, for styling.<thead>Wraps the header row or rows of a table.<tbody>Wraps the main rows of data in a table.<tr>A single table row of cells.<th>Header cell for a column or row, shown bold and centered by default.<td>A normal data cell inside a table row.

<tfoot> Table foot