Open In App

HTML <caption> Tag

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
6 Likes
Like
Report

The <caption> tag in HTML is used to provide a title or description for a <table> element. It helps give context or additional information about the content of the table.

html 
<html>
<body>
    <table>
        <caption>Student Information</caption>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Alice</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>22</td>
        </tr>
    </table>
</body>
</html>
  • The <caption> tag provides a title for the table, which in this case is "Student Information".
  • The table contains rows of data with names and ages.

More Example for HTML caption Tag

Employee Table with Caption Tag

html 
<html>
<body>
    <table>
        <caption>Employee Details</caption>
        <tr>
            <th>Employee Name</th>
            <th>Position</th>
        </tr>
        <tr>
            <td>John</td>
            <td>Manager</td>
        </tr>
        <tr>
            <td>Emma</td>
            <td>Developer</td>
        </tr>
    </table>
</body>
</html>

In this Example:

  • The <caption> tag provides a title for the employee details table.
  • It helps to clarify the purpose of the table for screen readers and users.

Product Table with Style

HTML 
<html>
<head>
	<style>
		table {
			width: 100%;
			border-collapse: collapse;
		}
		th,
		td {
			border: 1px solid black;
			padding: 10px;
		}
		caption {
			font-size: 1.5em;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<table>
		<caption>Product Details</caption>
		<tr>
			<th>Product Name</th>
			<th>Price</th>
		</tr>
		<tr>
			<td>Smartphone</td>
			<td>$599</td>
		</tr>
		<tr>
			<td>Laptop</td>
			<td>$999</td>
		</tr>
	</table>
</body>
</html>

In this Example:

  • The <caption> tag is used to label the table as "Product Details," making the content easily identifiable.
  • Custom styles such as border and padding are applied to enhance readability and table structure.

Best Practices for the HTML <caption> Tag

  • Use for Accessibility: Always include a <caption> tag when the table’s content needs a clear and descriptive title, improving accessibility for screen readers.
  • Place Immediately After <table> Tag: Ensure the <caption> tag is the first child of the <table> element, right after the opening <table> tag, for proper structure and functionality.

M

manaschhabra2
Improve
Article Tags :

Explore

Lightbox