The <caption> HTML element is used to provide a title or caption for a table. It is typically placed immediately after the opening <table> tag and before the first <tr> (table row) in the table structure.
Here’s an example of how to use the <caption> element:
<table>
<caption>
Monthly Sales Report
</caption>
<tr>
<th>Product</th>
<th>Units Sold</th>
<th>Revenue</th>
</tr>
<tr>
<td>Product A</td>
<td>100</td>
<td>$5,000</td>
</tr>
<tr>
<td>Product B</td>
<td>75</td>
<td>$3,750</td>
</tr>
</table>
In this example, the <caption> element is used to provide a title for the table, indicating that it represents a “Monthly Sales Report”. The caption is typically displayed above the table, providing a clear and concise description of the table’s purpose or content.
The <caption> element is a semantic element that enhances the accessibility and understanding of the table’s structure and content. It serves as a way to summarize or describe the data presented in the table and helps users navigate and interpret the information effectively.
You can style the <caption> element using CSS to change its appearance, such as adjusting the font size, color, alignment, or adding background colors or borders.
It’s important to note that the <caption> element should be used judiciously and only for tables that benefit from a clear title or caption. In some cases, a table may not require a caption if the table’s structure and content are self-explanatory.
In summary, the <caption> element is used to provide a title or caption for a table. It enhances the accessibility and clarity of the table’s content, making it easier for users to understand the purpose or context of the table.