HTML <caption> Table Caption Tag Reference
The caption HTML tag creates a caption for a table, which is like a heading for a table.
.
The <caption> HTML/xHTML tag
The <caption> tag gives an HTML table a heading.
When to use the <caption> tag (semantic use)
Use a single <caption> to describe a table. This is more relevant than using a heading tag like an <h2>, because it's actually part of the table itself, so the description is more specific, whereas a preceding heading tag could apply to more content.
All user agents, including text-to-speech aural browsers, will interpret a <caption> tag as describing the table it's part of.
It's valid in all current versions of HTML and xHTML, and it should always have a closing </caption> tag.
Example of <caption> tag use
Note that, while the <caption> is logically part of the table, and sits within the <table> tag, it isn't necessarily bound by the table's style. In the example below, the table has a margin and borders, but these do not apply to the caption.
Here's a table using all the tags, including <thead>, <tbody>, <tfoot>, with both <td> table data cells and <th> table header cells, and also a <caption> for good measure.Looks like...
| ID | Product | Unit price | Units ordered | Total |
|---|---|---|---|---|
| Total price | £10.85 | |||
| 1 | Coffee | £1.50 | 3 | £4.50 |
| 2 | Turnips | £0.90/kg | 4 | £3.60 |
| 3 | Rat's tails | £0.25 / 6 | 11 | £2.75 |
(Note, we've added styles to this table.)
Buy sections of this site as downloadable PDF ebooks now
<thead>
<th>Product</th>
<th>Unit price</th>
<th>Units ordered</th>
<th>Total</th>
<tfoot>
<td>£10.85 </td>
<tbody>
<td>Coffee</td>
<td>£1.50</td>
<td>3</td>
<td>£4.50</td>
<tr>
<td>Turnips</td>
<td>£0.90/kg</td>
<td>4</td>
<td>£3.60</td>
<tr>
<td>Rat's tails</td>
<td>£0.25 / 6</td>
<td>11</td>
<td>£2.75</td>