Using the HTML `` Element: Adding Clear and Concise Captions to Tables

Learn how to use the HTML `` element to add descriptive captions to your tables, improving readability and accessibility. This tutorial explains its placement, default styling, and how to customize its appearance using CSS for clear and informative table presentations.

Using the HTML <caption> Element for Table Captions

What is the <caption> Element?

The HTML <caption> element defines a caption for an HTML table. Captions provide a brief description or title for the table, making it easier for users to understand the table's purpose and content. This improves both readability and accessibility.

Example:

<table>
  <caption>Monthly Savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Placement and Styling of Captions

The <caption> element must be placed immediately after the <table> opening tag. By default, captions are centered above the table. However, you can use CSS to change their alignment (text-align) and position (caption-side).

Example using CSS:

caption {
  caption-side: bottom; /* Places caption at the bottom */
  text-align: left;     /* Left-aligns the caption text */
}

Browser Support

The <caption> element is well-supported by all major browsers.