HTML <Caption> Tag

Definition

The <caption> element is a very underused yet important element that provides a title (or caption) for HTML tables.

Example

  <table border="1">
    <caption>Table Title</caption>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
      </tr>
  </table>

Usage

• The <caption> element should be the first child of the <table> element.

• If the <table> is the only descendant of a <figure> element, you should use <figcaption> instead.

• You can position the <caption> element using CSS. The following example makes the caption appear under the table:

  <table border="1">
    <caption style="caption-side:bottom">Table Title</caption>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
      </tr>
  </table>

  Try it Yourself

• You can also use text-align to adjust the alignment of the caption.

Attributes

The Caption element only supports the Global Attributes.

Best Practices

• Make sure to use a descriptive caption when using the <caption> element. Search engines use it to give context to the data in the table.
• You can use the <caption> to introduce a table with an introductory paragraph of text. This significantly helps the user to understand it, especially when the table does not make sense on it’s own. For example:

  <table border="1">
    <caption>
      <p>Table 1.</p>
      <p>This table shows the rows and columns of a table.</p>
    </caption>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
      </tr>
  </table>

  Try it Yourself

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile