Monday, February 02, 2009

Why CSS should not be used for layout

I wrote an essay about why CSS should not be used for layout. Unfortunately, I can't post it here because it relies on a whole bunch of embedded HTML and CSS. But I'm putting this entry up here in case anyone wants to comment on it.

You can also weigh in over at Hacker News.

255 comments:

«Oldest   ‹Older   201 – 255 of 255
daniel said...

I realize I'm late to the comments here, but I came across your article just now. Let me tell you...

You are spot on. I've been a web developer for a long time and I welcomed CSS so that I could be free from tables and tag soup.

CSS is still great, but for layout, tables do naturally what CSS can't do very easily if at all. Amazing how many people defend CSS for layout and assume you don't know what you're talking about. I've been there, done that, and I can tell you that there are so many things that are just impossible to do with CSS or nearly so.

If people are defending it that vigorously, maybe they've just not been required to tackle any serious web work where content can be dynamic and the layout is complex and needs to be just so.

Thanks for posting this. I hope it lets other people see the light. It's starting to change my mind about how I develop for the web. (Even now I still try to fight with CSS to get my way).

Ron said...

> I realize I'm late to the comments here

Indeed. This post is from last February! And while I really appreciate all the attention, I really think that this horse has been well and truly flogged. I never knew that Blogger starts to paginate comments after the 200th one!

Out of curiosity, how did you find out about it? I'd really like to know what's giving this particular article such legs.

Will said...

It's got legs because it's right. Anyone who has tried to deeply understand layout with CSS knows it's right. As far as I'm concerned, the issue can't be flogged too much - keeping the matter current is the only way to help advance the state of the art.

I stumbled into the article because a link to it was posted on a private beta testing forum when one of the members of that small group was reacting in frustration to a matter related to CSS.

Mark said...

I think this debate is an awful lot like the Mac vs. PC debate, equally as pointless, but just as fun to discuss. However, comments like this, "CSS is still great, but for layout, tables do naturally what CSS can't do very easily if at all," are simply false. If designing a Web site was like designing for print, then yes, that statement would be true. However, contrary to popular belief (apparently), Web sites and how they are designed are completely different than print design. When designing for print, you select the medium, and it does not change. When designing for Web, you're dealing with a number of potential mediums, i.e. screen, print, handheld, aural, television, etc. Tables are static and CSS is dynamic. Why would you want to use a static method of building a site when you have a multitude of dynamic devices in which it may be viewed? If I want my Web site to look different when it's printed, it's an easy addition of a style sheet where the media is defined as "print." But if your site is built in tables... good luck getting all of the content that is side-by-side to print on a page without it getting cut off, or without squishing it to fit the page.

"I can tell you that there are so many things that are just impossible to do with CSS or nearly so." This, again, is another incredibly false statement. Anything you can do with tables, you can do with CSS. That's how it was designed. What's more, you can do so much more with CSS than you can with tables. That's the truth of it, and contrary to popular belief, you can do a lot of things with a tabless design that will still work in older browsers. You just have to have a good understanding of how tabless design works, and you don't even need JavaScript (I RARELY use JavaScript).

I've built tabless Web sites for Target Corporation, and every single one of their corporate computers is running IE6. Yes, you're limited with IE6, i.e. transparent pngs don't work. But virtually everything else you could ever want to do, will work, if you code it properly.

"If people are defending it that vigorously, maybe they've just not been required to tackle any serious web work where content can be dynamic and the layout is complex and needs to be just so." Are you kidding me? Name one way that tables are more dynamic than CSS? Go ask the guys at Google, go ask the guys at Facebook, go ask the guys at Amazon, and I bet you won't find a single person who is a die-hard tables-only designer. Look at the code, they use SOME tables, and I'm not advocating not using tables at all, but for the bulk of the sites, they're using a tabless design model.

Building a site in a CSS-based/tabless design is not difficult. In many ways, it's easier to design and especially redesign, and even design for a multitude of devices. If you're still having trouble with it, don't get discouraged, it can be done. If you have to build a site in tables, or if the client's requirements require tables, then fine, do it. But don't go around espousing lies about how tables are so much better than CSS, how CSS can only do a fraction of what tables can do, and how the people who defend CSS haven't had to "tackle any serious Web work, where content can be dynamic and the layout is complex and needs to be just so." I've built Web sites for Target, Peopleclick, Aveda, HelmsBriscoe, Craig-Hallum, KBS Pro Cycling Team, Sororities and Fraternities, Musical Groups, etc., many in which I utilized a tabless design that worked in all common browsers, and all without the help from "hacks," and/or JavaScript. And it really wasn't that difficult, and that's because I've actually took the time to really understand how CSS works and about Web standards.

Pherdnut said...

"Due to the fact that CSS makes no provision for lateral positioning, hacks have to be employed - like floats."

Actually, it does. Microsoft simply decided not to support it for ten years. Not that it would be relevant if tables were ever more practical, which they never are.

I work for a very large retailer now. We have a crapload of front end developers and not one of us dissents on the table issue. The second some third party or offshore amateur starts polluting our site with that stuff they get shut down hard for a reason.

In the "real world" you'll never be anything but small business competitive if you think otherwise. It's not snobbery. It's just kind of a 'duh' thing when you know the CSS well enough.

Mocking up is faster and easier. Reading other people's code is faster and easier. Adding and debugging dynamic behavior is faster and easier. SEO is faster and easier. Validating is faster and easier. Figuring out what's broken as a result of one tag being left open when you don't have the option/time to cut and paste into another HTML doc and then validate because of all the invalid third party junk is MUCH faster and easier.

We had this argument in like 2002. Tables lost.

Will said...

This "debate" always seems to blend two issues into one, thus blurring the real culprit.

The concept of HTML tables comes directly from HTML's mother, SGML. If you know SGML, you know that it is a means of describing content, not of describing layout. Just as with HTML, it was the user agent (e.g., TEX) that determined how to render the content. Table tags were unusual because their rows & columns communicated organization. That organization should not be confused with layout - two different SGML processing systems could lay out the table in different ways.

When SGML was first standardized in 1986, the target for layout was paper. The graphical user interface was just emerging and the Web did not exist.

So the fact that tables can be used for overall page layout belies the fact that tables were never intended to be used for this purpose. We enterprising computer folk simply figured out how to use them in that manner. Thus issue #1 is that tables evolved into something beyond their intended design and for which they were not particularly well-equipped.

The second issue is that while CSS addresses formatting pretty well it addresses layout less completely. Worse, to many eyes, it addresses layout in ways that are not obvious, my favorite example being handling the centering of layout elements through the margin attribute. My evidence for this state of affairs is the enormous amount of material on the Web about how to do positioning, much less full layout. This huge volume of material never emerges when something is obvious.

I agree with the comments here that say the debate about tables was settled long ago - I say 1986 when the SGML spec was ratified by ISO. Tables are not for layout, they are for organizing tabular content into rows & columns.

I do not agree with the comments here that say CSS is superior to tables for layout. If that were true, this debate would simply not have legs. CSS is at least incomplete where layout is concerned and at worst bad at it.

Finally, I agree with the comments here that CSS is a better, more understandable tool. While it lacks clarity for layout, it offers inumerable benefits for Web developers and has more than proven its worth.

So while I agree that CSS bungled layout, I would not turn to tables instead.

Thomas Xavier Gilberto said...

I think web designers should use whatever design they feel comfortable with. I prefer to use tables to lay out my pages and have occasionally had to make use of CSS to create an extra special feel. As for the guy who says CSS is computer programming, you obviously know nothing about programming. Web designing is not programming!!!

whitehawke said...

I was under the assumption that the moderator closed the string - I think it is still a hot topic. I think "why CSS should not be used for layout" is a irrelevant as "Why tables should not be used for layout".

And yes, I agree that designers should use whatever system enables them to deliver the finest outcome for the client who, by the way, doesn't give a rat's ass about formats.

It is true that CSS structures are not read by bots but any code has to be read to be parsed into a page. So even though the bot's don't read it the browser must parse it all to render a page. Since CSS structures are not read by bots it is true that CSS is slightly more "search friendly" - so it is the search engines that are pushing the CSS to lighten their immense load.

It is also true that many of the tekkies that use CSS fail to master digital imaging and include unoptimized graphics that make the page ten times "heavier" than table code.

I also find that after the fact page changes can be just as confusing as table pages if you don't comment different sections of the page.

Using a single table structure is very efficient. You can literally carve out a complex single table in Dreamweaver, then clean it up manually, comment the zones and have a very lean and edit-friendly site. The zones can be CSS controlled and CSS will be doing what it was designed to do - control styles. Despite what the tekkies say neither CSS nor tables were initially designed for layout but rather expanded upon to handle new demands.

One thing that is overlooked here is tables are more reliable. They display the same in all browsers without hacks and scripts.

After all that, I now design CSS sites and have an advanced command of it because I am paid to do so. I still use a table for long forms because it is more cost effective for the client. I do not denigrate the use of tables - that is elitist horse shit.

ChristianZ said...

"I still use a table for long forms because it is more cost effective for the client. I do not denigrate the use of tables."

That is fine as long as you see that the fact remains that there are proper uses for them and improper uses for them. Yes, tables can be used for forms, and that is allowed by the W3C as forms ARE one example of tabular data.

http://developer.cmzmedia.com/?p=71

Ron said...

> I was under the assumption that the moderator closed the string

No, I have a policy of publishing any comment that isn't spam and isn't obnoxious. But I do think this thread has dragged on much longer than it should have. The original post was in February! So unless you really have something new to add to this debate I'd appreciate it if you all could just give it a rest. I appreciate the lively discussion, but enough is enough.

Geoff said...

@Ron

Please keep this topic open as being new to using CSS coming from Frontpage 2002 and going to Expression Web 2 and having too much work at present I am learning from reading the blog.

Geoff

whitehawke said...

This blog has a page rank of 4 - so it must have sense of value. Why not let it proceed as long as there is interest??

Ron said...

OK then. Who am I to second-guess my adoring fans? ;-)

ChristianZ said...

If people have something new and valid to add then it should be added. Hopefully we don't get more redundancies though.

When we have books that have been influencing people for hundreds of years I always wonder why people think their blog posts lose value at about three months and should never be looked at again or commented on. And I'm not really talking about Ron, since he is keeping this open, but so many other people have that attitude.

Ron said...

> Hopefully we don't get more redundancies though.

Amen. Prospective commenters, take note: I'm going to start taking a slightly heavier hand at editing out redundancies.

> When we have books that have been influencing people for hundreds of years I always wonder why people think their blog posts lose value at about three months

Speaking only for myself, it's not so much that the posts lose value, or even that it's been three month. It's more that after 200+ comments most of the worthwhile things that can be said about a post have been.

whitehawke said...

Funny thing about blogs and relevancy. When there is dissent, the new topic may become the relevancy of the dissent, which becomes relevant in and of itself.

If I created something popular on the net I would remain the whore I am, service the mark, collect the money and go gargle.

whitehawke said...

I have an alternative for people who want to use a reliable table backbone with CSS control. It involves creating a single table in Dreamweaver, cleaning it up manually and regulating all zones (topNav, sideNav, header, etc) via CSS.

You can change any attribute site-wide from the style sheet. The only vestige of table design is a rock solid single table that can be crafted into unique and exotic regions in minutes.

People who use CSS for layout routinely use the same backbones over and over with different colors and text styles (self included).

With this you can create zones that span the entire page under three columns - then a zone with only two columns, etc. A unique frame each time.

This will be possible with CSS in the future (the technology already exists, but the entire public will have to upgrade to the latest browsers {IE 8} or you will have to hack and script).

The only people who can dispute it's application are the obsessively dogmatic CSSers - and I have run into them.

The bottom line; if you are working for clients - deliver better quality for less $$ than your competition.

If there is any interest I will post more details.

whitehawke said...

"That is fine as long as you see that the fact remains that there are proper uses for them and improper uses for them. Yes, tables can be used for forms, and that is allowed by the W3C as forms ARE one example of tabular data."

__________________________________

I get crazy when I see the words "PROPER USE". What the hell is "proper"? In my mind "proper use" is when there are so many regions to line up that you would save the client $500 by using a quick table. Now what does that say? - QUICK!

The W3C denigrated blanks. Why? That is a designer choice, not a technical problem. Who elected them? You can have a voice for $5000 - is that a deal? FOR FREE, designers everywhere said screw W3C and kept using new windows. W3C caved to popular opinion and UN-denigrated it.

One of the main "criticisms" of tables is that nested tables make it hard for "Jaws" (Google text to speach software + blind) to "read" content to blind people. So I eliminated nested and there is still dispute. I'm sorry, but I don't build PRIMARILY for blind users.

Look up the word sycophant!!

ChristianZ said...

"I get crazy when I see the words 'PROPER USE.' What the hell is 'proper'?"

You can go against the W3C recommendations if you want. I suspect we all do it to some degree or another. The fact remains that using tables for the purpose of page layout is still a scotchtape-and-toothpicks method of building a site.

People also have this funny idea of, "If you need to a really quick job for a demanding client then your best bet is to screw the W3C and use tables." But if you really know what you're doing (and it's not as hard as some people make it out to be) it'll be quicker up front and better in the long run to use a CSS-based layout.

Ron said...

> The fact remains that using tables for the purpose of page layout is still a scotchtape-and-toothpicks method of building a site.

That's not a fact, that's an unsupported proclamation.

Here's a fact: Google Groups uses tables for layout. Not just tables, but deeply nested tables. And Groups isn't even in beta any more, so this is not because it's a quick-and-dirty hack. And it's not because the folks at Google aren't smart enough to figure out CSS.

ChristianZ said...

Ron, you need to switch your blog here to tables then.

This reminds me of when I go to my mom's and see that she will close Firefox, then reopen it, check a different page, close Firefox again, reopen it, and go back to her e-mail, ad infinitum. I try to tell her about tabs and how there's no need to do all the closing and reopening she keeps doing and she says, "But I like my way the best and it works for me!!" "You're right . . . it does work. I guess that proves your method is the best possible one."

Ron, what is your take on site maintainability on a site that uses tables for layout? When you need to change the layout do you make the change on every single page?

"Here's a fact: Google Groups uses tables for layout."

I'd be interested in hearing their reasoning behind that. Does anyone know? I've lost job opportunities because of people finding TABLE tags in my markup (for tabular data only) but here the almighty Google goes and uses tables for page layout. I'm also intrigued by their use of the FONT tag, and the CENTER tag, all along with an XHTML 1.0 Transitional DTD. A lot of the info on that page could be considered to be tabular data.

I'm also intrigued by their frequent use of align=left valign=top which could be taken care of in one place in a style sheet, their use of DIVs in addition to TABLEs for layout, their use of class names such as "padb1ex" to add 1ex of bottom padding to some elements, their use of the BR tag to create gratuitous white space, their use of inline styles, their placement of document-wide style sheets within the BODY element, their "onresize" and "onload" attributes added to the opening BODY tag but with no values expressed, their use of the attribute/value pair dir="ltr" in several spots because clearly the document doesn't already know to display English text from left to right, and numerous other such inefficiencies. I'd mention more but there is a 4,096 character limit to these comments. But, hey, if they want to add inefficiencies and code bloat to their own project then they can certainly do so and others can too if they insist on it. Maybe this proves Google secretly used Microsoft FrontPage to build their Groups site.

UVL said...

"When you need to change the layout do you make the change on every single page?"

You think people works with dozen of .htm files like in the '90s?
Never heard about templates? PHP? Databases?

Ron said...

> Ron, you need to switch your blog here to tables then.

No, I don't. You've brought this up before. I didn't write the layout for this blog, it's a standard Blogger template, and it's good enough -- except that it breaks if I try to put in a photograph that's too wide, then spills over into the right column and it looks like shit. But you may have noticed that I don't use a lot of artwork in my blog, so it's not worth the effort to fix. That doesn't mean it isn't broken.

> Ron, what is your take on site maintainability on a site that uses tables for layout? When you need to change the layout do you make the change on every single page?

No, I would use a template. You have heard of templates, yes?

> I'd be interested in hearing their reasoning behind that. Does anyone know?

Yes. It's because the people at Google are smart enough to realize that CSS is b0rken.

> I've lost job opportunities because of people finding TABLE tags in my markup

I sympathize, but just because you have stupid clients is no reason for everyone to start being stupid.

ChristianZ said...

Ron, you're still turning a blind eye to all the CSS-based sites that are not broken. Finding examples of people getting it wrong doesn't mean everyone gets it wrong. Not knowing how to use it yourself doesn't mean nobody knows how to. Having a problem with a CSS template doesn't prove CSS is broken.

"It's because the people at Google are smart enough to realize that CSS is b0rken."

Then why on earth are they using CSS? There's tons of CSS (albeit crappy CSS) on that page. You act like their site is a paragon of perfect web development but haven't addressed all the horrible things I pointed out about the code in their page, unless you're saying, "Sure, they got tons of stuff wrong but they used tables for layout so that proves tables for layout are good. But, yeah, everything else is bad and the way you know what is good and bad about their code there is that you just have to trust what I label as good and bad."

BTW, here's another shining example of code from their site. Get a load of this masterpiece of coding ingenuity from their one external style sheet:

.padall0 { padding: 0; }
.mrgall0 { margin: 0; }
.padall1 { padding: 1px; }
.mrgall1 { margin: 1px; }
.padall2 { padding: 2px; }
.mrgall2 { margin: 2px; }
.padall3 { padding: 3px; }
.mrgall3 { margin: 3px; }
.padall4 { padding: 4px; }
.mrgall4 { margin: 4px; }
.padall5 { padding: 5px; }
.mrgall5 { margin: 5px; }
.padall6 { padding: 6px; }
.mrgall6 { margin: 6px; }
.padall7 { padding: 7px; }
.mrgall7 { margin: 7px; }
.padall8 { padding: 8px; }
.mrgall8 { margin: 8px; }
.padall9 { padding: 9px; }
.mrgall9 { margin: 9px; }
.padall10 { padding: 10px; }
.mrgall10 { margin: 10px; }
.padt1ex { padding-top: 1ex; }
.padt0 { padding-top: 0; }
.mrgt0 { margin-top: 0; }
.padt1 { padding-top: 1px; }
.mrgt1 { margin-top: 1px; }
.padt2 { padding-top: 2px; }
.mrgt2 { margin-top: 2px; }
.padt3 { padding-top: 3px; }
.mrgt3 { margin-top: 3px; }
.padt4 { padding-top: 4px; }
.mrgt4 { margin-top: 4px; }
.padt5 { padding-top: 5px; }
.mrgt5 { margin-top: 5px; }
.padt6 { padding-top: 6px; }
.mrgt6 { margin-top: 6px; }
.padt7 { padding-top: 7px; }
.mrgt7 { margin-top: 7px; }
.padt8 { padding-top: 8px; }
.mrgt8 { margin-top: 8px; }
.padt9 { padding-top: 9px; }
.mrgt9 { margin-top: 9px; }
.padt10 { padding-top: 10px; }
.mrgt10 { margin-top: 10px; }
.padb1ex { padding-bottom: 1ex; }
.padb0 { padding-bottom: 0; }
.mrgb0 { margin-bottom: 0; }
.padb1 { padding-bottom: 1px; }
.mrgb1 { margin-bottom: 1px; }
.padb2 { padding-bottom: 2px; }
.mrgb2 { margin-bottom: 2px; }
.padb3 { padding-bottom: 3px; }
.mrgb3 { margin-bottom: 3px; }
.padb4 { padding-bottom: 4px; }
.mrgb4 { margin-bottom: 4px; }
.padb5 { padding-bottom: 5px; }
.mrgb5 { margin-bottom: 5px; }
.padb6 { padding-bottom: 6px; }
.mrgb6 { margin-bottom: 6px; }
.padb7 { padding-bottom: 7px; }
.mrgb7 { margin-bottom: 7px; }
.padb8 { padding-bottom: 8px; }
.mrgb8 { margin-bottom: 8px; }
.padb9 { padding-bottom: 9px; }
.mrgb9 { margin-bottom: 9px; }
.padb10 { padding-bottom: 10px; }
.mrgb10 { margin-bottom: 10px; }
.padl1ex { padding-left: 1ex; }
.padl0 { padding-left: 0; }
.mrgl0 { margin-left: 0; }
.padl1 { padding-left: 1px; }
.mrgl1 { margin-left: 1px; }
.padl2 { padding-left: 2px; }
.mrgl2 { margin-left: 2px; }
.padl3 { padding-left: 3px; }
.mrgl3 { margin-left: 3px; }
.padl4 { padding-left: 4px; }
.mrgl4 { margin-left: 4px; }

Hello? 1999 called and it wants its code back.

Ron, go ahead and continue to use tables for page layout if you want. If somebody uses CSS on their own site and it doesn't break (and such unbreakable CSS sites are made ALL the time) I hope you are fine with that. If you are unable to learn CSS properly don't let anyone give you a hard time over it. I still have never mastered C++.

Ron said...

> > "It's because the people at Google are smart enough to realize that CSS is b0rken."
>
> Then why on earth are they using CSS?

Because it's not broken for *everything*, just (certain kinds of) layout, specifically, complex layout of dynamic content, which to my way of thinking includes nearly all interesting sites. It certainly includes Google Groups.

> If somebody uses CSS on their own site and it doesn't break (and such unbreakable CSS sites are made ALL the time) I hope you are fine with that.

Everyone is free to do what they want, including state their opinions. But if someone is working for *me* (some people seem to be under the impression that I'm a web developer. I'm not. I *hire* web developers) I'd much rather they used a table than CSS because I know they'll get the job done faster and it will almost certainly work better for my needs.

ChristianZ said...

Last post: "using tables" does not equal "faster" if you know what you are doing. If someone makes an unbreakable site for you in CSS (and it is done all the time; I do it and I do it remarkably fast; tables would slow me down now) I hope you don't fire them.

Ron said...

I probably wouldn't fire them just for that. But I might question their judgement.

ChristianZ said...

So you would question somebody's judgment for making a site quickly using CSS that works in all browsers, prints well, works good on handheld devices, is easy to maintain, has no code bloat, degrades gracefully, etc. (I'm not even mentioning "validates" because, yeah, that's not the most important thing.) That makes sooooooooooo much sense, Ron.

Ron said...

> So you would question somebody's judgment for making a site quickly using CSS that works in all browsers, prints well, works good on handheld devices, is easy to maintain, has no code bloat, degrades gracefully, etc

That's right. And there's a very sound reason for this: maintainability. If I have to make a change to a table-driven layout, anyone can do. I can even do it myself. And I can be confident that if it looks reasonable in one browser that it will most likely look reasonable in any browser, since all browsers render tables in basically the same way.

If I have to go back and make a change to a CSS layout I have a problem. First, I have to find someone who has the same level of knowledge as the person who originally created the site. Maybe that person is still available, maybe they aren't. I certainly don't have the recourse to make the change myself, since I'm not a competent CSS coder and there are so many ways to shoot yourself in the foot. Moreoever, I have to go back and test in every browser because, unlike tables, there's a lot of variation in how browsers render CSS.

ChristianZ said...

"First, I have to find someone who has the same level of knowledge as the person who originally created the site."

Now, we're getting somewhere. It's about levels of knowledge, not that tables are intrinsically better. Trust me, I'm not blaming you for not being good at CSS. There's plenty of things I'm not good at. It used to be that web developers didn't know any other way to develop websites but by building them in tables (for the most part; my first few websites were not built with tables or with CSS layouts but they still looked good and worked fine and many still exist as viable web pages; I only started using tables when I got my first professional web dev job in 2000 and was told to start using them for page layout; even then that required learning something new). When it was suggested that CSS layouts should be used and that the whole table layout thing had never been anything more than a hack most web developers had to learn that so just learning something new made it seem like it was harder and slower than the older method.

whitehawke said...

>"If you need to a really quick job for a demanding client then your best bet is to screw the W3C and use tables."

-----------------------------------

Always extremes! There are many things poo pooed by the CSS extremists that are W3C compliant. Tables are W3C compliant.

And yes - the bottom line is very important to clients.

I have found the most universally RELIABLE method is a hybrid of tables and CSS. A single table for the backbone and CSS for everything else. There will be no display anomalies anywhere.

However, I don't use it because the prevailing mentality is that of a holy war for CSS to stamp out all use of tables, anywhere and for any use.

Ron said...

> It's about levels of knowledge, not that tables are intrinsically better.

These are not unrelated matters. The fact that tables can be used to produce reliable results without a lot of arcane knowledge *makes* them intrinsically better. All else being equal, more reliable results for less effort is in my book intrinsically better than less reliable results for more effort no matter what any self-appointed standards body might have to say about it.

ChristianZ said...

"All else being equal, more reliable results for less effort is in my book intrinsically better than less reliable results for more effort no matter what any self-appointed standards body might have to say about it."

Agreed wholeheartedly. But just because YOU can't achieve "more reliable results for less effort" with CSS over tables doesn't mean nobody can. Everyone else has left this thread because they see that you are too stubborn to accept it, because you insist that you know better than the people you admit know more than you on this particular subject. Hope you're not like this in all aspects of life.

Ron said...

> But just because YOU can't achieve "more reliable results for less effort" with CSS over tables doesn't mean nobody can.

I never said otherwise. But the mere fact that it's a rare and difficult-to-acquire skill is in and of itself a disadvantage from my perspective an an employer. And you have not demonstrated any actual advantages to using CSS for layout. All you've done is proclaim, without any actual support, that it's the right thing to do. Just because it may be *possible* to achieve good results with sufficient diligence and effort is *not* a good reason to use CSS.

> Everyone else has left this thread

No, that's not true. I've just started to exercise more editorial control over this thread. I'm suppressing a fair number of comments that don't add anything new to the discussion.

ChristianZ said...

"All you've done is proclaim, without any actual support, that it's the right thing to do."

From the W3C:

“Tables should not be used purely as a means to layout document content.”

http://www.w3.org/TR/html401/struct/tables.html


"Just because it may be *possible* to achieve good results with sufficient diligence and effort is *not* a good reason to use CSS."

I do it all the time with little effort. You can keep your head in the sand over that but doing so destroys all rational conversation.

"But the mere fact that it's a rare and difficult-to-acquire skill is in and of itself a disadvantage from my perspective as an employer."

Well, I have acquired it and so have many other people. It's not as rare as you think. And most people that can do it can also do table layouts. Actually with this most recent odd statement of yours I am beginning to see the true crux of the matter: you just want to pay somebody less money. That's the only reason you could possibly see more knowledge as a disadvantage.

whitehawke said...

Put up or shut up!

I propose a duel. Ron (third party) comes up with an extremely non-standard layout spec - one not in use anywhere. Then your bravest knight will do it in CSS and I will do it in tables with CSS styles.

I will do it in an hour or two and my money says the challenger will not be able to do it at all!

whitehawke said...

Ron - add this to the challenge

Requirements - it must look exactly the same in Firefox and IE7 and use no scripts

ChristianZ said...

"It must look exactly the same in Firefox and IE7."

I've never put a big premium on making a page look exactly the same on every device. If it looks perfectly good on one and perfectly good on another while still having minor differences then I don't get worked up over it.

Or are we saying that I should abide by the rules of some self-appointed body?

I am constantly trying to convey to clients that they do not have complete control over how their page will appear on everyone's device. This is a hard concept for people to grasp. You have a lot of control but not complete control.

whitehawke said...

No Body - self appointed or Not

Just a Challenge! You're free to turn it down - I'm not the W3C. If CSS is at least equal, it can do anything tables can do. If it is better, it can do more.

Bear in mind, I am quite proficient in CSS layout. If I were not, I wouldn't be so foolhardy as to put my own feet to the fire.

whitehawke said...

"From the W3C:
Tables should not be used purely as a means to layout document content.”


"Or are we saying that I should abide by the rules of some self-appointed body?"
(the W3C is self appointed!)

Two quotes from the same guy - ChristianZ

ChristianZ said...

"Or are we saying that I should abide by the rules of some self-appointed body?"
(the W3C is self appointed!)"

Wow, you totally misunderstood why I brought up the whole "self-appointed body" thing. I brought it up because of people like you and Ron who have been saying, "We don't care if the W3C says to not use tables for layout. They are a self-appointed body and we are not beholden to them." But then you go and bring up this challenge and make it a requirement that somebody create a page that looks exactly the same in Firefox and IE7. Without knowing it YOU became a self-appointed body by making up rules that other people don't care so much about and saying they have to follow them. That's what I was referring to.

Geoff said...

@ChristianZ it's not a serious challenge. Is it, go on have a go. Or are the odds stacked against solving via CSS.

With my extremely limited experience of using CSS I am aware, perhaps mistakingly, that it might take a lot longer to use CSS for layout than tables but for maintenance CSS will considerably shorten alteration time when the customer wants (inevitably) changes.

whitehawke said...

"Without knowing it YOU became a self-appointed body by making up rules that other people don't care so much about and saying they have to follow them. That's what I was referring to."

Wow, are you ever off base!! A challenge is not a rule - duh! And absolutely nobody HAS to follow anything. I'm just offering you a opportunity to beat my pants off. You told Ron "just because YOU aren't profieient enough, etc. etc."

So I assume YOU are, and up to the dare. I can do layout in both CSS and tables and I know what both can do - and you apparently don't.

If you take the dare you will lose - I don't care how good you are. To create a totally new design archetecture - not a layout grid you use all the time - takes a lot of time.

That's why everybody re-uses the same frameworks over and over. How about four columns, a full page span and below that two short columns and a footer.

Can you do that in CSS in two hours? Yes or no?

Why would "the powers that be" newly build in "CSS Tables" if it wasn't something that CSS lacked???

Do you know about CSS tables??
http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/

whitehawke said...

PS - we won't actually be able to use CSS tables for years to come. Almost nobody has the browser to support it.

That means SOMEDAY CSS wil be better for layout - but not yet.

Ron said...

I just posted a new article about this in an attempt to lead the discussion in a different direction. Please check it out. Also, if you comment on the new post you won't have to wait for me to approve your comments. I only have moderation active for articles older than 30 days (mainly to prevent spam).

whitehawke said...

Ron - you're right. I'm newer here so it took me a while to see the syndrome.

It's sounds like whining instead of discource - BYE!

Nuno Laranja said...

I just recently found this and I have to say it makes a lot of sense. When I started learning basic html the advanced programmers made fun of me for using tables the whole time. But it was so much easier to get things in place and working properly. This will show them. Great article.

Benjamin said...

YES YES YES !!! You are so dargn right ! Anyone who disagree with this articles are real amateurs. Trust me , i consider myself a web Guru (now own an I.T company with few employees). I've hand coded all my sites from scratch ( html/css, js, php and sql ) I know all about html/css, rendering engines and how they work. CSS is great for lots of thing, but NOT Layout. You've nailed 90% of problems with CSS alternative to table.

Here's how it works.

The Newbie -> Thinks table are great
The Amateur-> Discovers CSS
The Designer-> Thinks tables sucks
The REAL EXPERT/GURU-> Understands that NOTHING replaces table layout (yet) and start using them again

anyone who disagree, read the article again, you can't disagree with his arguments.

whitehawke said...

You are welcome to start this topic anew. I have 15 years in web design and know the topic is not set in stone.


http://search-engine-upgrade.com/rants/

Anonymous said...

It's right for 2009. But we live in 2012, so with CSS3 and HTML5 and the dieing oft IE6/7, CSS is ready for layout (we can use frameworks like bootstrap, we can use display: table).

Unknown said...

I have been building web sites since 1995 and I can tell you, though few pros - self included - still use tables as the backbone of a layout, they will still validate and perform at speed if you don't overdo them - even on mobiles it seems.

If you do use tables as the backbone, learn to fashion one table into the whole page layout - easy to do in Dreamweaver.

Use whatever format you understand and don't experiment on client time. You don't need to discuss it - just do it. I can't believe this discussion is still going on!

But whatever you do, don't puss out and sell a client a frickin' Wordpress blog and call it a web site.

Anonymous said...

The idea of CSS is great. However the implementation is 1,000% crap. No doubt about it. CSS is not a programming language as there are more exceptions (mostly undocumented) than there are rules. As with any crap piece of junk software it has no authoritative documentation. One googles, finds little snippets, and tries them out (and a lot of them do not work).

When it comes to laying out a page in a tabular form nothing beats the table tag. Of course you can use CSS and you can also use assembler. But if your time is valuable them you will use a table tag.


When it come to CSS it's the blind leading the blind. CSS is to the software industry when animal testing is to the cosmetics industry: something we don't what to address.

ChristianZ said...

"CSS is not a programming language"

The funny thing is that it doesn't claim to be.

"One googles, finds little snippets, and tries them out (and a lot of them do not work)."

That's not how I learned it.

"As with any crap piece of junk software it has no authoritative documentation... When it comes to laying out a page in a tabular form nothing beats the table tag."

So we go from believing that CSS has no authoritative documentation to thinking that the solution is then to use the table tag incorrectly.

Sumit Gupta said...

I recall when I use Table for layout and been a HTML/CSS expert, but this new CSS make me look like novice.

Having said that, I don't like the fact that to get layout in CSS we have to make multiple DIV or container, but with Table we have one. However with Flex been there it is different world now, If you learn and expertise in Flex layout is much easier.

On other hand, everyone knows Table fails because if main content is in Table it render respectively late, and there is no denial on that. But if used properly, if you care enough Table or CSS layout both render at same speed. But back then people blame it on Table and go ahead, now they learn CSS and don't blame it. They don't blame different browser render differently, they don't blame different screen size, because CSS can adopt with extra coding for them, Table are not that adoptable.

I vote for Flex based layout over table or old style css, Though flex are not yet much popular.

Mark said...

Sumit Gupta,

If you like CSS flex layout wait until CSS Grid layout becomes a recommendation!

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

«Oldest ‹Older   201 – 255 of 255   Newer› Newest»