• 
• 1. SitePoint
  2. Reference
  3. CSS
  4. Table Properties
  5. border-spacing
  6. CSS Live Demo: border-spacing (this page)
• See also: All Live Demos

CSS Live Demo: border-spacing

Type your CSS here: (any properties allowed except expression, behavior and @import) #cities { border-collapse:separate; border-spacing:2px; } table { font:normal normal normal 0.85em sans-serif; border:1px solid #999; margin:0 0 20px 0; } td, th { text-align:left; vertical-align:top; padding:1px 4px; border:1px solid #999; background:#ffc; } th { background:#eee; }

Type your HTML here: (any tags allowed except script, iframe, frame, object, img and embed) <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&#8211;1991</td> </tr> <tr> <th id="london" headers="city">London</th> <td headers="country">UK</td> <td headers="years">1992&#8211;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&#8211;</td> </tr> </tbody> </table>

Show me!

Your results appear here: