HTML <tfoot> tag

Definition and Usage

<tfoot> tag is used to group footer content in HTML tables.

<tfoot> elements with <thead> and <tbody> elements combined to specify each part of the table (footer, header, body).

Browsers can use these elements to make the header and footer independent when scrolling the table body. Moreover, when printing large tables spanning multiple pages, these elements can make the header and footer print at the top and bottom of each page.

Note: The <tfoot> element must contain one or more <tr> tag.

<tfoot> The tag must be used in the following context: as a <table> child elements of the element, in any <caption>,<colgroup>,<thead> and <tbody> after the element.

Tip:By default, <thead>, <tbody>, and <tfoot> Elements do not affect the table layout. However, you can use CSS to set the styles of these elements (see the examples below)!

Instance

Example 1

HTML table containing <thead>, <tbody>, and <tfoot> elements:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try It Yourself

Example 2

Use CSS to set the styles of <thead>, <tbody>, and <tfoot>:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try It Yourself

Example 3

How to align <tfoot> Content within (using CSS):

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try It Yourself

Example 4

How to vertically align <tfoot> Content within (using CSS):

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try It Yourself

Global Attributes

<tfoot> The tag also supports Global Attributes in HTML.

event attributes

<tfoot> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <tfoot> Element:

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support