Table Border

by Florence W. Deems

This is an interesting CSS2 property, but W3C Schools doesn't really explain more than the bare bones about it. This property determines whether the table border will remain separate from the cell spacing, as in regular html, or whether it will collapse into the cell spacing to produce only a single border. So I experimented. Below are the results.
Table #1
Peter Griffin
Lois Griffin

Spacing for Table 1 is 10px. This makes a cellpadding of 10 pixels around each cell. Table background-color is pink.

Table #2
Cleveland Brown
Glenn Quagmire

Spacing for Table 2 is now 10px for the sides, but 50px for the padding of each row of cells. Note: IE8 supports the border-spacing property if a !DOCTYPE is specified.

Table #3

Spacing for Table 3 is now 50px for both the sides and the padding for each row of cells. Even though I specified a color (bgcolor) for each <tr> row, the color didn't show.

Table #4

For Table 4 I first specified border-collapse:none. It looked like Table #3 above. Then I removed the border-collapse property - and it still looked like Table #3! So then I added background-color: pink; to the head code for the 4th table. This is the only way to get the cellspacing colored.

Border Styles Introduction ~ 2 ~ 3
Border Widths
Border Color Introduction ~ 2
Border Radius: Introduction ~ 2
Border Collapse Spacing ~ Pinning an Element
An older Border Playground from 2008

Visit these other Tutorials by Flo

Monday 22nd of July 2024 12:53:27 AM



Tandem Tooters

Arbor Hosting