(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66923408-1', 'auto'); ga('send', 'pageview');
<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
NameFavorite 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> 
.better-table caption { caption-side: bottom; }

Favorite Colors
NameFavorite Color
Bob
Yellow
Michelle
Purple
Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for caption

All
All
All
All
All
All
shares