Type your HTML here: (scripts and custom event handlers are not allowed) <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>

Type any CSS you want here: (any properties allowed except expression, behavior and @import) /* here's table-layout in action */ #cities { width:100%; table-layout:fixed; } #city { width:50%; } #country { width:20%; } #years { width:30%; } /* this is to make the demo look pretty */ 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; }

Show me!