HTML <Caption> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

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>

  • 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>

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes