Type your CSS here: (any properties allowed except expression, behavior and @import) /* here's caption-side in action */ #cities caption { caption-side:bottom; } /* this is to make the demo look pretty */ caption { font-size:1.4em; margin:5px; } table { font:normal normal normal 0.85em sans-serif; border:1px solid #999; border-collapse:collapse; } 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"> <caption>Cities I've lived in</caption> <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!