W3docs
en
Log in

HTML <tfoot> Tag

The <tfoot> tag defines the footer of the table. Is used together with the <thead> and <tbody> elements. See examples.

The <tfoot> tag defines the footer of an HTML table. It is used together with the <thead> and <tbody> elements, which define the header and the body of the table respectively.

The <tfoot> tag must be declared inside the <table> element, after the <caption> and <colgroup> (if any) elements. Note that <tfoot> must be placed before <tbody> in the source code, although browsers will always render it at the bottom of the table.

Danger

The <tfoot> tag must contain at least one <tr> tag.

Tip

The <thead> , <tbody> , and <tfoot> elements do not affect the layout of the table by default. Use CSS properties to customize the look of the table.

Syntax

The <tfoot> tag comes in pairs. The content is written between the opening ( <tfoot> ) and closing ( </tfoot> ) tags.

HTML <tfoot> Tag

<table>
  <thead> ... </thead>
  <tfoot>
    <tr>
      <td> ... </td>
    </tr>
  </tfoot>
  <tbody> ... </tbody>
</table>

Example of the HTML <tfoot> tag:

HTML <tfoot> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
  </head>
  <body>
    <table style="width: 400px; border-collapse: collapse;" border="1">
      <caption>
        FIFA World Cup 2018 Top Goalscorers
        <hr />
      </caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Country</th>
          <th>Goal</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th colspan="3">Harry Kane - the best player!</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Harry Kane</td>
          <td>England</td>
          <td>6</td>
        </tr>
        <tr>
          <td>Christiano Ronaldo</td>
          <td>Portugal</td>
          <td>4</td>
        </tr>
        <tr>
          <td>Neymar</td>
          <td>Brazil</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

<!-- Note: The border attribute is deprecated in HTML5. Use CSS for styling. -->

Result

tfoot example

The <tfoot> and other tags for summarizing table contents

The <tfoot> element defines a footer section for the table, typically containing summary or aggregate data. In the source code, it must appear before the <tbody> element, but browsers always render it at the bottom.

Use the <thead> , <tbody> , and <tfoot> elements to structure tables containing complex data sets. These elements help organize the table content. To enable independent scrolling of the body, apply CSS overflow properties.

Attributes

AttributeValueDescription
alignright, left, center, justify, charSets horizontal alignment of the content inside the <tfoot> element. This attribute is not supported by HTML5.
bgcolorbgcolorSets the background color of the rows inside the <tfoot> element. This attribute is not supported by HTML5.
charcharacterSpecifies the alignment of the content inside the <tfoot> element to a character. Is used only when the attribute align="char". This attribute is not supported by HTML5.
charoffnumberSpecifies the number of characters the content inside the <tfoot> element will be aligned from the character specified by the char attribute. Is used only when the attribute align="char". This attribute is not supported by HTML5.
valigntop, bottom, middle, baselineSpecifies a vertical alignment of the content inside the <tfoot> element. This attribute is not supported by HTML5.

Note: All attributes listed above are deprecated in HTML5. Use CSS for styling.

The <tfoot> tag also supports the Global Attributes and the Event Attributes.

How to style an HTML <tfoot> tag

tfoot {
  background-color: #f2f2f2;
  font-weight: bold;
}

Practice

Practice

What is the purpose of HTML tfoot tag and where is it usually placed in a table?