HTML and CSS Reference
In-Depth Information
As you can see in Figure 10-6, the result is quite different.
Figure 10-6.
Table borders in the collapsed model
The borders have “collapsed” into one another and the space between cells has been
removed. For most purposes, this collapsed model is more useful than it's separate counter-
part. The rules that control the collapsed model are quite specific:
•
The
table
element itself cannot have padding (although it can have margins). This
means there is never any space between a table's border and its outermost cells.
•
In addition to the
table
element, cells, rows, columns, row groups, and column groups
can all have borders.
•
There is never any space between cell borders. Borders themselves collapse into one
another so that only one is actually drawn. So, if two cells each have a one-pixel-wide
border, rather than two adjacent one-pixel-wide borders (for a total width of two pix-
els), you will see only one border line with a one-pixel weight.
•
If two cells collapsing into one another have differing
border-style
attributes, the style
with the greater priority will be displayed. The priority, from most preferred to least pre-
ferred, is as follows:
hidden
,
double
,
solid
,
dashed
,
dotted
,
ridge
,
outset
,
groove
,
inset
,
none
. If the two collapsing cells have the same
border-style
attribute, that value will be
used.
•
If two cells collapsing into one another have borders of the same style and width but
different color, the displayed color is taken from the element with the greater priority.
The priority, from most preferred to least preferred, is as follows: cell, row, row group,
column, column group, table. If the two elements are of the same type, then no behav-
ior is defined, and each user agent or browser is left to its own devices when choosing
which color to display.
With that in mind, let's experiment with some different border styles for our example
table:
