Recipe 6.2 Setting the Borders and Cell Padding

Problem

You want to set the borders and the amount of space within table cells to create a stronger visual display than the default rendering of a table, as in Figure 6-1, for example.

Figure 6-1. Borders and padding applied to the table and table cells

Solution

Use the padding property to address the amount of space between the content in the cell and the edges of the cell. Use the border property to set the borders on both the table and its cells:

table {

 border-collapse: collapse; 

 border: 5px solid #444;

}

td {

 padding: 4px;

}

th {

 color: white;

 background-color: black;

}

td, th+th {

 border: 5px solid #666;

}

td+td {

 border: 5px solid #ccc;

 text-align: center;

}

td#winner {

 border: 7px dotted #999;

}

Discussion

There are two border models for HTML tables: collapse and separate. At the time of writing, the collapse model is more widely implemented by browsers and thus more used by designers.

All browsers today default to the collapse model. As the CSS standard doesn't specify that behavior, you should explicitly set the collapse model in your style sheets lest a future browser not have the same defaults.

The collapse model for a table is set by default. Just in case a browser might start using another border model, you can specifically set the border model using the border-collapse property set to collapse:

table {

 border-collapse: collapse;

}

The table element's border attribute specifies borders for the table and its enclosing cells. You can specify CSS's border property through a separate border thickness for the table and individual cells.

If you do apply a border to a cell that runs counter to a previous CSS rule, you must follow these four CSS specification rules for conflict resolution:

If border-style is set to hidden, all other border styles are concealed.
If border-style is set to none, any other border style wins.
Unless a cell has border-style set to hidden or has border-style set to none, a thicker border overrides the narrower borders. If adjoining cells have the same width, the style of the border will be determined in the following order: double, solid, dashed, dotted, ridge, outset, groove, inset.
If adjoining cells have a different color while possessing the same style and width, the border color will be determined in the following order: cell, row, row group, column, column group, and then table.

The other border model is separate, in which every cell contains its own borders and can be styled independently of other cell borders. Within the separate model, the border-spacing property is used to set the horizontal and vertical space respectively between cells:

table#runoffdata {

 border-collapse: separate;

 border-spacing: 4px 4px;

}

If the border-collapse property is set to separate, then any styles set for rows, columns, or groups of table cells aren't applied. Also, styles for table cells that don't contain content can be displayed or hidden using the empty-cells property with the value of show or hide, respectively.

While the separate border model gives more control to web developers, as of this writing separate is supported only in Mozilla and Netscape 6+, not in Internet Explorer. Therefore most web designers stick to the collapse model.