CSS vs Tables: Both are winners
July 8th, 2008 . by polyGeekIn response to a post question I’ll give my two cents regarding CSS vs Tables. First let me say that I’ve done quite a lot of UI coding. I’ve coded my own designs and lots of designs from other designers. I’ve also been doing this since before CSS existed.
My impression is that the biggest argument against CSS is, “what happens when a user has a browser that doesn’t support or render CSS correctly.” That was a real concern about 5 years ago but lets face it, today that really can’t be a concern. I think that as coders we feel this compulsion to make our shit work everywhere, all the time. I would urge anyone to resist that urge. There is such a thing as diminishing returns. What’s the point in spending 50% of your time - or more - trying to get something to work right for 5% of your potential audience. (I’m just throwing out numbers here.)
One downside to a pure CSS approach is that it’s not much good at placing things 2000 pixels below the fold. I’ve been to sites that over use CSS and I can tell because I change my default font size to make it easier to read. What happens on these sites is that the text begins to run under or over images and adds. It makes it a bit of a pain to read.
I would simply say use both CSS and Tables. Here’s the general layout I did for a hospital in Manhattan:
For SEO reasons it’s good to get the content as close to the top of the page as possible - I’m talking about the code, not pixels. This may not be the issue it once was but search engine algorithms are changing all the time. I’d say error on the side of caution. Don’t give a spider 200 lines of code to wade through before getting to the meat of the page. In order to accomplish this I made a table with two columns - leftNav/content - and two rows - banner/logo at the top which spanned across the two columns and then the leftNav/content row. You know what I put in the banner and leftNav cells? A transparent.gif. That’s it. So the spider would get to the <body> tag and read: table cell with an image, another table cell with an image, and then the good stuff: content.
At the bottom of the page were <divs> that contained the code for the banner and leftNav. Those divs used absolute positioning to place them at the top of the page. Note: we used images for our leftNav - against my recommendation. If you have text links it might be beneficial to have them closer - code wise - to the top of the page to give the spiders something to eat before the content.
Another reason to use CSS is if you are coding for another designer. I can tell you this: designers design. If they have time on their hands they will tweak their designs. In other words, “designers can’t make up their frakking minds.”
So you can guess the drill: designer gives me a Photoshop file to break out into code. I look at it and judge it to be pretty simple so I hammer away with <tables>. A few days later the designer sends and email with a “tweaked” layout. I look at it and slap my forehead. Yeah, they only moved things around a little but it completely fraks up my table layout. Shit, I should have used CSS.
Moral of the story: when in doubt use CSS as much as possible when there is a chance that the design might change. By my calculations that’s ALWAYS. Think of it this way, God created the earth, et al. and by all accounts he’s a pretty bright guy. And even he redesigned his creation with a flood. So if God had used CSS in the first place then maybe he could have just wiped out the bad parts and kept the good parts. He could have put all the “innocents” animals and children and such in a separate <div> from those mean old humans. Even the humans could have been kept in separate <divs> depending on their . . . okay, I digress. 
So, after all this blah, blah, blog what have I said? Lets see: use as much CSS as you can but when you need a <table> use it. There is no layout god out there that will smite you for it.
Hi, I adore tables, mainly because as a designer and builder of sites I can get the site looking exactly as I want it and know that it will work on any ficking browser. With CSS however, its such a shit language (reminds me of the first incarnations of quark express) that you can’t get pixel perfect results without numerous hacks, and who can be arsed with that. basically if a design changes after build time its ficking chargeable!!! stick to tables for layout, and use css for everything else.
@aiff, you know what, I just redid the theme on my blog at polyGeek.com to use Tables for the layout instead of relying on CSS because of the reasons you mentioned. I think CSS-positioning works like crap.
Leave a Reply