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

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>

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> 

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for caption

All	All	All	All	All	All