HTML <caption> Tag

The <caption> tag in HTML is used to define a title or caption for a table. It provides a brief description of the table's content and helps users understand the purpose and context of the data presented in the table. The <caption> tag must be placed immediately after the opening <table> tag. It is an essential element for improving the accessibility and usability of your HTML tables.

Syntax

<table>
  <caption>Table Caption</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Attributes

Example

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$1200</td>
  </tr>
</table>

More Examples

Styling with CSS

While the align attribute is deprecated, you can use CSS to position and style the caption for modern web design.

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  caption {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px; /* Space below caption*/
    caption-side: top;  /* Positions the caption above the table,default behaviour */
  }
    .bottom{
     caption-side: bottom; /* Positions the caption below the table*/
      margin-top: 10px;/*Space above caption*/
    }
</style>

<table>
  <caption>Styled Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$1200</td>
  </tr>
</table>

<table style="margin-top:20px">
  <caption class="bottom">Styled Monthly Sales Report (Bottom)</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$1200</td>
  </tr>
</table>

Complex Table with Detailed Caption

For larger tables, the caption can provide crucial context, such as date range or category.

<table>
    <caption>
        Detailed Sales Data for Q1 2024
        <br/>
        This table displays the total sales for each month in the first quarter of 2024.
    </caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Category</th>
            <th>Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>Electronics</td>
            <td>$5000</td>
        </tr>
         <tr>
            <td>January</td>
            <td>Books</td>
            <td>$1200</td>
        </tr>
        <tr>
            <td>February</td>
            <td>Electronics</td>
            <td>$5500</td>
        </tr>
         <tr>
            <td>February</td>
            <td>Books</td>
            <td>$1000</td>
        </tr>
         <tr>
            <td>March</td>
            <td>Electronics</td>
            <td>$6000</td>
        </tr>
         <tr>
            <td>March</td>
            <td>Books</td>
            <td>$1400</td>
        </tr>
    </tbody>
</table>

Browser Support

Notes and Tips

• The <caption> tag should always be the first tag within the <table> element.
• Use CSS for styling and positioning the caption rather than the deprecated align attribute.
• The caption provides context, making tables more understandable, especially for users with screen readers.
• Use <br> tag inside <caption> tag for multi-line descriptions
• Place the <caption> tag before the <thead>, <tbody>, or <tfoot> tags.
• The caption-side CSS property offers flexibility for placing the caption above or below the table.
• Ensure your table has a caption, especially in scenarios where complex data is presented.
• Write clear and concise captions to give a summary of the table.