HTML <tfoot> tag is used to define the set of rows which represents footer of an HTML table. The <tfoot> tag must contain one or more <tr> element.
The <tfoot> tag is used as a child element of HTML table (<table>) along with <thead> and <tbody> elements, where <thead> defines table header and <tbody> defines the table body.
Tips: The <thead>, <tbody>, and <tfoot> elements do not affect the table layout, and if you want to apply the change in table layout then use CSS properties.
Syntax
Example
<tfoot>
<tr></tr>
<tr></tr>
</tfoot>
Provided below are certain details regarding the HTML <tfoot> tag:
| Display | None |
|---|---|
| Start tag/End tag | Start and End tag |
| Usage | HTML Tables |
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML tfoot Tag</title>
<style>
table{
border-collapse: collapse;
}
thead,tfoot{
background-color:#3f87a6;
}
tbody{
background-color:#97ffff;
}
</style>
</head>
<body>
<h1>Example of tfoot tag</h1>
<table border="1" >
<thead>
<tr>
<th>Items</th>
<th>Quantity</th>
<th>Expenditure</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<th>90</th>
<th>4175</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Books</td>
<td>5</td>
<td>1500</td>
</tr>
<tr>
<td>Drawing-Paper</td>
<td>50</td>
<td>800</td>
</tr>
<tr>
<td>Marker</td>
<td>35</td>
<td>1875</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Attribute:
Tag-specific attributes:
| Attribute | Value | Description |
|---|---|---|
| align | rightleftcenterjustifychar | It determines the alignment of the content inside the <tfoot> element.(Not Supported in HTML5) |
char |
Character | It specifies the alignment of the content inside the <tfoot> element to the character.(Not Supported in HTML5) |
| charoff | Number | It specifies the number of characters the content will be aligned from the character specified by the char attribute.(Not Supported in HTML5) |
| valign | topmiddlebottombaseline | It determines the vertical alignment of the content inside the <tfoot> element.(Not Supported in HTML5) |
Global attribute:
The <tfoot> element enables the usage of the Global attributes within HTML.
Event attribute:
The <tfoot> tag enables the implementation of Event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<tfoot> |
Yes | Yes | Yes | Yes | Yes |