HTML <tfoot> Tag

A styled <tfoot> tag.

<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>

A <tfoot> element with two rows that span all five 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>

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

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.

<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>

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, they allow you to create comprehensive HTML tables.

Here is a list of table tags

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

• Our HTML table Tag Reference
• Our HTML tbody Tag Reference
• Our HTML thead Tag Reference
• Our CSS Tables Tutorial