HTML / HTML Tags

HTML <Caption> Tag

Oct 12, 2022
2 min read
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>

  • 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