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