HTML caption tag
Example
A table with a caption:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Month | Savings |
---|---|
January | $100 |
Definition and Usage
The <caption>
tag defines a table caption.
The <caption>
tag must be inserted immediately after the <table> tag.
Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.
Global Attributes
The <caption>
tag also supports the Global Attributes in HTML.
Event Attributes
The <caption>
tag also supports the Event Attributes in HTML.
More Examples
Example
Position table captions (with CSS):
<table>
<caption style="text-align:right">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<br>
<table>
<caption style="caption-side:bottom">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<caption style="text-align:right">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<br>
<table>
<caption style="caption-side:bottom">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Month | Savings |
---|---|
January | $100 |
Default CSS Settings
Most browsers will display the <caption>
element with the following default values:
Example
caption {
display: table-caption;
text-align: center;
}
display: table-caption;
text-align: center;
}
Comments
Post a Comment