Tables Vs. CSS - A Fight to the Death

The first time I surfed the Internet it was through a dumb terminal. After a short while, its monochromatic screen was spewing out the full script to Monty Python's "Holy Grail" from a server in Minnesota. It was nothing short of magical. We had no mouse, no fancy interfaces and certainly no 24-bit color. Gopher ruled all. To search, we used Archie and Veronica. No one had heard of the World Wide Web. For a while, that seemed to be enough.

After some time, strange code started polluting all my searches. I could read the pages through it, but it was still very annoying. I had already learned to filter it as background noise when someone explained to me that this was HTML, a "graphical language for the Internet". I was taken to a computer that could display a whopping 256 colors and shown one of the first versions of Mosaic. Nothing was ever the same again.

We have come a long way since those days. There have been incredible advances in technology, and the face of the Web has been revolutionized, rethought and remodeled more times than I can count. Since I started work on Web design, I've worked through table-based design, JavaScript woes, CSS growing pains and most importantly, the emergence and widespread adoption of Web standards.

The problem with the Geek Internet was that it was created with geeks in mind. There was no place for background colors and fancy images -- just content. Sweet content. It's hard to argue with that ideal, but the truth is that we all like a little pizzazz in our surfing. Along came the table to solve our dilemma. Finally, we had a controllable way to produce layout! This sealed the deal. We started working out ways to cheat the system. Can't have a solid 1 pixel line? Just throw a spacer GIF, background color and more table cells in there and you're set! Can't control typography? Use another <font> tag!

I'd been designing like that for years when CSS and standards came my way. It was different, it was efficient, and it was sexy. I embraced this philosophy deeply and intensely. Here was something that appealed to the coder in me, producing lean, mean code that separated layout from content, while still leaving space for beautiful design. I simply fell in love with it, and haven't looked back since.

Until now.

Much is being said about standards and CSS. Like every good buzzword, they're being hailed as the next big thing. It started with Douglas Bowman's redesign of Wired, and went from there. In 2003, Zeldman wrote Designing with Web Standards, and we all saw the light. Designers everywhere are embracing this new direction. It's syntactic. It's semantic. It's speedy and lightweight.

Then again, there are a lot of people who still call the spacer GIF their friend. They still work with tables. Some even use the <font> tag. They say it's easier, better supported and faster to develop. Who's right? Is there even a right position to take here?

I took it upon myself to conduct a little experiment of my own to see how things has changed, and if we've ended up the better for it.

The challenge:

1. Produce a comp for a hypothetical site design in an image editing program.


2. Match the design using HTML 4.01. Make it standards-compliant (because we should have some kind of metric for this highly subjective experiment, after all). Do it with tables. Do it without CSS.


3. Match the design using XHTML 1.0 Transitional. Code for usability and accessibility. Use CSS. Shun tables (unless the design has tabular data).


4. Document impressions through steps 1 to 3.


5. Examine pros and cons. What have we gained? What have we lost? Where do we stand?


6. Achieve Nirvana!

Stage 1: Design Your Site

I start out by making the dummy for my design. I'm working for a fictitious group called the Butterfly Watchers Association. They are probably the best client I've had in that they have no input into the design process. Unrealistic though that may be, I'm trying to come up with something that would, indeed, appeal to such a group, so -- stereotyping my target audience -- I go for a conservative layout with classic typefaces.

I want this to be a tight little number, effective and to the point. Moreover, I want it to have butterflies. I can't do squat without some butterflies in there, so I start by looking for an image to lead the way. I find it in no time at stock.xchng. The blue butterfly on the leaves practically dictates the site's color pallete. After some cropping, contrast boosting and selective masking, the image is ready to be our header.

The coder in me always forces some accessibility foresight into the design process, so I'm trying to keep images in the end product to a minimum. Hence, after playing around with Garamond Smallcaps for a while, I decide to go with Georgia for the navigation, accepting it as a suitable substitute (worst case scenario: Times New Roman in all caps looks good enough if the client machine doesn't have Georgia). I leave Garamond in the header, though, because the header will be an image, and because I find Georgia's "C" spur downright offensive for this particular part of the design.

I go with Trebuchet MS in a dark gray for the text and Verdana for the news because it looks great in small sizes. There are written and unwritten rules about using four typefaces in the same design. Most of them agree on the fact that you shouldn't, but I'm feeling foolhardy today.

In my extremely limited knowledge of butterflies and the people who watch them, I figure that a Sightings section to highlight rare butterfly spottings would be an interesting thing to mention on the homepage. The group could also use more butterfly watchers, so we'll throw in Membership info. For any sufficiently large organization, a News section is de rigueur too, so I add one. Next, a copyright notice (because client is picky about those things), some custom pixel bullets and ornaments, a snazzy slogan (They flutter. We watch them.), and a two-column layout with horizontal nav under the header, and we've nailed this. To finish off, I highlight the "About" part of the menu to show how the rollover should look. Here's how it looks.

Nice. Now, on to the code.

Stage 2: "Back in my day, we used gajillions of spacer GIFs, and we liked it!"

If you've been a Web designer for any significant amount of time, you may be painfully familiar with the following construct:

<table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="center" width="200">
 <tr>
   <td colspan="3" bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
   <td bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td>
   <td width="100%" align="center">Content goes here.</td>
   <td bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
   <td colspan="3" bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td>
 </tr>
</table>

In table-speak, that's a box. Get used to it, because that's our basic building block. All the usual suspects are there: spacer GIFs, gratuitous use of table attributes, forceful specifications of width attributes and colspans. There's something to be said about this box: it's solid. They don't make 'em like this anymore! This baby could be the poster boy for downwards compatibility! No puny CSS box will stand up to the kind of abuse this guy can take from browser rendering engines...

But, I'm getting ahead of myself. Let's get on with the blow-by-blow account of the design reproduction process:

Hour 1

Wow. This is almost like going back in time. How did one go about specifying background colors without CSS? Oh, yeah... bgcolor. Thank goodness for code-completion. Ok. Make box. Preview. You mean I can specify align=center and this thing is actually centered in all browsers? Well, that was easy!

Tables aren't half bad after all. I feel like I've found a long-lost friend. I have half a mind to take up smoking again if it feels this good. One spacer GIF and I'm Master and Commander of my own design... Yessir, it's lovely. Work's picking up speed. I like tables!

Where did that ugly whitespace between the header and menu come from?

I didn't put that there! Oh, yeah... Explorer's rendering engine does that when there's whitespace in the code after images.

Ok. Remove the whitespace in code... that was easy.

Hour 2

How long has it been since I've used JavaScript to make a rollover? This is like remaking Nosferatu without using a bluescreen. The temptation is there, though. Max Schreck would definitely look better when carrying that coffin without all that stop motion jitter... Oh well. Let's do it for historical accuracy.

<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>

As for the JavaScript:

function chBg(obj) {
   obj.bgColor = "#E1E5DB";
}
function chBg2(obj) {
   obj.bgColor = "#CBD1C3";
}

That'll do it.

This is coming along quite fast, considering I was a bit rusty. I wish I had a better way of manufacturing padding than nesting tables, though. This code is starting to look a bit complicated. I should add some comments so we can find our place in there.

What do you mean I can't eliminate the underline of a link without using CSS? That can't be right! Let's Google for this stuff.

Hour 3

That can't be. How the heck did we make non-underlined links back then? There must be a way!

Hour 4

Ok. This sucks. I'm not turning the darned menus into images just because I can't remove the underline. I'm not making a JavaScript redirect just because of this, either. Google hates JavaScript redirects. It loathes them. I'd be making most of the site invisible to robots, and we can't have that. I set the rules for this experiment, so I can break them. Besides, this particular bit of CSS has been around since the invention of soup. That's it... let's just put style="text-decoration: none;" in the link, and we have our non-underlined menus. Yay!

Oh, well, we're almost done. And it's nice to see that we can make actual dual columns that stretch all the way down. Take that, CSS! It would be nice to have a way to frame an image that didn't involve using two tables, though...

Here's where we're at.

I don't want to tell the Butterfly Watchers that they'll have to pre-format their butterfly pictures with the frame. This will be a changing image, after all.

Just realized I haven't previewed in anything other than Explorer 6 for over four hours. This is going to be ugly... I hit the preview button and everything looks ok in Firefox. That can't be. I launch Opera. Looks great. I had forgotten this! This is beautiful! And it works in Netscape!

Hour 5

So... much... code. Keep... losing... place.

While working on the news section, I realize that the <font> tag controls for text size are extremely limited. I just can't get the size to match the one I used in the comp. The <font> tag is evil. It should die.

The text bleed on the news is not achievable without some sort of table chicanery. Padding is the bane again... But it's nothing we can't solve by throwing more tables in there.

I end up inserting more tables around the butterfly image in the text to simulate a float. I feel dirty.

Hour 6

Design is finished. It looks quite similar to the comp, as you can see here.

Want to see how many tables are in there? Check this out. See the source. This is hand-coded. It's as clean as it gets when using tables.