Summary -

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

Row group consisting of table header columns in HTML document. The <thead> tag used to specify the block of header rows in an HTML <table>. <thead> element is child element of <table> element.

<thead> tag should specify after <caption>, and <colgroup> elements and before <tbody>, <tfoot>, and <tr> elements if exists.

The tag can be specify like <thead></thead> with the table header elements in between the opening and closing tags. <thead> is a nested element.

Syntax -

<thead>.... </thead>

Optional Attributes -

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

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> Thead 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