Foundation HTML5 with CSS3

Chapter 7

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