Topics on this page:

1. An IE 3 quirk
2. Aligning captions
3. Captions at top and bottom

An IE 3 quirk

One odd IE 3 quirk that I've noticed is its handling of captions.

If you have a visible border, all of the browsers draw a border around the table. The caption is outside of this border. Depending on whether align="top" or align="bottom" is used, the caption can be above or below the table.

If you specify a bgcolor attribute in the <table> tag, most browsers will just show this background color inside the table borders. However, IE 3 will extend this background color outside the borders to include the caption. Here's a screenshot of a sample table in IE 3 to show you what I mean:

bgcolor="lightgrey" is included in the <table> tag, but the page's background color is white. Notice how the grey color extends below the table to include the caption.

In this example, no harm is done. But what if the table's background color was black? 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 you include a caption, you need to make sure that the caption is readable against the bgcolor as well as against the page's background so that it's readable in all browsers.

Aligning captions

The HTML specs allow values of "top", "bottom", "left" and "right" in the <caption> tag. "left" and "right" place the caption at the top, but aligned with the left or right side of the table.

Netscape only supports "top" and "bottom". If you specify "left" or "right", the caption will be in the default location, "top" - above the table and centered.

IE supports all of these attributes. It also supports an IE-only attribute of valign, which can specify "top" or "bottom". This lets you combine align="left" or align="right" with valign="bottom" to get the caption at the bottom but aligned left or right.

Captions at Top and Bottom

If you're wondering whether you can have a caption at both the top and bottom, the answer unfortunately is no. I tried the following code right after the <table> tag:

<caption>
  Table 1: Blooming Times and Plant Sizes
</caption>
<caption align="bottom">
  Table 1: Blooming Times and Plant Sizes
</caption>

• Netscape 3 and 4 (Netscape 4.5, left) shows the caption twice, but both are above the table.
• IE 3 (right) put the second caption into the table as a separate row. Notice how wide the first column became as a result.
• IE 4+ (not shown) is the only browser that did manage to put one caption at the top and the other at the bottom.