HTML and CSS Reference
In-Depth Information
Chapter 24
Table
CSS has a number of properties that are used specifically with table elements. These
properties offer control over how browsers render tabular data.
border-spacing
The distance between the borders of adjacent table cells can be changed with the
border-
spacing
property, which is the CSS equivalent of the
cellspacing
attribute in HTML.
W3C defines the initial value for this property as 0, but most browsers render it as 2px by
default.
border-spacing : inherit | <length> [<length>]
This property can be specified with either one or two length values. With two values,
the first one sets the horizontal spacing, and the second one sets the vertical spacing.
.spacing {
border-spacing: 5px 10px;
}
border-spacing
is a property of the table, not the cells, so it is applied to the
<table>
element as in the following example:
<table class="spacing">
<caption>My Table</caption>
<tr>
<td>1st cell, 1st row</td>
<td>2nd cell, 1st row</td>
</tr>
<tr>
<td>1st cell, 2nd row</td>
<td>2nd cell, 2nd row</td>
</tr>
</table>
