tfoot HTML Table Footer

The tfoot HTML element defines a HTML table footer, summarizing the columns of the table. It can be styled to be distinctive from the regular table cells.

<tfoot> Syntax

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>C</td>
      <td>D</td>
    </tr>
  </tfoot>
</table>

A	B
C	D

A 2×2 table with a footer row.

The table footer is wrapped by the <tfoot> opening and </tfoot> closing tag.
The <tfoot> tag must be the a child of a <table> element, after any <caption>, <colgroup>, <thead>, and <tbody> elements.
The <tfoot> tag contains <tr> table row element(s) with one or more <td> cells
Defining a footer is not mandatory for HTML tables.

tfoot Styles

By default the footer cells render the same as regular tbody cells but we can style them with CSS.

unstyled html table footer
HTML table with footer, rendered in Google Chrome, with the default browser CSS styles.

<table>
  <tbody>
    <tr>
      <td>Model 3</td>
      <td>$42,900</td>
      <td>272 mi</td>
    </tr>
    <tr>
      <td>Model Y</td>
      <td>$54,990</td>
      <td>330 mi</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Model</td>
      <td>Price</td>
      <td>Range</td>
    </tr>
  </tfoot>
</table>

Model 3	$42,900	272 mi
Model Y	$54,990	330 mi
Model	Price	Range

tfoot {
background: rgba(0,0,0,0.2);
font-weight: bold;
}

Table footer, styled with greyish background and bold text.

Table Footer Examples

1. HTML Table With Header, Body and Footer

A complete table with header, body and footer.

<table>
  <thead>
    <tr>
      <th>Head 1</th><th>Head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell A</td><td>Cell B</td>
    </tr>
    <tr>
      <td>Cell C</td><td>Cell D</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Foot 1</td><td>Foot 2</td>
    </tr>
  </tfoot>
</table>

Head 1	Head 2
Cell A	Cell B
Cell C	Cell D
Foot 1	Foot 2

2. Wrong Section Order

The header, body and footer will always show in the correct order, even if we scramble them.
The example below starts with the tbody, then tfoot and finally thead.

<table>
  <tbody>
    <tr>
      <td>Cell A</td><td>Cell B</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Foot 1</td><td>Foot 2</td>
    </tr>
  </tfoot>
  <thead>
    <tr>
      <th>Head 1</th><th>Head 2</th>
    </tr>
  </thead>
</table>

Head 1	Head 2
Cell A	Cell B
Foot 1	Foot 2

3. Multiple Table Footer Rows

In most cases there's only one footer row but it's allowed to have multiple rows, or nothing at all. We can even build the whole table from footer cells without a tbody.

<table>
  <tfoot>
    <tr>
      <td>foot1</td>
      <td>foot2</td>
    </tr>
    <tr>
      <td>foot3</td>
      <td>foot4</td>
    </tr>
  </tfoot>
</table>

foot1	foot2
foot3	foot4

An entire 2×2 table built with only footer cells.

4. Colspan Rowspan in Table Footer

We can merge HTML table footer cells with colspan, and when we have multiple footer rows we can use rowspan to extend cells to the bottom.

<table>
  <tbody>
    <tr>
      <td>Model 3</td>
      <td>$42,900</td>
      <td>272</td><td>438</td>
    </tr>
    <tr>
      <td>Model Y</td>
      <td>$54,990</td>
      <td>330</td><td>531</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td rowspan="2">Model</td>
      <td rowspan="2">Price</td>
      <td colspan="2">Range</td>
    </tr>
    <tr>
      <td>mi</td><td>km</td>
    </tr>
  </tfoot>
</table>

Model 3	$42,900	272	438
Model Y	$54,990	330	531
Model	Price	Range
Model	Price	mi	km

5. Nested Table in Footer

We can add multiple inline and block elements inside a footer cell, even a whole table, if necessary.

<table>
  <tbody>
    <tr>
      <td>Model 3</td>
      <td>$42,900</td>
      <td>272, 438</td>
    </tr>
    <tr>
      <td>Model Y</td>
      <td>$54,990</td>
      <td>330, 531</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Model</td>
      <td>Price</td>
      <td>
        <table>
          <tbody>
            <tr>
              <td colspan="2">Range</td>
            </tr>
            <tr>
              <td>mi</td><td>km</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tfoot>
</table>

Model 3

$42,900

272, 438

Model Y

$54,990

330, 531

Model

Price

Range
mi	km

tfoot HTML Attributes

HTML footer allows to have global attributes, like class, onliclick, data-*, etc.

Watch out for the deprecated attributes listed below and make sure to replace them while migrating content from a HTML4 website: align, bgcolor, char, charoff, valign.

Table Footer in Div Tables

We can assign a separate classname for div table footers (.tableFootStyle) and style them differently.
Learn more about div tables here.

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">AA</div>
      <div class="divTableCell">BB</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">CC</div>
      <div class="divTableCell">DD</div>
    </div>
  </div>
  <div class="divTableFoot tableFootStyle">
    <div class="divTableRow">
      <div class="divTableCell">Foot 1</div>
      <div class="divTableCell">Foot 2</div>
    </div>
  </div>
</div>

Foot 1

Foot 2

.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableRow {
display: table-row;
}
.divTableCell {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}

Generate HTML Tables with Footer

Activate the "Footer" checkbox if you need the table generator to add an extra row for table footer. The length of the footer will match the length of the table body, having the same amount of cells per row.