HTML <caption> Tag

The <caption> tag adds a caption, or title bar, to an HTML table. Table captions are used to add information about the content of the table.

HTML Tag

Example

#

A <caption> on a table.

Artists
Firstname Lastname Country
Vincent Van Gogh Netherlands
Paul Cézanne France
<style>
 table.tb {width:100%; border-collapse:collapse;}
 .tb th, .tb td, .tb caption {padding:5px; border:1px solid #777;}
 .tb caption {background-color:lightblue; color:black; border-bottom:0;}
</style>

<table class="tb">
  <caption>Artists</caption>
  <tr> 
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Country</th>
  </tr>
  <tr> 
    <td>Vincent</td>
    <td>Van Gogh</td>
    <td>Netherlands</td>
  </tr>
  <tr> 
    <td>Paul</td>
    <td>Cézanne</td>
    <td>France</td>
  </tr>
</table>

Using <caption>

The <caption> tag is used to add a caption or title row to a table.

Table captions add information about what the tabular data represents.

The <caption> tag must be the first element in the <table>.

Attributes for <caption>

The <caption> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    value Provides the caption element with a unique identifier.
class    classnames Assigns one or more classnames to the caption element.
style    CSS-values Assigns CSS style values to the caption element.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attribute listed below.  It is no longer valid in HTML5.

Attribute Description Alternative
align Aligns the content in the caption. CSS text-align

Did you know?

Did you know?

Moving a <caption> to the bottom of the table

By default, the <caption> element is placed at the top of the table.

Using the CSS caption-side property, the caption alignment can be changed.

The alignment can be set to top or bottom.

A table with a caption at the bottom of the table.

Artists
Firstname Lastname Country
Vincent Van Gogh Netherlands
Paul Cézanne France
<style>
 table.tbb { width:100%; border-collapse: collapse; }
 .tbb th, .tbb td, .tbb caption { padding:5px; border: 1px solid #777; }
 .tbb caption { background-color:lightblue; color:black; caption-side:bottom; border-top:0;}
</style>

<table class="tbb">
  <caption>Artists</caption>
  <tr> 
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Country</th>
  </tr>
  <tr> 
    <td>Vincent</td>
    <td>Van Gogh</td>
    <td>Netherlands</td>
  </tr>
  <tr> 
    <td>Paul</td>
    <td>Cézanne</td>
    <td>France</td>
  </tr>
</table>

Table Tags

The <caption> tag is part of a group of tags that are used to create HTML tables. This group is referred to as the Table tag group. Together, these tags allow you to create comprehensive HTML tables.

Here is a list of table tags

Element Description
<table> Creates a table that contains elements listed below
<caption> Creates a caption above or under a table
<colgroup> Creates a container for col elements
<col> Creates a style for one or more columns in a table
<thead> Creates a table header that can style all header cells
<tbody> Creates a table body that can style all data cells
<tfoot> Creates table footer that can style all footer cells
<tr> Creates a table row that contains table cells
<th> Creates a table header cell
<td> Creates a table data cell

Browser support

Here is when <caption> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides