HTML <caption> Tag
Last Updated :
17 Apr, 2025
Improve
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.
- The <caption> tag must be placed immediately after the opening <table> tag.
- Useful for summarizing table data, especially in large datasets
- The
<caption>
tag also supports the Global Attributes and Event Attributes in 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>
<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>
<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.