SitePoint
Reference
CSS
Table Properties
border-collapse
CSS Live Demo: border-collapse
(this page)
See also:
All Live Demos
CSS Live Demo: border-collapse
Type your
CSS
here:
(any properties allowed except expression, behavior and @import)
table { border-collapse:separate; } #cities { border-collapse:collapse; } table { font:normal normal normal 0.85em sans-serif; border:2px solid #999; margin:0 0 20px 0; } td, th { text-align:left; vertical-align:top; padding:1px 4px; border:2px solid #999; background:#ffc; } th { background:#eee; }
Type your
HTML
here:
(any tags allowed except script, iframe, frame, object, img and embed)
<table cellpadding="0" cellspacing="0" border="1" summary="This table has three columns, charting the name of each city, its country, and the years I lived there"> <thead> <tr> <th id="city">City</th> <th id="country">Country</th> <th id="years">Years</th> </tr> </thead> <tbody> <tr> <th id="wgc" headers="city">Welwyn Garden City</th> <td headers="country">UK</td> <td headers="years">1977–1991</td> </tr> <tr> <th id="london" headers="city">London</th> <td headers="country">UK</td> <td headers="years">1992–2004 (with gaps)</td> </tr> <tr> <th id="la" headers="city">Los Angeles</th> <td headers="country">US</td> <td headers="years">1999</td> </tr> <tr> <th id="melbourne" headers="city">Melbourne</th> <td headers="country">AU</td> <td headers="years">2007–</td> </tr> </tbody> </table> <table id="cities" cellpadding="0" cellspacing="0" border="1" summary="This table has three columns, charting the name of each city, its country, and the years I lived there"> <thead> <tr> <th id="city">City</th> <th id="country">Country</th> <th id="years">Years</th> </tr> </thead> <tbody> <tr> <th id="wgc" headers="city">Welwyn Garden City</th> <td headers="country">UK</td> <td headers="years">1977–1991</td> </tr> <tr> <th id="london" headers="city">London</th> <td headers="country">UK</td> <td headers="years">1992–2004 (with gaps)</td> </tr> <tr> <th id="la" headers="city">Los Angeles</th> <td headers="country">US</td> <td headers="years">1999</td> </tr> <tr> <th id="melbourne" headers="city">Melbourne</th> <td headers="country">AU</td> <td headers="years">2007–</td> </tr> </tbody> </table>
Show me!
Your results appear here:
