HTML and CSS Reference
In-Depth Information
This table is illustrated in Figure
24-1
, with a solid border applied to the
<td>
elements.
Figure 24-1.
Example table
Table cells have borders and padding, but they do not have any margins; they have
border-spacing
instead. Padding works the same as for other elements and behaves like
the
cellpadding
attribute in HTML.
border-collapse
The
border-collapse
property determines whether the table borders are collapsed into a
single border or separated.
border-collapse : inherit | separate | collapse
Normally, table cells have their own distinct borders and are separated by the
distance set with the
border-spacing
property. If the borders are set to collapse instead,
the cells share borders, and any value for the
border-spacing
property is ignored.
table { border-collapse: collapse; }
caption-side
The
<caption>
element provides a label for a table. Its position can be changed using the
caption-side
property.
caption-side : inherit | top | bottom
A caption is ordinarily displayed at the top, but it can also be positioned below the
table using the
caption-side
property. This property applies to the
<caption>
element,
but it can also be set for the
<table>
element because it inherits.
caption { caption-side: bottom; }