Simon Willison’s Weblog

Weblogs table as an ordered list

Dave Winer:

A question for CSS design gurus. What’s the best you can do with a table that has three columns like the one on Weblogs.Com. Let’s see an example. I’d like the page to look good and load fast. Postscript: No one seems to understand -- I want to do weblogs.com without a table. Column 1 is the number, column 2 is the name of the weblog. Column 3 is the time it last updated. Look at the page.

At first glance this seems an odd request—from a semantic point of view, the data on Weblogs.com is tabular in nature and would seem like a fine place for a table. I imagine Dave’s request relates to performance—I don’t know if modern browsers still refuse to render tables until they have loaded all of the content but if that is the case then the Weblogs page could be pretty slow on a narrow-band connection. In any case, the data on the page could also be interpreted as an ordered list. I can never resist a challenge so I had a go.

I’ve tested it on Phoenix 0.5 and IE 6 on the PC and it worked fine. However, I would be surprised if it worked flawlessly on all modern browsers as it makes heavy use of an absolutely positioned element inside a relatively positioned element. As a result, the data is probably best left as a (perfectly semantically valid) table.