Captions

Topics on This Page

Captions
Background Colors and Captions
Captions at Top and Bottom
Example

Captions

You can include a caption for a table. The caption is displayed either above or below the table.

The caption is specified in a <caption> tag. Place this tag immediately after the <table> tag, before the first <tr> tag. Notice that the <caption> tag goes immediately after the <table> tag even if you want the caption displayed beneath the table.

Here's an example of a table with a caption:

<center>
<table border="4" cellspacing="0" cellpadding="6" bgcolor="#ffffcc">
  <caption> Price List </caption>
  <tr>
    <th> Item </th>
    <th> Price </th>
  </tr>
  <tr>
    <td> Radio </td>
    <td> $14.00 </td>
  </tr>
  <tr>
    <td> Television </td>
    <td> $534.00 </td>
  </tr>
</table>
</center>

All browsers recognize align="top|bottom". This defaults to "top". "bottom" places the caption beneath the table:

<center>
<table border="4" cellspacing="0" cellpadding="6" bgcolor="#ffffcc">
  <caption align="bottom"> Price List </caption>
  <tr>
    <th> Item </th>
    <th> Price </th>
  </tr>
  <tr>
    <td> Radio </td>
    <td> $14.00 </td>
  </tr>
  <tr>
    <td> Television </td>
    <td> $534.00 </td>
  </tr>
</table>
</center>

IE also recognizes align="left|right". This places the caption above the table, but aligned with either the left or right side of the table. Recognizing that you might still want to be able to place the caption below the table, IE also recognizes another attribute, valign="top|bottom" (valign is proprietary to IE, and its use will cause an error message when you validate the page). If you use these options, browsers other than IE will display the caption centered above the table.

<caption> can contain only inline elements: text, inline tags such as <b>, and most empty tags such as <img>. You cannot include block tags such as <p> in a caption.

Background Colors and Captions

If you specify a background color in your table — as I did in the examples on this page — you need to be aware of a quirk in IE 3. IE 3 extends the table's background color to also enclose the caption. I don't have IE 3 available anymore and can't show how these examples look, but I do have an IE 3 screen shot of another table that has a bottom-aligned caption:

This table has a grey background and is displayed on a page with a white background.

In this example, no harm is done. The black caption text is easily readable against the grey background in IE 3 as well as against the white background seen in other browsers. But what if the table's background color was black and the text inside the table is white? The caption would be unreadable in IE 3 since it would be black text on black. If you include bgcolor in the <table> tag and include a caption, and if you want the caption to be readable in IE 3, you need to make sure that the caption is readable against the table's bgcolor as well as against the page's background.

Captions at Top and Bottom

If you're wondering whether you can include two captions — one with align="top" and one with align="bottom" — the answer is no. The HTML specs only allow one <caption> tag per table.

IE 4+ does support this use of captions, and will dutifully display one above the table and the other below the table. Netscape will display both captions above the table. IE 3 will display the first caption above the table, but then places the second caption inside the table, just as if the second caption tag was replaced with <tr><td>...</td></tr>.

Here are screen shots of Netscape 4 and IE 3 attempting to display a table with two captions specified in this manner. In the IE 3 shot, notice how an additional row is added to the table. The row has only one cell, so empty cells were created for the remainder of the row. Notice how the size of the caption affected the layout of the table.

Netscape 4
IE 3

Example

Here's an example of a table with captions. CSS is used for formatting the caption's text and for setting the table's background colors.

Try moving the caption underneath the table by adding align="bottom" to the <caption tag.

Take out the align="bottom" and try moving the caption underneath the table by adding vertical-align: bottom; to the caption selector in the <style> tag. This method works in IE, but not in Netscape (not even in Netscape 6!).