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 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.
