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>
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 since it inherits.
caption { caption-side: bottom; }
empty-cells
A table cell without any content normally still displays its border and background. This behavior can be changed with the empty-cells property.
empty-cells : inherit | show | hide
Setting the value for this property to hide causes the cell’s border and background to be hidden. The layout of the table is not affected.
table-layout
The table-layout property determines whether the width of table cells should be fixed or flexible. Unlike the other table properties, table-layout is not inherited.
table-layout : auto | fixed
This property is initially set to auto, which means that the width of table cells automatically expands to fit their content, even if that means going beyond their set width. To enforce a table’s specified width, the table-layout can instead be set to fixed. The horizontal layout then depends only on the table's set width, not on the content of the cells.
/* Enforce table width */
.fixed { table-layout: fixed; }
A fixed table layout has the added benefit that the browser can render the table more quickly because it knows the dimension of the table as soon as the first row is received.
