HTML tfoot Tag

HTML<tfoot>Tag: The HTML<tfoot>tag groups the 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). And the browsers can use these elements to enable scrolling of the table body independently of the header and footer.

HTML<tfoot>Tag

And 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. This HTML tfoot tag supports both the global and the event attributes.

Syntax: <tfoot> Text </tfoot>

Browser compatibility

The HTML tfoot tag is supported by Chrome, Firefox, Opera, Safari and Internet explorer.

Example:

<!DOCTYPE html>
<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>Programming Languages Text</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>C</td>
      <td>$80</td>
    </tr>
  </tbody  
</table>
</body>
</html>

Output:

html tfoot tag

Attributes that are supported by the <tfoot> tag

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