The HTML <caption> element provides a caption or title to a table. It is typically placed inside the <table> tag immediately after the opening <table> tag. The <caption> tag can also be included in the <figure> and <figcaption> tags for providing captions or titles to images.
Caption Tag Attributes:
Using these attributes, we can align the caption text to the table’s top, bottom, left, or right side. Additionally, we can vertically align the caption text to the table’s top, middle, or bottom.
- align: Specifies the alignment of the caption within its parent element. Allowed values are “top,” “bottom,” “left,” and “right.” Example:
<caption align="top">List of Fruits</caption>. - valign: Specifies the vertical alignment of the caption within its parent element. Allowed values are “top”, “middle”, and “bottom”. Example:
`<caption valign="top">List of Fruits</caption>`.
Caption Tag Code Example:
<table>
<caption>List of Fruits</caption>
<tr><th>Fruit Name</th>
<th>Quantity</th></tr>
<tr>
<td>Apple</td>
<td>10</td>
</tr><tr>
<td>Orange</td>
<td>15</td>
</tr>
</table>In the code example above, we have a table that lists different fruits and their quantities. The <caption> tag is used to provide a caption or title to the table. In this case, the caption reads “List of Fruits”.
Conclusion
The `<caption>` tag is a useful HTML element for providing captions or titles to tables and images. It helps users understand the content of the table or image more easily by providing contextual information. By using the align and valign attributes, we can further customize the appearance and positioning of the caption text within its parent element.
