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
Tuesday 11th of February 2025 10:20:50 AM
by 
~~~ 
Tandem Tooters
Arbor Hosting

|