HTML caption: Main Tips
- The HTML
<caption>adds a table caption. As a standard, this element must be the first child of the <table>. - HTML table caption can be added below the table to mimic the regular way of presenting captions for figures or images by using CSS.
Use of caption
The HTML <caption> defines a table caption (or a HTML table title) for the <table> element.
Example
<table style="width: 100%; border: 1px solid;">
<caption>Average Price List of Fruits [July 2017]</caption>
<tr>
<th>Fruits</th>
<th>Prices</th>
</tr>
<tr>
<td>Apple</td>
<td>€0.60</td>
</tr>
<tr>
<td>Banana</td>
<td>€0.32</td>
</tr>
</table>To make the table caption appear at the bottom of a table, use the caption-side CSS property:
align (DEPRECATED)
It sets the alignment for the table caption. No longer used in HTML5.
Example
<table style="width: 100%; border: 1px solid;">
<caption align="bottom">Average Price List of Fruits [July 2017]</caption>
<tr>
<th>Fruits</th>
<th>Prices</th>
</tr>
<tr>
<td>Apple</td>
<td>€0.60</td>
</tr>
<tr>
<td>Banana</td>
<td>€0.32</td>
</tr>
</table>Browser support
Chrome
All
Edge
All
Firefox
1+
IE
All
Opera
All
Safari
All
Mobile browser support
Chrome
All
Firefox
4+
Opera
All
Safari
All