HTML <tfoot> Tag


Example

An HTML table with a <thead>, <tfoot>, and a <tbody> element:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Try it Yourself »

Definition and Usage

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

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

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

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


Browser Support

Element
<tfoot> Yes Yes Yes Yes Yes


Tips and Notes

Note: The <tfoot> element must have one or more <tr> tags inside.

Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.


Differences Between HTML 4.01 and HTML5

None of the HTML 4.01 attributes are supported in HTML5.


Attributes

Attribute Value Description
align right
left
center
justify
char
Not supported in HTML5.
Aligns the content inside the <tfoot> element
char character Not supported in HTML5.
Aligns the content inside the <tfoot> element to a character
charoff number Not supported in HTML5.
Sets the number of characters the content inside the <tfoot> element will be aligned from the character specified by the char attribute
valign top
middle
bottom
baseline
Not supported in HTML5.
Vertical aligns the content inside the <tfoot> element


Global Attributes

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


Event Attributes

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


Default CSS Settings

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

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



Color Picker

colorpicker