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
<tfoot>
<tr></tr>
<tr></tr>
lt;/tfoot>
Following are some specifications about the HTML <tfoot> tag
Display | None |
Start tag/End tag | Start and End tag |
Usage | HTML Tables |
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 | right left center justify char | 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 | top middle bottom baseline | It determines the vertical alignment of the content inside the <tfoot> element. (Not Supported in HTML5) |
Global attribute:
The <tfoot> tag supports the Global attributes in HTML.
Event attribute:
The <tfoot> tag supports the Event attributes in HTML.
Supporting Browsers
Element | Chrome | IE | Firefox | Opera | Safari |
<tfoot> | Yes | Yes | Yes | Yes | Yes |
Leave a Reply