Tfoot Tag in HTML5
In this article I am going to describe about Tfoot Tag in HTML5.
Tfoot Tag in HTML5
<tfoot> tag is used to specify the group of footer content of the table body.For example, the footer can include a total of the numerical values in a column or some other column summary for non-numerical columns.
In the table we must have zero or more <tr> tag inside the <tfoot> tag. The <tfoot> tag is used in conjunction with <tbody>, <thead> in the <table> tag. Simply <tfoot> tag is used for adding afooter to the table.
The <tfoot> tag must have one or more <td> tag within <tr> tag which is nested in <tfoot>. The <tfoot> tag is the child of <table> tag and used after the <caption>, <colgroup>, <thead> tag and before the <tbody> tag. This tag must have opening and closing tags.
The <tfoot> tag comes before <tbody> tag because when the table is displayed on multiple pages, such as when printing web pages, the table footer will appear at the bottom of those rows of a table that fit on a page, before the rest of the body of the table has been rendered.
Browser Support
It is supported in all major browsers.
Syntax
The syntax of thead,tbody,tfoot tag is shown below
<body>
<table>
<thead>
<tr>
<th>......</th>
<th>.....</th>
</tr>
</thead>
<tbody>
<tr>
<td>....</td>
<td>....</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>....</td>
<td>....</td>
</tr>
</tfoot>
</table>
</body>
Attributes of <tfoot> tag in HTML5
None of the HTML 4.01 attributes (such as align, char, charoff, valign) are supported in HTML5.
Example of <tfoot> tag in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Tfoot Tag in HTML5</title>
<style type="text/css">
thead
{
color: green;
}
tbody
{
color: blue;
}
tfoot
{
color: red;
}
</style>
</head>
<body>
<h2>Implementation of thead,tbody,tfoot Tag in HTML5</h2>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ashwani</td>
<td>$1000</td>
</tr>
<tr>
<td>Rahul</td>
<td>$800</td>
</tr>
</tbody>
</table>
<p><b>Note:</b> The <tfoot> element must have one or more <tr> tags inside.</p>
</body>
</html>
Output
