Tfoot HTML

HTML <tfoot> Tag

To define a group of rows as the footer of an HTML table, the HTML <tfoot> tag is used. It is used as a child of the <table> element along with the <tbody> and <thead> tags. The HTML <tfoot> tag, however, does not affect the layout of the table but is used for providing semantic information. One or more <tr> elements must be placed within a <tfoot> tag.

Syntax:

<tfoot>
<tr></tr>
<tr></tr>
</tfoot>

Example:

<!DOCTYPE html>
<html>
<head>
<style>
thead {background-color:lightgray;}
tbody {background-color:pink;}
tfoot {background-color:wheat;}
table, th, td {
  border: 2px solid brown;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
    <th>NAME</th>
    <th>AGE</th> 
    </tr>
  </thead>
  <tbody>
    <tr>
    <td>Tom</td>
    <td>20</td>
    </tr>
    <tr>
    <td>Jerry</td>
    <td>10</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Average</td>
      <td>15</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

Explanation:

In the above example, we have displayed the use of the HTML <tfoot> tag along with the other HTML table tags. We thus defined the footer in the above table.

Tag specific Attributes:

Attribute	Value	Uses	HTML 5
align	right left center justify char	Used to define the content alignment inside the <tfoot> element.	Not Supported in HTML5.
char	character	Used to define the content alignment of the <tfoot> tag to the character.	Not Supported in HTML5.
charoff	Number	Used to define the number of characters the <tfoot> content will be aligned from the character specified by the char attribute.	Not Supported in HTML5.
valign	top middle bottom baseline	Used to define the vertical content alignment inside the <tfoot> element.	Not Supported in HTML5.

Global Attributes:

The HTML Global attributes are supported by the HTML <tfoot> tag.

Event Attributes:

The HTML Event attributes are supported by the HTML <tfoot> tag.

Supporting Browser:

Chrome, IE, Firefox, Opera, and Safari.