Summary -

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

Table header or table header cell in HTML document. The <th> tag used to specify a header cell in HTML <table>. <th> element is the child element of <tr> element.

<th> element text is bold be default as it is part of header. The tag can be specified like <th></th> with the header text in between the opening and closing tags. The <th> tag nested tag.

Syntax -

<th>.... </th>

Optional Attributes -

AttributeDescriptionValues
AbbrSpecifies the cell content abbreviated version.Not supported in HTML5Text
AlignSpecifies the cell content alignment.Not supported in HTML5CenterCharJustifyLeftRight
BgcolorSpecifies the cell background color.Not supported in HTML5Rgb(x,x,x),#xxxxxx,Colorname
CharAligns the cell content to char.Not supported in HTML5Character
ColspanSpecifies the number of columns that cell should span. Number.Default value 1.
HeadersSpecifies the how many header cells the cell related toHeader_cell_id
HeightSpecifies the cell height.Not supported in HTML5Number/pixels
NowrapSpecifies the cell content should not wrap.Not supported in HTML5Number
RowspanSpecifies the number of rows that cell should span.Number
ScopeSpecifies the how the cell associates with header and data cells.Not supported in HTML5ColColgroupRowrowgroup
ValignSpecifies the cell content vertical alignment.Not supported in HTML5TopMiddleBottombaseline
WidthSpecifies the cell width.Not supported in HTML5Number/pixels

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