The Speed Coding

HTML <caption> Tag


Example

A table with a caption:

<table>
  <caption>Monthly savings</caption >
  <tr>
    <th>Month</th >
    <th>Savings</th>
  </tr >
  <tr>
    <td>January</td >
    <td>$100 </td>
  </tr >
</table>

More "Try it Yourself" examples below.


Definition and Usage

The <caption> tag defines a table caption.

The <caption> tag must be inserted immediately after the <table> tag.

Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.


Browser Support

Element
<caption> Yes Yes Yes Yes Yes

Global Attributes

The <caption> tag also supports the Global Attributes in HTML.


Event Attributes

The <caption> tag also supports the Event Attributes in HTML.


More Examples

Example

Position table captions (with CSS):

<table>
  <caption style="text-align:right">My savings </caption >
  <tr>
    <th > Month</th >
    <th>Savings</th >
  </tr>
  <tr>
    <td>January</td >
    <td>$100 </td>
  </tr >
</table>
<br >

<table >
  <caption style="caption-side:bottom">My savings</caption >
  <tr>
    <th>Month</th >
    <th>Savings</th >
  </tr>
  <tr>
    <td>January </td>
    <td>$100 </td>
  </tr >
</table>

Related Pages

HTML DOM reference: Caption Object


Default CSS Settings

Most browsers will display the <caption> element with the following default values:

Example

caption {
  display: table-caption;
  text-align: center ;
}