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.

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 1Head 2
Cell ACell B
Cell CCell D
Foot 1Foot 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 1Head 2
Cell ACell B
Foot 1Foot 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 272438
Model Y $54,990 330531
Model Price Range
mikm

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>
AA
BB
CC
DD
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.

2 × 2

Table

Style Name
Georgia
Georgia
Palatino
Times New Roman
Arial
Arial Black
Comic Sans
Impact
Lucida Sans
Tahoma
Trebuchet
Verdana
Courier
Lucida Console
Left Center Right
px
px

Body

Left Center Right

HTML
Preview Apply »
HTML Copy
CSS « Apply