Tables vs CSS: CSS Trolls begone

First mistake, drinking the CSS Kool-Aid

Several weeks ago, I started designing the layout for my threaded comments on a social news site that I'm building. I had created a down and dirty layout using nested tables. It was ugly, and used nested tables but it worked.

I was then paralized by guilt. I couldn't let the nested tables go. I figured that I had to take the time to layout the site properly using CSS and Div tags. I figured this would give me a chance to get up to speed on current web design best practices and to learn more about CSS. Besides, Reddit models their threaded comments in CSS, how hard can it be to model a tree structure out of nested div tags? I believed what I've read online about CSS, web standards, semantic purity, screen readers, blah, blah, blah...

I drank the Kool-Aid, and I woke up two weeks later with a broken design. I had a headache from banging my head against the CSS wall. But, it simply couldn't be a problem with CSS itself. The problem had to be that I didn't understand CSS well enough. The answer had to be that I was bad, lazy or I didn't care about web standards or something. The internets had told me so.

But like a shaft of light in a dusty attic, a single comment by Nosredna on this thread changed my web designing life forever.

Want to see gratuitous? Go to Google Finance and use Web Developer Toolbar’s Outline->Outline Tables->Table Cells to show all the crazy ways Google is using tables for page layout.
.
iGoogle? Yep. For real table things, but also for layout, like that new sidebar to the left.
.
Twitter? Yep. For rough layout.
.
Google News? Yep. For layout.
.
Amazon? Lots of tables for layout.
.
Sure, you can say all these pros are lazy are dumb if you want, or we can try to improve the situation as we all learn to use CSS better. It’s going to be gradual.

I want my money back

As I read web design forums and blogs, it seems that the Divine Essence itself has given us CSS standards and Div tags. Any one who would dare to use a table for non-tabular data in their web design is committing a sin against humanity, Love, Art and all that is good. Tables violate all that is semantically pure in this world. CSS is the new way forward, CSS is progress itself. Tables kill kittens, ponies and unicorns with each misguided use. Any and all problems are not the fault of CSS, it is the fault of the dark and sinister overlords of Microsoft who stubbornly refuse to bow to internationally recognized web development standards.

Prompted by Nosredna's comment, I did some research. What I found has shocked and outraged me. How could the internet mislead me like this? I want my money back.

My research on Table usage

I used the Firefox developer toolbar to take a look at the frontpages of the top 20 Alexa sites. Please try it yourself. Install the FireFox developer toolbar extension. Then, for each page, click Outline->Outline Tables->Table Cells. Then go table-hunting.

For the time-constrained, I submit to you the results of my highly scientific research:

• Yahoo: Minimal Use of tables. I found a picture of Hugh Downs horizontally aligned with it's caption in a table
• Google Home Page: Not only does Google use tables for it's iconic home page, it embeds styling in the <td> tags. The horror.
• YouTube: Uses tables for of layout of videos
• Windows Live: Uses tables for footer layout
• MSN: There is one table, but it's only for stockquotes which is tabular data
• MySpace Semantically pure. MySpace. Whoda thunk it
• Facebook: Does form layout with tables
• Blogger: No tables anywhere on the front page
• Orkut All tables all the time
• Rapidshare: A table with a single <td> for header placement. And again a single <td> table for the central "browse" section. Tsk tsk
• Microsoft: Navigation bar is a table. What did you expect? Unicorns and rainbows?
• Google India: It's the same Google layout. I wonder if they used copy and paste for the template?
• Ebay: Tables, tables every where
• Hi5: Tables for every thing, pretty much. BTW, I didn't even know this site existed until last week. Alexa rank 14!?
• Photobucket: Tables for photo gallery layout
• AOL: AOL's layout is semantically pure! Friggin AOL?
• Google UK: Same GOOG layout. I'm now sure the copied an pasted their html
• Amazon: Now that's just silly
• IMDB: They used tables for their 3 column layout. What! No CSS framework?
• Imageshack: Semantically pure as the driven snow.
• Finally, even though it's not on Alexa's top 20, log in to your Gmail account and look at
  the use of tables

My Hypothesis: Pure CSS design == overcompensation

So, the five companies that use CSS are the web powerhouses--MSN, MySpace, Blogger, AOL and Imageshack. MSN, MySpace and AOL have been maligned for years throughout the web savvy community. My hypothesis is that these companies are overcompensating for the crap that they've taken thoughtout the years by designing their site in pure CSS.

Other companies that have more web street-cred like Google and Facebook don't really have to worry about how the web design community sees them. This leads to things like Google making extensive use of inline styling on their homepage instead of putting it in their stylesheet. I've never heard anyone claim that the Google folks are slouches at the web design/development thing. Why is that?

CSS Trolls, Begone!

So, I don't ever want to read how web designers who don't use pure CSS in their layouts are lazy, stupid, don't care about their craft, backwards or don't bathe properly. Never again. People who post such things online are heretofore to be known as CSS Trolls and are to be banished from the internets for all time. Begone yea vile fiends!

What I've learned

I suppose I should have listened to the Perl and Lisp guys. The attitudes in those communities tends to be--just use the tool that gets the project shipped. It might be ugly, but it works. They practice what they preach, too. Just look at the table usage on the Perlmonks site or Paul Graham's Hacker News with the developer toolbar.

So, I'm going to give up and use tables. It's going to take me all of 45 minutes to undo the last two weeks worth of CSS work. I'm going to launch my site. And then, I'm going to go and get a donut.

Anyone else find joyous and flagrant table based design? Please post links in the comments.

Update:

1. I'm not against all CSS. I'm against CSS trolls. And, by trolls, I mean people who post nasty comments about someone who disagrees with them on whether to use tables or CSS.

2. I haven't given up on CSS for good. I did give up and use tables for one part of one project. I will give up and use tables a lot more frequently. I'm positive that 75% of Alexa's top 20 sites agree with me.

Update 2:

My apologies to the devs at the 5 companies that were able to use a pure CSS layout. My snarkiness was more a function of my frustration with a technology, a specific form of trolling and trying to write an entertaining blog. That should in no way detract from the technical achievements you've accomplished. The "overachievement" bit was out of line. Much respect.