HTML <tfoot> tag

Definition and Usage

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

<tfoot> The element in conjunction with <thead> and <tbody> Elements used together to specify each part of the table (footer, header, body).

Browsers can use these elements to make the header and footer visible independently when scrolling through the table body. Additionally, when printing large tables that span multiple pages, these elements can ensure that the table header and footer are printed 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 align vertically <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