Summary -

In this topic, we described about the <tfoot> tag along with detailed example.

Table footer or table summary in HTML document. The <tfoot> tag used to specify the summary of the columns of an HTML <table>. tfoot element is a child of table element.

The tag can be specified like <tfoot></tfoot> with the table foot elements in between the opening and closing tags. <tfoot> element can be specified after caption, colgroup, and thead elements. <tfoot> tag is useful specially when large tables are displaying.

Syntax -

<tfoot>.... </tfoot>

Optional Attributes -

AttributeDescriptionValues
AlignSpecifies the tfoot content alignment.Not supported in HTML5centercharjustifyleftright
CharSpecifies the tfoot content to char.Not supported in HTML5Character
ValignSpecifies the tfoot content should be vertically aligned.Not supported in HTML5TopMiddleBottombaseline

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> Table element example.. </title>
	</head>
	<body>
		<table>
	  		<thead>
				<tr>
					<th>Employee</th>
					<th>Salary</th>
				</tr>
	  		</thead>
	  		<tfoot>
				<tr>
					<td>Total</td>
					<td>$10000</td>
				</tr>
	  		</tfoot>
	  		<tbody>
				<tr>
					<td>Pawan</td>
					<td>$5000</td>
				</tr>
				<tr>
					<td>Srinivas</td>
					<td>$5000</td>
				</tr>
	  		</tbody>
		</table>
	</body>
</html>

Output -

Employee Salary
Total $10000
Pawan $5000
Srinivas $5000