Element of
Tables
What does <caption> do?
The <caption> element is used to add a caption to an HTML table. A <caption> must appear in an HTML document as the first descendant of a parent <table>, but it may be positioned visually at the bottom of the table with CSS.
Display
block
Usage
textual

Code Example

<table>
<caption>Favorite Colors</caption>
 <tr>
  <th>Name</th>
  <th>Favorite Color</th>
 </tr>
 <tr>
  <td>Bob</td>
  <td>Yellow</td>
 </tr>
 <tr>
  <td>Michelle</td>
  <td>Purple</td>
 </tr>
</table>
Favorite Colors
Name Favorite Color
Bob Yellow
Michelle Purple

Fixing the awkward default

The <caption> is an underused element, and part of the reason for that is probably because the default placement of a table's caption is above the table. This doesn't really make sense, as the normal placement for a caption in other contexts (print, illustrations, or even the <figure> and <figcaption> elements in HTML5), is below the captioned item. This is easily resolved with the CSS caption-side property.

.better-table caption {  caption-side: bottom; } 
<table class="better-table"> <caption>Favorite Colors</caption>  <tr>   <th>Name</th>   <th>Favorite Color</th>  </tr>  <tr>   <td>Bob</td>   <td>Yellow</td>  </tr>  <tr>   <td>Michelle</td>   <td>Purple</td>  </tr> </table> 
Favorite Colors
Name Favorite Color
Bob Yellow
Michelle Purple

Browser Support for caption

AllAllAllAllAllAll