caption HTML Table Tag

The caption tag defines a text title or brief explanation appended to a HTML table.

The HTML caption is not mandatory but if used then it must be defined immediately after the opening <table> tag.

Syntax

<table>
  <caption>Title</caption>
  <tr>
    <td>cell</td>
  </tr>
</table>

Table captions are usually just plain text, but we can also add images and other tags, if necessay, as demonstrated below.

<table>
  <caption>
    <img src="/images/demo-icon.png"
         alt="demo">
    Price List
  </caption>
  <tbody>
    <tr>
      <td>Model 3</td>
      <td>$42,900</td>
    </tr>
    <tr>
      <td>Model Y</td>
      <td>$54,990</td>
    </tr>
  </tbody>
</table>

Price List

Model 3	$42,900
Model Y	$54,990

Example table caption above a simple table.

Caption Styles

By default, a table caption will be aligned to the center, above the table, outside the borders. We can use the text-align and caption-side CSS properties to overwrite the default placement.

Aligning the caption text to the right

<table class="demo">
  <caption style="text-align:right">
      January
  </caption>
  <tr>
    <th>Name</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>John</td>
    <td>$500</td>
  </tr>
</table>

Displaying the caption at the bottom of the table

<table class="demo">
  <caption style="caption-side:bottom">
      Transferred
  </caption>
  <tr>
    <th>Name</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Jade</td>
    <td>$900</td>
  </tr>
</table>

Table Captions Generator

The online interactive table generator and styler below doens't have the option to add captions. Please add them manually to your code.

Make sure to add them right after the opening <table> tag. The code snippet below will be helpful if you need to copy-paste the sytax:

<caption> </caption>