Web Page Layout Debate: Tables vs. CSS

[mouser]

The AppScout website is a nice daily blog that doesn't get mentioned enough on DC.  Today there was a nice entry about some recent competing thoughts on using css vs using tables for laying out web pages.  I've had enough experiences cursing out css to consider myself in the camp that is not convinced that css is the holy grail..

This is all a lead-in to the pissing match in-progress between two groups of web developers. It pits tables against CSS (cascading style sheets). The prevailing wisdom has been tables are bad for you--bad for the environment. Using table is like smoking cigarettes... in a nursery school. CSS is touted as a much more elegant and controllable method (even though it isn't) of design. In 2009 only a schlemiel would use tables...
And then he proceeds to compile a laundry list of the largest most unbreakable sites around--and they're all using tables! Ron Garret adds a little fuel to the fire with point-by-point examples worthy of a closing argument on Law & Order (though on an otherwise awful looking page) showing CSS break where tables thrive.

http://www.appscout.com/2009/02/a_battle_rages_over_tables_ver.php#more

The blog entry is pretty brief and points to the following essays arguing for using tables or css:

• http://iamelgringo.blogspot.com/2009/02/tables-vs-css-css-trolls-begone.html
• http://www.newmediacampaigns.com/page/why-css-should-be-used-for-layout

[nudone]

css 3 tables will be taking over - eventually. that should help resolve a lot of css hate.

[housetier]

I have an advantage over mouser: I do not care if a page works in IE. Therefore I can use css as much as I want for layout

[justice]

I was under the impression that the css way won a long time back due to accessibility reasons. CSS is not a holy grail but neither is tables. I just prefer simpler pages.

[40hz]

IMHO, the advantages of using CSS are somewhat exaggerated. I don't think it has an overwhelming advantage from a design perspective.

From what I've seen, you can just as easily do bad page design with CSS as you can with tables.

I think search engine optimization is the only real argument that can be made for preferring CSS over table layouts.

[f0dder]

40hz: or using mobile devices... or text-based browsers.

[justice]

or rejigging layout for printing without a seperate print page for every page on your site, or for redesign.. and it's degrades gracefully.
I can recommend Designing with Webstandards if you want to know more / open your eyes to this css over tables discussion. The whole first part of the book deals with the WHY question in an excellent writeup.

The only reason not to use it is because it can be more effort, but only in certain cases. designing for css layout is not more work than tables. What is the new information that causes this debate all over again? the benefits have been proven.

Why use Cascading Style Sheets?

  1. By editing a single CSS file, you can make sitewide design changes in seconds.
  2. CSS lets you output to multiple formats quickly.
  3. CSS lets you use logical names for page elements. You can, for example, give a DIV the name "header", or a H1 the class "headline". It's self-describing.
  4. External CSS files are cached by browsers, improving load time.
  5. CSS eliminates the need for messy code -- namely font tags, spacer gifs and nested tables. This improves load time and makes developers' lives easier.
  6. CSS lets you do things normal HTML doesn't. Examples: better font control, absolute positioning, nifty borders.
  7. Practical use of CSS encourages proper HTML structure, which will improve accessibility and search engine placement.
  8. CSS's :hover PseudoClass cuts down on the need to use JavaScript onmouseover calls.
  9. If you want valid XHTML Strict you have to use it anyway

more info at http://css-discuss.incutio.com/?page=WhyCss

[Gothi[c]]

the benefits have been proven.

Yes, the benifits are real, so are the nightmares. It's a tradeoff either way. Both systems suck. I vote for a 3rd option. Someone wake me up when there is one.

[justice]

flash

[Gothi[c]]

Noooooooooooooooooooooooo

[Shades]

That is the speed of with which your money will leave your pocket. Is it not for software to create the Flash (whatever), the designer (home made flash just doesn't look that good), vendor lock-in, the costs of the extra generated traffic.

I'm no fan of flash, especially not with my heavily taxed "information secondary road" (50 USD for 128Kbit/sec). 

[f0dder]

link=topic=16897.msg149801#msg149801 date=1233869074]

the benefits have been proven.

Yes, the benifits are real, so are the nightmares. It's a tradeoff either way. Both systems suck. I vote for a 3rd option. Someone wake me up when there is one.

How much does CSS suck, though, when you're designing simple & clean layouts, instead of being moronic and trying to do complicated & pixel-perfect layouts? People (not saying you're part of that camp, Gothic!) should realize that web != DTP and stop overdoing the stuff.

[Gothi[c]]

Well, I don't like to do pixel perfect layouts really, I prefer to work with relative sizes such as em or %. (ie, flexible layouts.)

I guess what bothers me most is the boxing limitations (hacks required to center something vertically, or to have a column fill the whole page, while wildly documented, are ugly and redicilous in the fact that they are even required at all) and then mostly, inconsistencies between browsers.

The boxing stuff seems like it would be fixed in css3, if it ever comes out. Though I'm not sure if the proposed solution is the best one. At least it is A solution, nevertheless.

The browser inconsistencies can't be blamed on css, but should really be blamed on the browsers, I guess. What bothers me is that lots of the proposed 'hacks' to 'fix' lots of the issues don't even validate as valid css, because they are browser-specific things implemented next to/on top of the standards (IE does a lot of that).

I simply refuse to implement stuff that doesn't validate, because I feel I shouldn't have to.

Then you've got the overlapping text issues you can have, or floats that don't behave properly when text is sized to extremes (big or small).

An ironic example, is a web page that tried to argue how CSS is superior to tables, since tables 'print better'.
While it is true that you can easily switch css templates to a non-color printer friendly style, irony has it that when i went to the print-preview of the page, i saw this:

http://linkerror.com/stuff/from_the_nelson_dept(ha-ha).png

Yes, when printing, the text just went all over the place and started overlapping. Needles to say, I was not convinced - If the very same page arguing the better printing, doesn't even print right (yes it was pure css layout), then where are we at?

I feel lots of the css evangelists, like css so much, because it does have good ideas behind it, and a lot of it truly is pure beauty and freedom. However, the actual implementation (in browsers) is very much a horrible mess.

All in all, I really do find that with tables you have more certainty that your layout will stay where it is supposed to, and not wrap around, or start overlapping when things are resized too much or whatever, and you can make a flexible layout that stays in place no matter what, regardless of the complexity of the layout, very easily... But that's probably the only thing they have going for them. All the disadvantages argued against tables are valid. But I do feel that the layout, boxing, placement of things on a website, and having these things stay consistent, is a very important thing. And if this thing is complicated to the level of needing hacks and un-validating code, then I find the solution a mess.

I can't help but conclude that tables are messy, css is implemented messy. The www is messy, and imho, has a lot of maturing to do as far as standards and consistency.

[justice]

You don't need to apply invalid css to fix things in internet explorer, use conditional comments and then set styles that work just for ie (or specific versions of ie).

[Gothi[c]]

I don't want to have to create separate styles to applease a specific browser. That's the point I'm trying to make.

[sri]

For those struggling to make CSS-only designs that work in all major browsers, you might want to use a CSS framework like http://960.gs/

If anyone's interested, I can share links to couple of walk-through practical usage examples of 960 framework.

[f0dder]

link=topic=16897.msg150076#msg150076 date=1234051591]
I don't want to have to create separate styles to applease a specific browser. That's the point I'm trying to make.

And this is sucky. The browser incompatibilities are imho partially the W3C's fault, though - they ought to have written a reference web-tech rendering engine. And of course MS should also be bashed for being so slow at fixing IE