HTML and CSS Reference
In-Depth Information
Figure 14-17.
A larger amount of padding in one cell affects other cells in the same row and column
Controlling the Position of the Table Caption
By default, the caption appears above the table, but you can move it underneath using the
caption-side
property, which accepts two values:
bottom
Puts the caption under the table
.
top
Puts the caption above the table. This is the default value
.
In the original CSS2 draft, there were two other values:
left
and
right
. However, Firefox was the only
browser to offer support, so they were removed from the final specification.
All mainstream browsers, including IE 8, support
caption-side
. It's not supported in IE 6 or IE 7.
Because the caption is an integral part of the table, you can define the
caption-side
property in the style
rule for the table or in a separate rule for the caption itself. The caption inherits its text color and width from the
table. You can style a caption like any other text element, giving it a color and font properties of its own.
■
Most browsers support giving a caption a margin to distance it from the table. However, some WebKit-based
browsers have problems with margins on captions, so it's safer to use padding.
Tip
Handling Empty Cells
The
empty-cells
property is supported by all browsers currently in widespread use, but not by IE 6 and IE 7.
It accepts the following values:
hide
Prevent the display of an empty cell's borders and backgrounds
.
show
Draw borders and backgrounds on every cell, even if it contains no content. This
is the default setting
.
An empty cell is defined as a cell that contains absolutely nothing or one that has the
visibility
property
set to
hidden
. However, setting the
visibility
of a cell to
hidden
also prevents the display of its borders and
background, even when
empty-cells
is set to
show
.
