HTML and CSS Reference
In-Depth Information
tables. If you want to be more specific, you could use a
class
attribute to distinguish some tables from
others or an
id
attribute to single out just one table.
Figure 7-11.
A basic table transformed in grand fashion by some carefully applied CSS
Pretty impressive, right? There's a lot going on here, so hang in there as we walk you through each rule in
our CSS. First up, the
table
rule and its declarations:
table {
width: 600px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
border-collapse: separate
border-spacing: 10px 5px;
table-layout: auto;
empty-cells: hide;
}
You're no doubt familiar with the
font
and
width
declarations, so no need to explain those. What's new—
and unique to tables—are the
border-collapse
,
border-spacing
,
table-layout
, and
empty-cells
properties.
The border-collapse property
The
border-collapse
property determines the table's
border model
. Possible values for this property are
collapse
,
separate
, and the cascaded value
inherit
. Supplying a value of
collapse
will trigger the
table's
collapsing border model
, wherein the spacing between cells is collapsed and the browser re-
calculates any
border
property applied to table cells and headings. Declaring
border-collapse:
separate
—as the code in Listing 7-22 does—triggers the
separated borders model
, wherein each table
cell is spaced apart from its neighboring cells.
The border-spacing property
The
border-spacing
property controls the amount of separation between the borders of adjacent cells.
The property can accept one or two length values (or a value of
inherit
). If one value is present, then
