HTML Table Caption: Here's The Code To Create One Now

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
HTML Tables: Find Out When To Use Them (And When To Avoid)
What does HTML Table Caption: Here's The Code To Create One Now 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
NameFavorite Color
BobYellow
MichellePurple

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
BobYellow
MichellePurple
Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for caption

iefirefoxchromeedgesafariopera
AllAllAllAllAllAll