HTML <caption> Tag
Concept
The HTML <caption> tag is used to define a table caption. It must be inserted immediately after the <table> tag. A table can have only one caption, and it is typically centered above the table. The <caption> tag is a block-level element, and it can contain inline elements.
Implementation
Example 1: A Table with a Caption for a Book Library
<table border="1">
<caption>Monthly Sales Report</caption>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
<tr>
<td>January</td>
<td>$1000</td>
</tr>
<!-- More rows here -->
</table>
Try it out below:
powered by Advanced iFrame. Get the Pro version on CodeCanyon.
Example 2: Styling a Caption for a Recipe Ingredients Table
powered by Advanced iFrame. Get the Pro version on CodeCanyon.
Attributes
The <caption> tag supports the Global Attributes and Event Attributes in HTML.
Browser Support
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| IE | Yes |
| Edge | Yes |
Default CSS Settings
Most browsers will display the <caption> element with the following default CSS settings:
caption {
display: table-caption;
text-align: center;
}
Conclusion
The <caption> tag is a versatile tool for adding titles or captions to tables in HTML.
Whether it’s for a library inventory or a recipe’s ingredients list, the <caption> tag, along with CSS, can be used to create visually appealing and informative tables.
