HTML <tfoot> Tag

The <tfoot> tag contains the rows that make up the footer of the table. With this tag you can style all footer rows from a single place.

HTML Tag

Example

#

A styled <tfoot> tag.

First Name Last Name
Denice Hobermann
Paulo Cornell
Jane Hollander
Number of finalists: 3
<style>
  table.tb { width: 300px; border-collapse: collapse; }
  .tb th, .tb td { border: solid 1px #777; padding: 5px; }
  .tb tfoot { background-color:lightblue; }
</style>

<table class="tb">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Denice</td>
      <td>Hobermann</td>
    </tr>
    <tr>
      <td>Paulo</td>
      <td>Cornell</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Hollander</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Number of finalists: 3</td>
    </tr>
  </tfoot>
</table>
thead = table header
tbody = table body
tfoot = table footer

Using <tfoot>

Tables can be partitioned in 3 logical parts: <thead>, <tbody> and <tfoot>.

The <tfoot> tag creates a table footer at the end of a table.

<tfoot> is used to style all footer rows and columns as a group.


More Examples

A <tfoot> element with two rows that span all five columns.

First name Last name Email City Country
Jelle van Loenen jelle@loenen.org Arnhem Netherlands
Tim Hallman thall@aa.com Dallas USA
Jose Lopez lopez@argtech.ph Manila Philippines
This table has 3 data rows
This table has 5 columns
<style>
  table.tbl { width: 100%; border-collapse: collapse; }
  .tbl th, .tbl td { padding: 5px; border: solid 1px #777; }
  .tbl tfoot { background-color:cornsilk; }
</style>

<table class="tbl">
 <thead>
  <tr>
    <th>First name</th>
    <th>Last name</th>
    <th>Email</th>
    <th>City</th>
    <th>Country</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Jelle</td>
    <td>van Loenen</td>
    <td>jelle@loenen.org</td>
    <td>Arnhem</td>
    <td>Netherlands</td>
  </tr>
  <tr>
    <td>Tim</td>
    <td>Hallman</td>
    <td>thall@aa.com</td>
    <td>Dallas</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Jose</td>
    <td>Lopez</td>
    <td>lopez@argtech.ph</td>
    <td>Manila</td>
    <td>Philippines</td>
  </tr>
  </tbody>
  <tfoot>
   <tr>
    <td colspan="5">This table has 3 data rows</td>
   </tr>
   <tr>
    <td colspan="5">This table has 5 columns</td>
   </tr>
  </tfoot>
</table>

Attributes for <tfoot>

The <tfoot> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    identifier Defines a unique identifier for the tfoot.
class    classnames Sets one or more CSS classes to be applied to the tfoot.
style    CSS-styles Sets the style for the tfoot.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the tfoot is hidden.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attributes listed below.  They are no longer valid on tfoot in HTML5.

Attribute Description Alternative
align Aligns the content in the tfoot element. CSS text-align
bgcolor Defines the background color for the tfoot element. CSS background-color
char Aligns content to a character, for example "," or ".". CSS text-align
charoff Shifts column data to the right relative to char attribute. CSS text-align
valign Sets the vertical alignment of content in the tfoot element. CSS vertical-align

Did you know?

Did you know?

Display the number of rows in a table footer

JavaScript provides an easy way to display the total number of rows in a <tfoot> element.

A styled <tfoot> element with a row count.

First name Last name Email City Country
Jelle van Loenen jelle@loenen.org Arnhem Netherlands
Tim Hallman thall@aa.com Dallas USA
Jose Lopez lopez@argtech.ph Manila Philippines
Number of data rows: 0
<style>
  table.tabl { width: 100%; border-collapse: collapse; }
  .tabl th, .tabl td { border: solid 1px #777; padding: 5px; }
  .tabl tfoot { background-color:teal; color:white; }
</style>

<table id="mytable" class="tabl">

 <thead>
  <tr>
   <th>First name</th>
   <th>Last name</th>
   <th>Email</th>
   <th>City</th>
   <th>Country</th>
  </tr>
</thead>

<tbody>
  <tr>
   <td>Jelle</td>
   <td>van Loenen</td>
   <td>jelle@loenen.org</td>
   <td>Arnhem</td>
   <td>Netherlands</td>
  </tr>
  <tr>
   <td>Tim</td>
   <td>Hallman</td>
   <td>thall@aa.com</td>
   <td>Dallas</td>
   <td>USA</td>
  </tr>
  <tr>
   <td>Jose</td>
   <td>Lopez</td>
   <td>lopez@argtech.ph</td>
   <td>Manila</td>
   <td>Philippines</td>
  </tr>
 </tbody>

 <tfoot>
  <tr>
   <td colspan="5">Number of data rows: <span id="numRows">0</span></td>
  </tr>
 </tfoot>
 
</table>
  
<script>

  ( () => {

    let rowCount = document.getElementById('mytable').rows.length - 2;
    document.getElementById('numRows').innerHTML = rowCount;

  } )();

</script>

Note: The above JavaScript ensures the header and footer rows are not counted.


Table Tags

The <tfoot> tag is part of a group of tags that are used to create HTML tables. This group is referred to as the Table tag group. Together, these tags allow you to create comprehensive HTML tables.

Here is a list of table tags

Element Description
<table> Creates a table that contains elements listed below
<caption> Creates a caption above or under a table
<colgroup> Creates a container for col elements
<col> Creates a style for one or more columns in a table
<thead> Creates a table header that can style all header cells
<tbody> Creates a table body that can style all data cells
<tfoot> Creates table footer that can style all footer cells
<tr> Creates a table row that contains table cells
<th> Creates a table header cell
<td> Creates a table data cell

Browser support

Here is when <tfoot> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides