HTML
CSS
PHP
JavaScript
SQL
Bootstrap
Solidity
jQuery
Git
Chrome DevTools
C++
PythonHTML 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.
Theory is great, but we recommend digging deeper!
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