The <caption> tag adds a caption bar to a table.
Table captions add information about what the tabular data represents.
The <caption> tag must be the first element in the <table>.
A <caption> on a table.
| 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>
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.
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 |
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.
| 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>
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, they 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 |
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 |
