HTML Caption Tag

The <caption> tag in HTML is used to add a title or a heading to a table. Think of it like a label that sits on top of a table and tells users what the table is all about. This is super helpful for making your tables more understandable, especially when you're showing a lot of data.

Syntax -

<caption>..text here..</caption>

It’s always placed right after the <table> tag, and before any <tr> or <thead> rows. It does not go inside <thead> or <tbody>.

Attribute	Description	Values
Align	Specifies the caption alignment. Not supported in HTML5	LeftRightTopbottom

Example -

Scenario - Example Using <caption> Tag

<!DOCTYPE html>
<html>
	<head>
		<title> Caption element example.. </title>
		<style>
			caption {
			  font-size: 20px;
			  font-weight: bold;
			  color: teal;
			  margin-bottom: 10px;
			}
			table {
			  border-collapse: collapse;
			  width: 50%;
			}
			th, td {
			  border: 1px solid gray;
			  padding: 8px;
			  text-align: center;
			}
		</style>
	</head>
	<body>
		<table>
			<caption>Employee details</caption>
			<tr>
				<th>EMP name</th>
				<th>Designation</th>
			</tr>
			<tr>
				<td>Pawan</td>
				<td>Lead</td>
			</tr>
		</table>
	</body>
</html>

Output -

Employee details
EMP name	Designation
Pawan	Lead

Explaining Example -

Try it in your browser and see how neat and clear it looks with the caption!