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
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
Search WWH ::

Custom Search