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.
Thanks for the css vs tables matchup. I always thought I was the only one retarded enough to not figure out why i couldnt get css to work right easily and elegantly.
ReplyDeleteYes, you are an idiot. Trying to say there are so many CSS tutorials so CSS is bad is like saying every computer language is bad because there are so many tutorials there, too. You also show that you are not a very knowledgeable CSS coder. I think you would do away with hammers because rifles make better holes in walls.
ReplyDeleteI get so tired of people who can't write markup because they have no experience and then post about it. CSS is computer programming. No, not like C or Lisp, but big, scary computer stuff. It should be kept in the hands of professionals, not dumbed down for the masses to display their latest OMFG! posts on myspace.
Eh, I'm getting bored........
No, he's not saying that CSS is bad because there are so many CSS tutorials. He's saying that CSS is bad because there are so many bad CSS tutorials that neglect to point out how to use it.
ReplyDeleteAlso, CSS is not programming at all. In fact, it is pretty much the antithesis of programming. When you create a program, you make all the rules. Unfortunately with CSS, most of the rules are arbitrary and already made for you.
This was a fantastic rant. Really good points that most people don't bother to point out.
This is very wrong but you hit on a very good aspect. Html Tables gives us what we need for design. Css 3 is for this very reason. If you lookup box layouts then this article dies. But the problem is tables work well in older browsers and just the same in newer ones. Although tables are meant for tabular data, we use it for design. We can't use css 3 in older browsers.
ReplyDeleteJust because a tool is given to use doesn't mean we will use it for problem it was meant to solve. I've used a show to nail in a nail.. even though its meant to be on my feet.
Just because there are lots of bads tutorials doesn't make CSS a bad technique. CSS isn't for everyone, that's why there's a market for it; who is good makes money out of it.
ReplyDeleteThat argument was really dumb, just because the tool is available to everyone doesn't mean everyone knows how to use it or even should be using it (I've seen this before with Photoshop, etc.)
I just want to add that the model used today for web design (read: CSS driven) is the same model used for publishing. Couldn't they use tables in publishing? Yes, but they use modules (just like CSS does) and for good reasons.
Why tables? Because it's a easy WYSIWTG path? Life isn't easy, making web sites that work properly isn't either. Tables gives you an instant organization, but also lots of unecessary, non-logical bytes.
Finally, your examples don't have any logic whatsoever. You have resizable table columns, why don't you have resizable divs too, for comparison?
I am going to have to disagree with your argument simply because your understanding of how the browser works is flawed. You want to position your content on your page so that the most important content is at the top -- header, main nav, main content, secondary content, sidebars, footer, etc. You then use CSS to flow the content to how you want it to look. This make it much more accessible to those using non-browsers and browsers alike. Good practice for mobile web development too.
ReplyDeleteIt just takes some time to step back and learn the craft. Yeah it can seem frustrating but once you get the hang of it is 1000x better. When you get to the point where you can anticipate IE bugs you are golden.
E.G. All I need are a couple of conditional comments on complex layouts and I am good. Once you get IE 6 into standards mode you will be surprised how tame it can be.
Pick up a copy of "Bullet Proof Web Design"[1] and/or "CSS Mastery"[2] then make your arguments :)
[1] < http://simplebits.com/publications/bulletproof/ >
[2] < http://www.cssmastery.com/ >
The purpose of CSS was to separate information from layout. The problem I have is that all "good" use of CSS still embeds layout information in the HTML. For example, when I must arbitrarily add extra div tags to make a layout work or need to include them in a particular order to force the layout to handle correctly it is a failure on the part of CSS to do it's job.
ReplyDeleteI agree that tables are not a good solution as they are being misused from their actual purpose but I have a hard time blaming developers for using them when CSS is not performing it's intended function well.
You really need to learn how to use CSS, and HTML for that matter. I had similar thoughts to you when first switching over, but all the stuff you complained about isn't actually that hard to do without tables (and still get the correct behaviour). Have a look at some more examples on the web.
ReplyDeleteGoing forward, we'll be able to use CSS tables to get the same layouts using CSS as one gets now using HTML. Unfortunately, IE8 is the first version of IE to support this, so it might take a while. (Other browsers have supported this for ages.)
ReplyDeletei completely agree with you and have come across the same problems. theres no way to match the column height easily unless you use javascript, which i feel is a major shortcoming, and think tables are a better solution. as for the floats, you can use a content-after thing to clear it. still it doesnt matter because the issue isnt how to fix the css but why the css is a bitch in the first place
ReplyDeleteJust for kicks you could always use display: table-row; or display: table-column; its still css :P
ReplyDeleteYes.
ReplyDeleteYES.
YES YES YES YES YES YES YES.
I have had it with the purists. How many years do we have to live with the constant dream of the "3-column" CSS layout - and STILL it does not exist.
You have absolutely hit the nail on the head with this post.
I'm sorry, but your coding examples are not very good ones. First of all, you used the example of three-column layouts, of which there are so many ways of doing them in CSS, it is bad form to suggest the way you wrote it is the way, and that it's bad. Well, it is bad, as you suggested, when written that way. However, it is not bad, when written in some other ways. In fact, thanks to CSS positioning and floats, you can actually have your content show before your left or right sidebars, which means search bots can read your content (the most important part of your page) first. To do this with tables would be messier and time consuming and would, ironically, take CSS to actually achieve.
ReplyDeleteSpeaking of search bots, I noticed you completely ignored the non-human element to this. Bots of all sorts love clean code (so they can focus on the textual content, rather than layout), and a page filled with tons of nested < t d > and < t r > is not clean (meaning it usually takes longer to load, read and analyze); it does not give content precedence. What I can do with a few divs would probably take a table-user many columns and rows to create, so this is not an unlikely problem. Tables are meant for tabular data. That is what they were always meant for--and really, nothing else. I am saying this as someone who's been on the web and designing long enough that I have used tables in design; however, they aren't meant for that, and working with them is a true nightmare if you know how to use CSS to its fullest. (Unfortunately, judging from your coding examples, I'm going to say you don't at this point in time.)
CSS is also much easier to edit. I have had to work on some designs that made use of tables for layout, that were created by other designers. Looking at tables in a layout, it is very hard to know which part is controlling what. You actually tend to have to look at the content to know what part of the layout you're working on--that takes time, depending on the content--time that could be saved if there was one simple ID tag that correlated with the same tag that was in a stylesheet.
Everyone can design as they wish. I'm not going to proselytize, though it may seem I am. I've stated the reasons I think CSS is better to work with, but you and everyone else are free to work in tables, if you feel it works better for you. (For your own personal site, it may do just that.) However, do not be surprised if you find it difficult to work with those tables down the road, when you need to edit websites that you haven't looked at in a long time, and do not be surprised when your clients come to people like me to make those tables into something more legible so they themselves can edit it. (It happens a lot.)
Anyone who thinks CSS represents a complete separation of content and design, clearly doesn't understand that CSS is in constant development. We are only in CSS2 now, officially, and CSS3, which separates content and design a whole lot more than version two, will be slowly implemented in the many, many browsers that it must be rolled out to. Tables will always stay as they are, because they're meant for tabular data, and there's only so much to that.
1. Define primites.
ReplyDelete2. "The way CSS layout is rendered results in unavoidable interactions between the style sheets and the underlying content. So even when CSS is used exactly as intended, it is not possible to separate content from layout." WHA?
It is not possible to separate them completely. CSS ain't magic, they have to interact in some manner. The point is tables (especially in more complicated layouts) do a much worse job of separating content from layout.
"One of the problems with criticising CSS is that it's very hard to write good CSS, so pointing out problems with CSS begs the question of whether this is an indictment of CSS or one's coding ability."
So what your saying is it's difficult to criticize something you know little about... So why are you criticizing CSS?
It's fine if you want to use tables for layout but don't go spreading untruths to justify your inadequacies.
"tables have the correct semantics for doing layout." This isn't even close to the truth...
Let's say that the left column contains the sub-content (news feed, recent blog posts, etc.) the center column contains the main content and the right column contains the navigation. The semantically correct order would be: 1. navigation (right) 2. main content (center) 3. sub-content (left)
Now explain to me how you would maintain this correct semantic order and display this column configuration using tables for your layout.
Tables are sometimes semantic at best! That said, it is very prevalent to have incorrect semantic markup even in purely CSS layouts. Just because you might run across an example of a CSS layout with bad semantic order doesn't mean that tables are semantic.
You do make one valid point about equal height columns. This is a problem and one of the shortcomings of CSS vs. tables for layouts. However, there are many solutions to this problem. Many don't require javascript.
ps: How do you expect people to respect your opinion on semantic markup when you use the 'center' tag in your own HTML. Step one to semantic code: VALIDATE... http://tinyurl.com/avd4td
note to self: Articles that begin with "Seeing as how..." do NOT deserve a comment.
This comment has been removed by the author.
ReplyDeleteAfterthought: http://www.csszengarden.com
ReplyDeleteTell me when you can do that with tables.
BTW: MaxDesign put the content in the correct semantic order. A good way to test this is to turn off CSS. Does the main navigation appear at the top? Yes. Does the content come next? Yes. Does the sub-content follow? Yes.
ReplyDeleteSemantics does not mean replicating the natural order of flow on the screen. It is for flow of the content to make sense without the layout. For example a screen reader doesn't know whats left or right but what comes first in the order. Sometimes you need the right column to come first in the order. Sometimes you need the left to come first. This is one place where table layouts fail to be semantic.
Well, at least it was humorous to show how little you know about CSS. I get just as frustrated with things I hardly understand too ;)
ReplyDeleteAs to why you posted such an article, I have no idea, but it's awful funny watching standardista nazi's come and flail. You've definitely got a few minutes of attention. Congrats on the brief moment of fame.
Cheers
CSS is shit for page layout, because elements cannot trivially take into account the behaviour of neighboring elements, only parent elements.
ReplyDeleteThe classic example of this is the "3-column-layout". The article is correct in that no sane CSS solution for this has been arrived at, and the solutions that have been proposed lack the functionality of 'table', particularly in regard to setting relative width, and content overflow.
CSS does formatting and positioning really well, but page layout is often best suited to tables.
This is not 1999 anymore. You can use DIVs and semantic markup to mark up the sections in your content, AND STILL use CSS (specifically, the table- stanzas) to table up your content. Any modern browser from IE7 up obeys them. So you don't have to use an actual TABLE element for the layout.
ReplyDeleteAs long as you use the ARIA role="presentation" attribute (http://www.w3.org/TR/wai-aria/#presentation) to keep it accessible. A screen-reader doesn't assume that a table is used for layout be default.
ReplyDeleteThis is why tables shouldn't be used for layout, you website cannot be used easily by disabled people. For the record, Google is blind.
great article... fantastic comments...
ReplyDeleteDoes any one know a good text editor that properly lines up and beautifies the html/table code as you go?
Look under the hood on this site... then you'll see where CSS is going. (and yes you can use CSS2 child selectors... do your homework before you post)
ReplyDeletehttp://camendesign.com/code/
Article has been added to the Webless Initiative as recommended reading.
ReplyDeletesee: The Webless Initiative
I'm sorry but does anyone actually code XHTML/CSS in this way?
ReplyDeleteI've been using CSS for over 5 years and have never coded a site that has the right column BEFORE the central content column?
There is NO NEED to do this. Its idiotic and illogical.
Of course I've seen this used a couple of times on CSS tutorials and sites but brushed it off as bad coding.
All you need to do in order to achieve something like this is to code your XHTML in a logical order and just float everything left. Then clear your floats and bobs your Uncle and Eric Mayer is your Dad....
No wonder you thin CSS sucks if this is the example you chose to use.
Hey Robert Brown, you can check Crimson Editor
ReplyDeletehttp://www.crimsoneditor.com/
It's good and free text editor for html,css, javascript, etc...
If you want good text editor in same class you can try EditPlus
http://www.editplus.com/
but EditPlus is paid,
Thanx
Vinay Rajput
I agree with Michael Kimb Jones. One silly example and you are trashing CSS? I could create such an example for tables, but won't, because when used properly, the tables are great for tabular data.
ReplyDeleteOtherwise, you are severely limiting yourself, learn more CSS and then try to have a proper argument, not just showing a case who nobody really uses. Use left floats as it has been mentioned.
Hey people, it's good to know about this post and blog,
ReplyDeleteI m totally agree with what "drhowarddrfine" and "Kai Vong" said in there post,
CSS is a good thing for your website, but you have to know how to utilize it properly and that is possible only by utilizing it and understand the behavior of its properties and attributes,
If you want to learn CSS, you have to do it yourself to understand how browsers behaves with CSS on interpretation
Vinay Rajput
Right on. This failing of CSS has bothered me for years.
ReplyDeleteYes, there may be a million ways to tweak CSS into performing correctly, but its all *tweaking* something that is not working the way it was supposed to, or even how it was promoted as working.
You are complete right. Well done. Saved me writing a similar article.
ReplyDeleteHTML tables are designed for tabular layout.
CSS is designed for presentation.
If you search in Google for CSS three column layout you'll find a large number of articles explain how to do it - evidence that it is difficult. The table approach is trivial - case proven.
Google's page-ranking algorithm will give great pondus to the incorrect solutions - the wisdom of crowds in this case being wrong.
/Joe
I'm sure I have seen ways to have three columns which expand to fit the content. In fact I know I have. I've also seen and used various kinds of css galleries and content manipulation with and without javascript. It can be done. There is no real need to rant, you just need to learn more about how to do it. Frames are just a non-starter in my opinion.
ReplyDeleteWhat is more annoying is seeing websites that do not validate - including the google mainpage. Given that there are standards in place, it is just irresponsible not to take the time to make sure your code meets the standard.
Yes Joe, its all about your own experience not about the learning the CSS layout technique,
ReplyDeletewhen you use CSS and try to understand how browser interprets it, then it will make life easier,
and no doubt for tabular data table is best,
but making CSS based websites cross browser compatible is really a tough job, but usually people do not understand it
I agree that div and css2 is not an optimal way of doing layout, but neither are tables. We'll have to wait for css3 to get a proper solution.
ReplyDeleteHowever, I can't believe nobody mentioned yui-grids yet (be sure to use it together with base&reset when you try it). It does away with all the problems you described in your article. It even gives you a tremendous advantage over tables: Putting your content before the navigation, which is amazingly useful for getting good rankings in search engines.
Here you go:
http://developer.yahoo.com/yui/grids/
YEEESSSSSSSSSS!
ReplyDeleteI am sooo glad to read that - CSS and it's appalling inadequacies (combined with IE 6 and it's) were one of the final straws that lead me to wuit the web development world completely. I cannot tell you the frustration of trying to get CSS to do something simple that tables will do in an instant and when you finally get it (after much hacking) just to find it doesn't work on other platforms.
I salute you and TALBES RULE.
Incidentally, I'm now training as a shiatsu masseur and much, much happier ;)
Sorry but you competely miss the point here.
ReplyDeleteThe point is not that exists some technics out of here to make things work properly. The things is that these tecnics are always + or - tweaks to make the things work.
For example I am a java architect and I project corporate sites: it is my work. I have some understanding of css, but of corse I am not a real genius at it.
The only thing I can objectively say is: if someone went to me and ask "how can I do this thing in java?" I respond "You will have to do 1,2 and 3 and it will be ok". When I ask someone for css the respose is always "TRY 1 and if not TRY 2 etc."
And when you have tryied 1,2 and 3 you obtain a solution that work properly in IE 6.541247 but not on Firefox 2.0 (ok it works in FF 2.1 ).
And the specs! I hate all the specs that needs 3 version to came to be resonable useful, even in java: ejb sucks but css sucks more.
Sorry for all the elitary people out of here, but IT has actually something terribly wrong in it, and this wrong thing is a total lack of semplicity.
Elitary pepole says this is how it is intended to be. I say that I actually want to display some data fetched from a database to a fucking page!
Of corse we have some million users so It cannot be that simple, but c'mon the actual general situation is ridicolous. You have to hire people with at least 5 years of experiance only to present data to the users.
Wen need to concentrate to new challenging business requirements not to reinvent the well over and over again.
Ok, just my 2c.
I'm confused is this meant to be a joke? an example of flawed thinking? You don't even use tables for layout yourself in the example
ReplyDeleteNoone ever said webdevelopment is an easy business. Deal with it, or just let it.
ReplyDeleteInstead of screaming for tutorials you shut put up your butt and teach that stuff to yourself. If you’re uneager to accomplish that, then webdevelopment is really not your business …
Are you serious?
ReplyDeleteIs this a joke, are you smoking some weed :S
Once you know css, its far easier to build sites using css layouts both from a maintance perspective and an initial build.
ReplyDeleteEither grow up and learn to work with industry standards or get out of the industry.
- don't post articles that claim to be tutorials when you clearly have no clue.
Tables should only used to format table_data like numbers and stuff and NEVEREVERAGAIN for layouting the page, moron.
ReplyDeletewe have 2009 and not 1997 anymore, wake up!
with rants like this you show your sense for new techs... so, go grow tomatos... much fun!
http://www.cssplay.co.uk/layouts/flexible-equal-height.html if you want a "tutorial"
ReplyDeleterealize. THIS is funny: http://giveupandusetables.com/
ReplyDeleteyour rant is NOT... not a little bit.
ok, for a static website made for your grandmom a simple table is ok but for a customer who wants a dynamic page with lots of data and changes every second day you will go nuts with a fuckedup table layout.
but it's your choice! do what ya like... but still: your rant is strange and maybe you only have a strange sense of humor.... who knows/cares... .. .
As a programmer fluent in half a dozen languages, I find building CSS layouts quite difficult. I've read many tutorials, I've learnt a lot of interesting things about the subject, managed to get a few layout working but it still takes me an awful lot of time to get them right and I have to regularly get back to the tutorials. I know it's because of my lack of practice because the designer who works with me and does this all the time can make good layouts very quickly using many clever hacks and tricks. So yes it is possible but it really seems that it's much harder that it should be. If I were to spend a few days or week doing only web design, I guess I would get it in the end, but as I do it only once in a while, I remain CSS-layout illiterate.
ReplyDeleteIt's interesting to see that among all the comments here, some of them being sadly offensive, no one actually responds to the practical problems raised by the author. Some comments make interesting and legitimate points about why table-base layouts are bad, but no one seems to be able to address the problems raised by the article.
Yes table best for layuot
ReplyDeletecss is more customizable accesseble and Best.
Table is old.
css is future.
I see what you can demonstrate, but is too old, it's more precise, less complicated, too easy like "I'm too lazy to heat my head with this columms..." using table is for TABLE not for layout, if you are use old styles use FRAME remember this?
ReplyDeleteIn the web are many tutorials, but is are complicated for you, use the 960 Grid System or the Blueprint, it's a CSS Framework, in this framework have all you need.
Go fot it!!!
No, No, No.
ReplyDeleteIt's really sad that people would rather criticise a programming language they simply haven't used enough.
Write this article again when you've made at least ten websites and then you'll see the benefits of CSS compared to tables.
You've caused a lot of controversy, but I'm sure that was your point.
ReplyDeleteCSS is not perfect. Add in browser incompatibilities and you've got a technology that is an art rather than a science. CSS rules may be easy to learn, but few people ever master it. Just look at the hacks and conditional stylesheets most sites resort to.
But that doesn't mean HTML tables are better for layout. They require a lot of code and it's easy to make mistakes.
And, what happens when your marketing department ask you to alter the order of columns 1 and 3? You need to change every table on every page. It's a 5-minute task with a good CSS-driven page.
Tables rigidly fix your layout - that's why you find them easy. CSS allows an infinite amount of variation. It's powerful, but will lead to confusion if you don't spend time learning how to use it properly.
Put it this way - anything you can layout with a table can be done in CSS. The reverse is not true.
You should also note that CSS3 has techniques that implement tabular-style layouts.
Best of luck wading through all your comments!
@Alex Marandon "As a programmer fluent in half a dozen languages, I find building CSS layouts quite difficult."
ReplyDeletePlease believe me, I mean this in no way as a sleight upon your skills, but if by programmer you mean that you typically write logic-driven code in general purpose languages such as C, C++, C#, Ruby, PHP, Python, etc. then I'm not too shocked or surprised that you struggle with CSS. It is my experience that it is very rare to find someone who is good at both systems programming and controlling page layouts using a styling language like CSS.
CSS isn't a programming language - it's a styling language. To accomplish things in CSS requires a different mindset to that demanded by programming and other similar tasks.
Now, this cuts both ways! My skillset is very much in the area of client-side layout and development, not programming. I can understand the basic principles, but as soon as I need to do anything complicated in programming logic, it takes me a long time.
Logic and layout are different tasks, requiring different skils and different ways of thinking. In addition to regular practice and familiarity, this is probably why your designer colleague can accomplish things with layout more quickly and easily than you are able.
The skills required for each are not better, not worse - just different horses for different courses :)
Building layout for web sites is THE most complex issue. Both tables and CSS(divs) are not perfect. The big problem about the tables there are one dimension you can use layers with tables(z-index in CSS).That is why I wrote Emastic CSS Framework who can work like CSS Tables or Layer.
ReplyDeleteNow let's take your table example and try and make it a single column so it looks good on an iPhone, mobile device, or other non-computer screen. NOT POSSIBLE. Div's and CSS are way more flexible.
ReplyDeleteNice rant :-)
ReplyDeleteIt took me a LONG time to get used to CSS layouts. And there are still a lot of things I find a lot easier with tables.
I guess we'll just have to wait until display: table-cell; becomes standard ;-)
yes, i agree with you, tables are the wrong tool that works and current css is the right tool that doesn't work. it's our due to say tables are not meant for everything and w3c to fix css
ReplyDeleteWhile I will not question your abilities with css or html I will kindly suggest a look at blueprint.css as it can give you a different way of accomplishing what you are looking to do without bringing tables into it. I still use tables but that's because they work so well with other languages and they don't change from browser to browser.
ReplyDeletePeople are not willing to look at the big picture, or set their pride aside when it comes to making simple decisions.
ReplyDeleteSometimes it’s easier to do what works knowing that not one visitor to your site really gives a shit HOW you built it , they just want it to work. Personally I use a combination of both, it makes my life easier, call me stupid, but I like to get the job done and move on to the next project.
View your source and tell me you really care enough that it keeps you up at night knowing you have a table in your layout or you were clever enough to make it work with CSS. If it does, well, you might want to step away from the computer for a moment and check out the sun, I hear it’s really bright, unlike many of the comments on this article.
CSS is too hard so I'm using tables.
ReplyDeleteTables are too hard so I'm using an image.
Look if you want to use tables, use tables. I see plenty of sites using tables on geocities, you may as well use frames as well.
How many Table evangelists are considered to be leaders in the web industry? I'm guessing close to 0. I honestly didn't think anyone who made websites professionally used tables still for layout, except for the mid-forties and stumbled into "web design" and now make sites with animated gifs for small businesses.
Tables are for tabular data. Just because you find CSS layout difficult, doesn't mean everyone does.
Its fine for all of you CSS fanatics to rant and rage at the author for pointing out (correctly IMO) that CSS is flawed and that doing things the way most tutorials out there show us doesn't work.
ReplyDeleteWe develop enterprise web applications used by some of the largest companies around. We have to support IE6, IE7, FF2 and FF3. We have to have a layout that is fluid, clean and dynamically updated.
CSS in its CURRENTLY SUPPORTED state does not work for layout by itself. Yes, CSS3 might solve SOME of the issues we have with doing 2, 3, 4+ column layout, but most browsers in use today do NOT support CSS3, heck, most browsers used do not support CSS2 correctly.
So rant all you want, yes CSS is better, when it works.
We use Dojo. Which uses CSS controlled by JS. It works (for the most part) much better than CSS and certainly much better than Tables.
I would probably switch to GWT if I had the choice.
PS: I know Dojo uses a horrible mixture of CSS, Tables, JS, etc. But it works, and it takes the guessing game out of the hands of the developer, which is the point. Its ridiculous that we would even have to deal with this crap.
Stop wasting your bloody time and use a toolkit like Dojo or GWT, Ext.js, etc.
If you want to improve the code they generate, feel free to contribute to their code bases.
Final thought: CSS sucks, Tables Suck, Cross-browser compatibility sucks more, so why deal with it directly by yourself when others have already figured it out?
PPS: Yes, I know Dojo's support of IE6 is bad, but most things still work. GWT's is better so I've heard.
Nice post. I've been saying this for years. There's this masculine macho approach to Web development where people think they have to use CSS.
ReplyDeleteI've been doing Web development professionally for over a decade and pure CSS design is a waste of time and energy. It's inefficient and ineffective. Pure CSS designs become so complex that trying to change the design is always a major nightmare. The extra time it takes to execute a pure CSS design is never worth it.
For the major structure of a page, I don't waste time trying to dangle and float DIV containers just right. I grab a table and use it. No crazy interactions, no hours spent tweaking, no headache when making changes, and no worries. There is little, very little, benefit to doing an all CSS design.
My philosophy is to use CSS to make the site easier to update and maintain NOT harder. Isn't that the promise and point of CSS?
And for God's sake people stop using XHTML data types for your HTML pages. You are not programming databases! It's just an HTML pages use a friggin' HTML data type. XHTML is completely and utterly pointless and many times more work for 99.9% of all Web pages.
It's about time someone spoke up on this topics. Nice work.
I agree with pretty much every word of the article, and I feel great knowing that I'm not the only person on the planet who came to the same conclusion.
ReplyDeleteI noticed you were "an early Google hire." Have you run this by Alexander Limi?
ReplyDeleteThe point of css is so at any time I can change the layout of my site without touching the html.
ReplyDeleteYou can't do that with tables.
Tables aren't SEO friendly either.
I can't believe this was even posted in 2009.
"You can't do that with tables."
ReplyDelete- no, you are right, I may have to spend 5 minutes reformatting a table to change the layout. Or I can spend 4 hours trying to figure out why my "simple" CSS change does not work the same in IE as it does in FF or Opera. Good point ;)
"Tables aren't SEO friendly either."
- Really? then why do many of the top ranked site use tables for layout? How can they be so ranked if this is true?
"I can't believe this was even posted in 2009."
- very mature comment, and adds lots to the discussion, thank you for this ;)
Tim Berners-Lee called and he wants his tables back...
ReplyDelete{CODE} M0nk3y says: "Either grow up and learn to work with industry standards or get out of the industry."
ReplyDelete- all kinds of maturity and helpfulness shere today ;)
The problem is you little monkey, that "industry standards" aren't standard. Therefore anyone who has actually created enterprise level sites that MUST be cross browser compatible knows that CSS alone does not work, and that sometimes you must use tables, CSS and javascript together to make things work right.
...
Let's face it, tables keep doing a great job, easier and in less time than those "still in beta" CSS.
ReplyDeleteA basic layout has to be simple to build and "always working", if it is not, it is not your fault.
no, you are right, I may have to spend 5 minutes reformatting a table to change the layout. Or I can spend 4 hours trying to figure out why my "simple" CSS change does not work the same in IE as it does in FF or Opera.
ReplyDeleteAwesome point. :)
Trying to "tweak" my CSS so it works in all browsers has become a nightmare I really wish I didn't have to deal with. I've actually gone back and recreated some pages with tables to save myself the headaches. Yes, looking at the raw code with tables can be a bitch but as stated above, you have to choose your evil.
Most of the issues come from Internet Explorer anyways. I think the issue is browser based, not language based. The W3C seem to be very on top of what the rules are and how elements should be rendered.
ReplyDeleteThe blame is in the wrong spot. Just saying is all.
"Most of the issues come from Internet Explorer anyways."
ReplyDeleteNo doubt about that, however, IE is still used by 80% or more of corporate America, and about half of them or more still use IE6!
As a developer of applications for this group, we have no choice but to support these browsers.
Also... Someone pointed out CSS Garden above... CSS Zen garden is beautiful, but is serves no real purpose other than to show what you CAN do with CSS. great. you can make really funky changes using CSS. But its not an application that needs to look & act like a real desktop application. It doesn't show a dynamically updated multi-column flow layout with widgets, sub elements and layouts, etc.
Now some CSS fanatic is probably about to scream about that's not what HTML was designed for.. well guess what? Tell that to the millions of users who use CSS, HTML & JavaScript for that very purpose.
And no, Flex/Flash, Java Apps and Silverlight are NOT acceptable alternatives for most of corporate America.
Just mention installing flash/java/silverlight into some corporate networks and see what happens to you ;)
Ok.. Am off topic a bit..
Your article does not consider the reason people chose to use CSS over tables. Designers used tables initially to simulate the grids used by designers to create regions of content, using tables for layout was a hack since HTML was developed to markup documents for exchange such as H1, H2, p, ul, li and etc. Tables were intended as a way to present data in tabular form as you might a spreadsheet, balance sheet, financial analysis or data analysis.
ReplyDeleteUsing tables for layout oversteps its intended and meaningful use, therefore using tables for layout is not semantic; if you are to use that term be sure you have a clear and accurate definition for it. Semantics: Relating to meaning in language or logic. It is not a way but a description. CSS in itself is not semantic and can be used in horrendously unsemantic ways. The idea of semantics is to use markup that enhances meaning and describes its contents to communicate to browsers, user agents, other designers. You can build entirely unsemantic pages using HTML strict doctypes and css only layouts. The table element explicitly labels its content as tabular. Therefore you are redefining the meaning of what a table is but you didn't tell anyone. So people who are using screenreaders will have the page read possibly in a nonlinear way or confound navigation to the desired content, a new site maintainer may look at it and try to figure out how to relocate contained sub elements.
There are occasions when tables become necessary to handle legacy browser issues but it is the responsibility of the designer/devloper to ensure first he/she knows the rules before breaking them. It may be on a given project for a given client or scenario that tables used to facilitate layout are a not only easier but the only way to achieve a particular outcome.
CSS is imperfect but it is browser support has been troublesome. Microsoft disbanded its IE development team after IE6 was released and the adoption of CSS specification changes all but stalled at MS's high market share and lack of concern for the web in general. Since the reinstatement of IE's active development we have seen considerable improvement in CSS support and will continue to see it through IE8 and further. True columns using CSS tables and some major changes in the HTML5 working group's developments will mean that the web will get better, easier and more compatible as it becomes more engrained in our modern lives.
I am a serious pragmatist who was once a member of strict, semantic, and standards at all cost community but have learned the best way to survive as a web designer is to continually improve and understand when to use one solution over another.
On a side note, those who continue to suggest blanket site compatibility for IE6 are creating more issues than they solve. IE6 by any measure is outdated by about 5 years. It is time to let those people suffer the incompatibilities, inconsistencies or upgrade. Just as those who stayed with Netscape 4.7 looked at broken sites, tabled or not, they eventually gave up and upgraded because the web had moved on. But just as I said in my main argument every individual project merits individual consideration.
"On a side note, those who continue to suggest blanket site compatibility for IE6 are creating more issues than they solve. IE6 by any measure is outdated by about 5 years. It is time to let those people suffer the incompatibilities, inconsistencies or upgrade."
ReplyDeleteI find this comment quite ignorant. It costs large businesses hundreds of thousands if not more to upgrade a simple thing like a browser on all their staff's computers, laptops, etc. Then there are support issues as you deal with dozens of people complain that you changed their environment, or that stuff that worked a certain way no longer does, etc. You speak from the point of view of someone who has no experience in this realm. If you did, you would not say this.
Trust me, WE WANT our clients to upgrade to IE7 (well, FF3 actually), but they CAN'T, their IT department would lose their minds, and in this period of cost cutting, they will NOT spend the time & energy on such a "wasteful" expense. And it is in their opinion. IE6 for them works just fine.
Tell that to a client that pays tens of thousands of dollars for your product, then have fun going out of business.
Your theory sucks for mobile content and accessibility issues. CSS would easily be able to shift this page into a form factor of your choice. With a table you a stuck.
ReplyDeletePlus, if you ever need to change layout you're still stuck.
It's like giving a child concrete to build sandcastles with.
I sit very much in the CSS-for-layout camp BUT if you are comfortable with tables, find CSS difficult and you don't have the time/patience/will to learn then no one is forcing you to.
ReplyDeleteThe hardest thing about going from creating table-based designs to using CSS for layout is the shift in thinking required.
Sure, there are some examples of when non-tabular information is easier to arrange in a table than using CSS... so in those situations use a table!
However there are very few (if any) situations where you absolutely must use tables for the underlying design of an entire web site.
You know usualy i don't comment on crap like this, but listen mate.
ReplyDeletei've been using tables since frontpage, and i see you point, but when i had to design some good complicated websites tables were useless. many glitches and gaps and other kinds of things, and besides de diaharea of code that it is mixed with javascript made it hell to fin bugs. do everyone a favor and don't be so ignorant man, CSS is simple and way better than tables, you say that of CSS because you have no idea of the power that it has, if your knowledge wasn;t so limited you would think otherwise. trust a zillion comments mate, don;t be lazy, CSS is easy money, when you realize that, you should come and post your apologies. ;)
I've worked with CSS since the beginning. I finally gave up last year constantly fighting with trying to get this line up with that. CSS is good for styling, bad for layout. Layout is not hierarchical. CSS for layout was a bad idea. Tables are not that great and semantically incorrect, but they still work better than CSS.
ReplyDeleteThe blog author is right; the rest of you are wrong.
This comment has been removed by the author.
ReplyDeleteYOU SHOULD CHECK THIS LINK OUT:
ReplyDeletehttp://www.alistapart.com/articles/holygrail
you said that you haven't seen anyone succeed in three-column layout using CSS
well this guy has shown in the link above
HOWEVER!!!
however, your arguments are still very much true. point is; CSS shouldn't be rocket science to implement correctly on all browsers.....and i've only seen one person do it!....when really it should be easy enough for every developer to pick up in a day or so.
you nailed it right on the spot! i COULDN'T OF WROTE IT BETTER!
For all the reason's why CSS is wrong... you proposed them all, and you explained and demonstrated how and why they are wrong. and i love you for it!!
obviously tables are not best choice and can be very tedious in someone scenarios...so people think that's where CSS is suppose to come into play...however CSS doesn't perform they way it should. Not because of Language itself...but BECAUSE OF WEB BROWSERS!!!
which is why for now...tables are the "only" way of implement flawless lay design with no hassle.
i shouldn't have to spend countless hours and read 10 books to write flawless css code to render perfectly in all browsers.
I find it incredibly disheartening and astonishing the number of people who feel that because the poster disagrees with their point of view, then he must be an idiot and know nothing about CSS.
ReplyDeleteI know a LOT about CSS, I've been using it for over a decade. I was a die-hard fan of it until I started developing real world applications with it. Then I saw the reality. its broken, badly and inconsistently implemented by almost everyone, and takes too much time to try and wrap your head around trying to make cross-browser compatible.
Get over yourselves.
@ diez10: Still does not solve a dynamically fluid layout of 2 or more columns where all columns are set as a percentage width. (ie: the "holy grail" requires at least one column to have a static width)
ReplyDeleteCSS is not flawed. 99% of the times it's poorly used and most people don't bother learning it well....and this is the biggest problem with the web...it looks easy but it's not that easy.
ReplyDeleteThis article exposes an easy (and lazy) way out and like any of these illusions of simplicity it comes back hunting you later (when comes time to manage those tables).
Using such approach also shows a lack of professionalism in lossing sight of the true purpose of the web....providing content to Users. Tables are a nightmare for any non standard browsing device, may it be screen reader or your cool iPhone. Accessibility is not something you can afford to overlook anymore.
One of the major reasons people struggle with CSS is the lack of understanding the purpose of CSS. Cascading Style Sheets are a mean of controlling the flow of information on a page not to dictate to the pixel the position. If you wish to micro-manage content...perhaps your place is not working in the web realm but in a newspaper or printed advertisement shop.
The being said CSS is not perfect and there is room for improvement. Instead of abandoning the only concept on the web that makes sense, it could be a good idea to suggest possible additions to future versions
"I know a LOT about CSS, I've been using it for over a decade. I was a die-hard fan of it until I started developing real world applications with it."
ReplyDeleteSo you've been using it a decade for fun stuff or what? That means you can't possible know a LOT.
You are as dumb as the blog author.
@ Laurent: Again with the comments about how he must be doing it wrong, or that he is lazy.. blah blah blah.. do any of you actually read comments? You've just rehashed what all the other CSS fanatics have said, and ignored the responses other have posted, so you aren't contributing, your just making the comments longer and more tedious to go through.
ReplyDelete"You are as dumb as the blog author."
ReplyDelete- lol... you read well: "I was a die-hard fan of it until I started developing real world applications with it."
I find it funny how every keeps saying that CSS is nothing but a collection of hacks...
ReplyDeleteWell I don't know about you but is not using tables the original hack?
(*sarcasm)I find it natural to pack cells with 1x1_transparent.gif's and assigning height and width values to make them not collapse.
And don't get me started about nesting tables inside of tables inside of table...geesh.
CSS works fine if you just learn it.
@TheCatWhisperer.
ReplyDeleteThe rest of my comment, stated, "But just as I said in my main argument every individual project merits individual consideration."
I agree that the cost of upgrades is high for large organizations but a necessary part of maintaining not only currency but efficiency, productivity, security and to protect against liability. Very large organizations have a planned cyclic upgrade program either through leasing contracts or planned asset management. They certainly may not be able to roll out upgrades willy nilly but your argument fails to acknowledge that large companies typically ensure that applications that are run in such environments are patched for security vulnerabilities when they become apparent. There is sufficient notice that IE6 is considered obsolete by MS and that the appropriate measure for security is to upgrade to IE7.
Just to restate I am a pragmatist when it comes to website development and design. I would sooner compromise on IE6 than go hungry or not ensure the project meets the needs of its visitors. If you have a statistically meaningful number of prospective users/visitors that use IE6, by all means ensure some measure of compatibility.Blanket compatibility of IE6 will slow the progress of a better web for all. It will mean interactivity, accessibility, innovation must wait for the laggards.
The funny thing is that the people that were originally started using tables for layout weren't waiting for the laggards they we pushing forward, trying to innovate and leave the linear, sterile web behind. Such use meant that people using Lynx were out of luck and some versions of netscape would literally choke and die on nested tables.
I truly understand the cost and the consideration I just think you missed the whole of my point.
"There is sufficient notice that IE6 is considered obsolete by MS and that the appropriate measure for security is to upgrade to IE7."
ReplyDeleteOne WOULD assume this is true. But its not. Trust me (or not) our clients are some of the people that prove this statement false. Currently some of thier plans are to update sometime in 2009-2010.
It really sucks. we have started making changes that effect IE6 in anegative way, the application is stillusable, just looks a bit off. Mainly so we can move forward, but then again, IE7 isn't all that much better ;)
Take a look through some of the current browser statistics (one that focus primarily on big business), you'll see I am right about IE6 still being in use for a large portion of users.
It sucks. A lot.
tables are good for layout only if your site contains little content. content within a table is only displayed after the whole table is read, making load times longer as content is added.
ReplyDeletethe reason tables are shunned as a layout tool by the css community is that they have a lot of overhead. yes, they are easy, but using tables layouts for a dynamic attractive site can result in as much extra coding as doing it with css.
the 3-column css layout example you found was actually a bad example. floating elements for layout purposes is a terrible idea; they will usually look different on different browsers and are extremely difficult to work with as major layout sections, acting very buggy, as you discovered.
the true best way i have found for layout is absolute positioning with css and divs. you simply pick a reference point, then position all your elements based on the same 0 position. with absolute positioning, the order of html elements is irrelevant, there is very little overhead, and, since the elements do not reference each other, changing one page element will not affect others, unless you make it so.
the "3-column layout" is no big deal with absolute positioning. table layouts are good for small, simple, or amateur site design. any need for extensive content, dynamic presentation, or layered elements calls for css layouts.
PS smashingred: "But just as I said in my main argument every individual project merits individual consideration."
ReplyDeleteSorry if it came off as me ignoring that statement, it is entirely correct and I agree wholeheartedly.
As I see it there are cases where tables do make sense (ie: simple brute force mock-ups, simple pages that aren't meant to be "accessible" or read on other devices, etc).
There are places where CSS makes sense... blogs, news or other information type pages. Pages meant to be read on multiple platforms (desktop, mobile, etc) and those that need to be accessible.
Then there are places where you use a toolkit like Dojo/GWT/Ext.js... Enterprise type web applications .. aka: web 2.0.. ugh).
PS: IMO, when you need to display on a mobile device, and you aren't a simple blog, news site, you should have a separate interface with less navigation, etc. Yes, you CAN use CSS for this purpose, but you are still sending down all the same data and styles. You should be minimizing what you are sending the user however. This can only be done on the server side before the response is returned.
@TheCatWhisperer
ReplyDeleteThe only way companies have avoided notice is to manually disable the update notification system. Or manually disable security updates on the various installations on the networks and systems. Therefore this means an acceptance that there may be future incompatibilites with technologies. Disregard for notifications is not the same as insufficient notifications. Ever time I run windows with IE6 on it (which I do when I need to test compatibility) Windows Automatic Upgrade comes up wanting to install IE7. Organizations were given the chose to disable this message and not be reminded.
Again I am not against making sites compatible with IE6 but just think it is harmful in the long run on an every site basis.
I hear your frustration and I understand your point of view.
Thanks for the discussion. :)
@TheCatWhisperer
ReplyDeleteWe are in agreement. Intranets, personal projects and some application interfaces may require the use of tables.
As far as mock ups and such I use an arsenal of components I have built ot build out projects so that every time I need an inline navigation bar I am not typing it out but pasting it into my design. I also use basic template wireframes every time. So it is not easier or harder to use tables or CSS for me. Once I have a functional browser compatible solution for a design problem I integrate it into my toolset and reuse as needed.
What a great discussion on this thread. And even though I disagree with the post author I sense that people will get something from the comments.
Be practical folks, be dating and never say never.
I really appreciate this perspective. I know in my heart of hearts that tables aren't really right (from an SEO or accessibility point of view, or even from a plain old semantics discussion) but I have always said (quietly, when I'm alone and nobody can really hear me) that CSS is fubar.
ReplyDeleteIf you want me to use something, make it easy to use. These days, whenever I want an interface, I just tell Dreamweaver to knock one out for me. I have no interest in spending a week (or more) trying to get my layouts to work in all major browsers.
I don't want to be bogged down in CSS minutiae, I've got a business to run...
dude, first I thought you were just trying to get attention, but after reading your post, I can honestly say you have no clue what you are talking about.
ReplyDeleteHas anyone considered PRINTING?? Try making a css-based layout print nicely without some effort and you'll find a miserable physical representation of your work. Try printing with a table based layout...Wow - it prints just like it looks on the screen. Hmmmm.
ReplyDelete@JD,
ReplyDeleteMost CSS people know how to format pages using a print stylesheet that to ensure that the output of the page is appropriate for that medium. This leaves the designer the oppurtunity to customize how the page looks when printed and ensure a high quality output.
Again it comes down to knowledge. People who are truly proficient at CSS in web design use print stylesheets for many if not all projects to address your very issue.
What is certainaly valid about this post is that CSS is currently woefully inadequate. Any language that requires one to spend months learning all sorts of arcane rules and methods to achieve something as basic as a 3-column layout is seriously broken.
ReplyDeleteThose who defend CSS so vociferously are protecting their turf, because they've mastered (or so they tell us) all these arcane rules so their site will work in Opera 1.0 for Linux, or whatever. When the day finally comes that CSS gets out of the way and lets designers do what they do best -- without a whole bunch of time and money wasted on making CSS do what should be the most simple tasks -- you all will be superfluous. Just like the typesetters and darkroom technicians of yesteryear.
Until then, I understand why some people stick with tables.
The problem is that some people can't tell the difference between "is" and "ought." You can do layout in CSS. Just because you can do layout in CSS doesn't mean it doesn't suck at it, but some people can't seem to tell the difference. CSS SUCKS AT LAYOUT. You know what? I learned how to do pasteup in school. That was how graphic designers did layout for years. Then we got computers, and graphic design was done using a metaphor of pasteup. Then HTML comes alone, then CSS. CSS does not even remotely resemble how people have done design work. The cascading model is stupid if you aren't strictly making a hierarchical document. I want THIS next to THAT. I want THIS to be aligned with THAT. I want text to go from THIS box to THAT box. CSS can't do any of that. There are probably a hundred usable ways to define layout, but CSS is not even one of them. There are still a million things you can do in QuarkXpress 1.0 that CSS doesn't even have on the drawing board. But I'm supposed to eat CSS and say it's candy. Well, it's not.
ReplyDeleteI love it. I love it. I love it.
ReplyDeleteCSS for layout is wrong not because it cannot be done after hours of effort put into study and practice.
CSS for layout is wrong because what it should take minutes to learn and put into practice is so skewed that it is not worth your return on investment.
People. We have lives and families. Screw CSS for layout.
Love it. Tables are so much simpler for layout. I've been thinking this all along but the CSS nazis keep knocking tables down.
ReplyDeleteKeep it simple. Eff the hacks.
Finally. Somebody with both the intelligence and the balls to post this. Well done.
ReplyDelete> CSS should be used for styling, tables should be used for layout.
ReplyDeleteYup. I've been saying this for nigh on a decade now.
hahaha, you MUST be joking! :D rofl rofl
ReplyDeletehttp://www.alistapart.com/articles/holygrail implicitly makes the case against CSS: it shouldn't be that difficult. There are some simple things we all want to do that CSS makes more difficult than it needs to be. That's a shame, and even more a shame that it didn't get fixed in CSS 2. (Stu Nicholls has a nicer solution at http://www.cssplay.co.uk/layouts/flexible-equal-height.html, but why should we need the padding/margin hack?)
ReplyDeleteAnother simple example is this: try to center a dynamic-width div horizontally inside a parent div. This ought to be trivial. It's not.
As a result we're stuck with tables or with gnarly CSS hacks. Maybe CSS 3 will help, but I'm not holding my breath.
You're simply not up to the front-end job. Here's some honest advice:
ReplyDeletehttp://aplus.rs/css/on-css-tables-and-layout/
Nobody's jealous of you, Aleksandar. They can just recognize a crap tool (CSS) when they see it. XSLT, for all its faults, can do a million times more than CSS will ever be capable of. I've got customer sites that can be rendered for the desktop, mobile, plain text, PDF, glossy pamphlets, or be read to you over the phone in a sultry feminine voice. XML + XSLT + an appropriate rendering engine is real separation of content and presentation.
ReplyDeleteI did check out your work though, you're obviously a professional and your markup is great. But I didn't notice a lot of delivered-application type of work, which is where CSS can get really hairy.
Man, why did you have to tell everybody!? ;-)
ReplyDeleteActually, you're absolutely right. Tables still are the most efficient and browser-compatible approach to multi-column layouts. It's like 1001 browser-hacks and workarounds (using dozens of lines of "clean" css-code, sometimes even in 'frameworks', LOL) against a simple table. No one pays for "interesting" code, people pay for solutions. That's what it's all about.
You're an idiot. There I said it.
ReplyDeleteThats exactly as usefull a comment aas is your article since ou clearly don't have the knowledge to make that kind of statements.
I recommend: http://csszengarden.com/
@Alex Marandon
ReplyDeletethats because the problems raised by the article do not exsist.
CSS is not difficult, its just a matter of learning how to code with it. Understanding the box model etc.
It's no different than learning to code in c++ for example, you need to understand the fundamentals first and foremost!!!!
This guy is ranting about stuff he know's absolutely nothing about.
1 more thing
ReplyDeletewhen u understand the box model and build a site knowing the browser inconsistencies up front you RARELY need to use hacks.
{CODE} M0nk3y: please teach us: make two columns side by side with independent content, the same height, without hacks.
ReplyDeleteCenter a div, of dynamic width, horizontally in a bigger enclosing div, without hacks.
Please accept my thanks in advance.
I appreciate the essay, as it forced me to think about why I'm choosing a div/CSS layout over tables (and making that choice for a great number of people).
ReplyDeleteI don't choose tables, as I think that there are advantages to using a CSS-based layout that can put main content first in the source order (it's more accessible, it can decrease the page's perceived load time, etc.), as well as flexibility for e.g. small screen devices where you might want columns to be positioned one after another rather than side-by-side.
But, you make a good point about web developers needing to challenge the assumptions that have permeated the craft. I should use divs over tables because of specific technical reasons (and understand their limitations) rather than crap like "tables must only be used for tabular data" or the myth of complete style / content separation.
Thanks for the challenging read!
@jlundell:
ReplyDeleteI know your comment was directed at Code Monkey, but I couldn't help but show you how to do this. It's simple.
While I'd normally use faux columns on a container div to achieve this (easier way), there is a CSS way of achieving it, too. Works in all modern browsers, as far as I know (including the outdated IE6).
See http://www.leliathomas.com/n00bsite.html.
I think people are getting way too polarized here. As I stated way up above, if you want to use tables, you should. Just don't expect them to be as flexible in design as what you see on, say, CSS Zen Garden, which truly shows how separated content and design can be with CSS. Also, people shouldn't delude themselves into thinking tables are just as friendly for the disabled (they're not) or non-human things, like Google's bots; or, for that matter, mobile phones that don't have good viewing capabilities yet. If you have a small site, and you don't want to take the time to learn CSS (it is a chore), then use whatever you like. It won't matter!
However, no interface designer should consider using tables--unless, again, they want people like me to get paid to go back and convert it to CSS to speed it up, make it easier to edit, amongst other things.
I get the feeling from reading a lot of these comments that most of the users here are speaking only for their personal sites. Their desire to use tables above CSS is fine and valid. (The few developers who have professed a dislike for CSS have been programmers, not interface designers, so even that is explainable.) Any professional designers in the mix, though...no. No explanation for professional interface designers thinking CSS is more difficult than tables or less user-friendly.
Anyway, I think everyone should do what they want, but be aware of the consequences and issues of using whatever tool or language you choose.
The article is still amateurish, though, and should not be taken seriously by a professional web designer. Good interface design is extraordinarily important. The fact that Ron Garret was an "early hire" at Google matters little. He was never an interface designer, as far as I know, and so it makes his article based on many things, but not expertise.
I make CSS layouts all the time that actually work. It can be done. Just because one person doesn't know how to do it doesn't mean it can't be done by somebody else.
ReplyDeleteBTW, my blog uses a three column layout:
CMZ Media Developer
and has a new entry on PROPER use of tables that would be good for all web developers to read:
Tables vs. Tables
"the myth of complete style / content separation..."
ReplyDeleteActually, that can be done.
"No one pays for 'interesting' code, people pay for solutions."
ReplyDeleteActually, I was just rejected for employment by a web development company because they found a table on one of my sites. Didn't matter to them that the table was presenting tabular data.
"Try making a css-based layout print nicely without some effort and you'll find a miserable physical representation of your work."
ReplyDeleteNot if you know what you're doing.
"Try printing with a table based layout...Wow - it prints just like it looks on the screen. Hmmmm."
Every once in a while a table-based layout will print fine but quite often it is too wide for the printed page and all sorts of other things go wrong.
@Lelia Katherine Thomas
ReplyDeletethanks for the backup, I'd also like to point out faux columns is perfectly fine.... and IMO not really a hack but a technique.
@ Lelia:
ReplyDelete-- padding-bottom: 18000px;
-- margin-bottom: -18000px
Really? this is a hack to get CSS to do what you want. You shouldn't have to do that. With a table you don't, as it grows properly with the content (on either side). Your solution would probably fail if the content got larger than 18000px.
That is the point. CSS FAILS at properly building columned layouts in an intelligent and robust fashion. Yes Tables suck too, but to sit here and tell us that CSS works in this fashion is ridiculous.
PS: "n00bsite"... poor form... We don't hire people who use "n00b" to describe people they obviously look down upon. We'd much rather hire someone who will take the time and patience to respectfully teach someone their point of view, then discuss the merits rationally. Not lower themselves to calling others "n00bs". Perhaps "two_columned_CSS_layout.html" would have been more respectful, and accurate (as well as SEO friendly).
@ ChristianZ:
If a company wouldn't hire you because they found a table in your design, then its better you didn't work for them. Did they ask you why? Did they give you a chance to explain why tables made better sense there? If not then they would probably be hellish to work for anyway? Who were they?
If they find code that is sloppy or poorly designed, that's one thing, but "we found tables in your code.. no thank you"? Laughable.
What my company cares about and how we hire is based on how you decide what solution to use and why. If you make rational sense, then good, if you spout fanatical drivel then your not getting hired, you would be too difficult to work with.
Common sense. Sometimes tables work, sometimes CSS, most times however (in our enterprise application world) using a layout manager works better. (ie: dojo, get, Ext.js, etc). Of course, our applications aren't searched or indexed by google, etc. So SEO isn't a requirement or priority. However many large site out there who are ranked at the top or very near (in top 10 results) also use toolkits like Dojo, GWT, etc. So I think favoring CSS over tables/etc for SEO friendliness is a waste of time, I really don't think Google or Yahoo, etc care. A fellow associate of mine is an SEO consultant and he says there a far more important things to do than worrying about Tables vs. Divs/CSS.
This article made me laugh so hard... Absolutely awesome. Greatest comedy ever seen. :D
ReplyDeleteSuggestion for your next articles:
How to make a fool of myself.
Still laughing.
tables vs. css is not an either-or question. You can use CSS to do table based layout:
ReplyDeletedisplay: table-cell;
and the UA will create implicit table-row and table to surround it. This is part of the 2.1 spec.
For more details, go read this book (its not long):
http://www.sitepoint.com/books/csswrong1/
Only it doesn't work in IE 6-7 (but it does in IE 8 which supports CSS 2.1). So for those two browsers you'll need to server an alternate CSS stylesheet, or even alternate HTML.
btw. source order is not as important as people think, either for accessibility (use skip-links) or SEO (use heading tags).
Yes, CSS is hard, but all you've succeeded in doing here is making yourself look like an idiot.
ReplyDeleteA real web professional does not have the problems you mention, and they also understand why tables should not be used for layout.
Your argument is aimed at hobby coders, who can't be bothered to understand the usability/accessibility behind coding a proper webpage, and simply want an easy way to make things look right for the people that use a normal browser.
What's unfortunate is that people are taking you seriously, but I guess that's good job protection for those of us who actually DO know how to code.
@TheCatWhisperer, thanks for saving me the effort of looking up Lelia's hack. (And I note that nobody's offered a solution to the should-be-trivial centering problem.)
ReplyDeleteFWIW, I use CSS mainly myself. It irks me, though, that it doesn't address, in a straightforward way, the problems that all of us have to solve every day.
Take the column-height issue. Why don't we have a simple method of making one div the full height of its parent div? Ditto centering?
When the CSS gods deprecate <center>, they're either saying "you don't need to center stuff" or "we've got a better way to do it". But neither is a defensible claim.
table-cell might be a nice solution to columns, but having to code an alternate solution for IE6/7 is a non-starter, for me, today and for the foreseeable future.
Really? this is a hack to get CSS to do what you want.
ReplyDeleteNo more so than nesting tables, or using something for a layout that is meant for tabular data. However, I clearly stated that this was not the way I would normally do it, as it is not the easiest. The easiest, by far, and as Code Monkey stated, is faux columns--a simple background image on a containing div. I have used this, however, many times, for sites that have fixed heights (of which there are many in the small business realm).
Your solution would probably fail if the content got larger than 18000px.
You're right (of course, it can be increased to any pixel amount imaginable, so it's unlikely), which is why I don't use this method unless I'm dealing with fixed heights. However, it is a method, and someone wanted to know how it was possible using JUST CSS, and being compatible with other browsers, etc., and so I gave the solution. Simply because it is not the most ideal solution does not mean it isn't a solution, just the same. Nor does it mean that tables would be better suited for this. The second that layout got more complicated than that, nested tables (and likely inline CSS) would be used.
CSS FAILS at properly building columned layouts in an intelligent and robust fashion. Yes Tables suck too, but to sit here and tell us that CSS works in this fashion is ridiculous.
Vertical length is an area that CSS2 needs a lot of help in. However, I haven't had issues on the horizontal end, and most of the time I don't need to make things of equal height. When I do, I use the solution(s) mentioned above.
CSS2 currently does somewhat-fail at columns, amongst other things. As said originally, I'd normally use faux columns, which work in any condition--table or CSS. A problem with CSS is it's slow to develop; a major issue lies within browser dissimilarities, which is both a related and separate problem, altogether. Many good things in CSS3 that will fix a lot of issues discussed here will not be rolled out for quite some time, because of all the different browsers, not to mention versions of those.
By and large, however, CSS is a million times better than using a table. I actually cannot think of an exception to that, when I take into account anything besides my own ease-of-use. (Though, for the past three years, I can't say I've wanted to use tables, because CSS is second nature now.) You may dislike the fact that I used a hack to achieve that double column in a strictly-CSS manner, but my example site would work for disabled individuals, be read easily and merrily by bots and degrade well on all mobile phones that could browse. You cannot say the same for tables (unless you use CSS in them, so things aren't hard-coded in the content!).
If you don't believe me, grab someone's mobile phone that doesn't have the latest and greatest web-browsing technology. Go to a website that is filled with tables to achieve the layout. Tell me how that goes. Even bash.org looks like crap on my fiance's Blackberry, and it's about as simple of a layout in tables as one can get.
Interestingly, despite the numerous calls for CSS-gurus to prove CSS' worth, no one has been able to give me an example of how designs like this from CSS Zen Garden or this one from CSS Play could be achieved using tables-only and degrade nicely when turning off the page style. I certainly don't know of a way.
There's a reason for that. Tables are only easier for the designers who choose to use them (and even then, simply because they have not taken the time to learn what is actually a more efficient language); tables do not take into account anything other than the whim of the interface designer. As said above, this is fine for people who just want to have personal sites that friends and family and random internet users enjoy, but it should not be done for professional websites that want to be viewed by all users and across media platforms.
PS: "n00bsite"... poor form... We don't hire people who use "n00b" to describe people they obviously look down upon. We'd much rather hire someone who will take the time and patience to respectfully teach someone their point of view, then discuss the merits rationally. Not lower themselves to calling others "n00bs". Perhaps "two_columned_CSS_layout.html" would have been more respectful, and accurate (as well as SEO friendly).
Oh, un-wad your knickers, please. If you're offended by my calling people who don't know what they're doing (but act as though they do) n00bs--the very definition of it--then you must surely have a difficult time functioning in the real world. You're making me happier about calling it that, by the second. It's a joke, not the end of the world.
@jlundell:
Is having a centering class for divs not an option? You can use "margin: 0 auto;" in many cases and "text-align: center" for text. I've yet to understand why < center > was removed. I can't recall if there's a change to that in CSS3 or not. Anyone know?
@thecatwhisperer
ReplyDelete"If a company wouldn't hire you because they found a table in your design, then its better you didn't work for them. Did they ask you why? Did they give you a chance to explain why tables made better sense there? If not then they would probably be hellish to work for anyway? Who were they?"
Full story here: Tables vs. Tables
I was kind of shaken by the fact that the people who don't know what they're talking about are the ones that are in control. The one guy I dealt with was nice but he was being fed bad information by his tech team.
@Lelia, the problem with "margin: 0 auto;" is that it only centers fixed-width elements. Why, I don't know, but it's the spec. If the element has auto width, the auto margins go to 0.
ReplyDeleteExample: I have a nav menu in the form of a div enclosing an ol. I want to center the entire menu, but not the individual lines, in a nav column.
I think that CSS is the holy grial in the web development, but as any other tool, it can be difficult to learn all the secrets but definately is the best at least for me.
ReplyDeleteJoe Armstrong said...
ReplyDelete"HTML tables are designed for tabular layout."
Sorry Joe but HTML tables are for TABULAR DATA - Tables are never for layout!!!!
Whoever thought CSS is easy is wrong. It takes a lot of time to fully understand CSS and being able do build what you really want on a webpage.
ReplyDeleteBy saying what you said in this article, you completely ignored screen-readers and search bots, that will have a really hard time to read the contents of your page.
tables have the correct semantics for doing layout.
Are you crazy!? By saying this you show that you know almost nothing about what semantics really means. Tables are used for tabular data, as was said before here.
Anyway, I just think that you should study a little more CSS before writing something like that, because to me, it looks like you don't know much about it.
Nice article. Shows the whole world you are a real bad webdesigner ;)
ReplyDeleteI agree that we have to study and apply (I work on sites since '96) but most people here doesn't get that a simple layout should be simple to setup too, without wasting hours trying to do some stupid alignment.
ReplyDeleteAbout screen readers and web bots, both are smarter than most people thinks :)
This comment has been removed by the author.
ReplyDeleteI completely disagree with you and have posted my comment on Refresh Cleveland. I think you're too hung up on the 3-column thing and not seeing that layout and presentation are really the same thing here.
ReplyDeleteSaying that I think you deserve a pat on the back for posting this and sticking to your guns in the face of some of the offensive comments.
what a fool. 10% of web designers still use html table-based layouts. so you are one of the elite? i think not.
ReplyDeleteevery successful web company uses css for layouts, grid frameworks have been made, so all those experts are wrong and the frameworks were just a waste of time? come on now, learn a thing or two first.
Thank you Ron - finally someone with sense! I am a web DESIGNER - I'm not an IT boff, although I do write my own script, and quite frankly CSS pages from a layout point of view are a nightmare! Tables are soo much better at putting things where you want them and keeping them there. I also find CSS layout page have a similar boring look to them. I couldn't agree with your article more. Thank you, thank you & thank you.
ReplyDeleteThe people who say it's a nightmare are the people who don't know how to do it, like a toddler saying they never want to drive a car because the one time they tried it they couldn't reach the gas pedal.
ReplyDeleteI know there's no point to posting this. I'm not going to change anyone's mind. Don't post... don't post...
ReplyDeleteDamn.
ChristianZ, to extend your metaphor, they built the car with the gas pedal ten feet below the seat and with the steering wheel on the side door. Yes, it's possible to learn how to drive it... but why not use the car that's built for normal-proportioned humans?
The real problem here is that people who went through the torture of learning how to do something that should be simple in CSS have invested so much ego in this byzantine education that they think it makes them brilliant and special, and so they can look down on people who complain. This is predictable enough. It's the curse of the true genius that people don't value true simplicity.
Actually, all I'm saying is that if you really know how to do a CSS layout it isn't hard and it IS simple. Trust me, if I can learn to do it anybody can. This isn't about looking down on anybody.
ReplyDeleteBut you haven't learned to do it. Your own site relies on Javascript to cover up the deficiencies of CSS.
ReplyDeleteNot every site I have reflects everything I know. I have numerous sites I've made over the last 13 years. Each one probably reflects a different stage in my learning. And when you say defects in CSS you probably mean defects in how a particular browser handles CSS.
ReplyDelete> Not every site I have reflects everything I know.
ReplyDeleteThis isn't just any old site, this is the site you cited to support the following claim:
> I make CSS layouts all the time that actually work. It can be done. Just because one person doesn't know how to do it doesn't mean it can't be done by somebody else.
So, no, you do not make CSS layouts all the time that actually work. The one site you cited to support this claim has broken CSS and relies on Javascript to fix it.
> if you really know how to do a CSS layout it isn't hard and it IS simple.
There are only three logical possibilities here:
1. You are wrong, and CSS layout *is* hard.
2. You are right, and it is easy, but you don't know how.
3. Is is easy, and you do know how, but you perversely chose to do it the hard way and use Javascript hacks, and then you also chose to cite the site that used those hacks instead of one that did it the supposedly easy way.
Which is it?
The one I cited is a WordPress site and the only WordPress one I have. I didn't create the theme or the JavaScript or anything for it. I have customized the appearance somewhat but nothing that would affect its three-column layout. Some of the edits I have made to the style sheet were fixing errors in it (that the original coder put in; not errors inherent to CSS) and I may not have caught all of them yet.
ReplyDeleteAccess:
ReplyDeletehttp://www.csszengarden.com
And se what the css can do.
We will speak each other again when you have a visual handicap :)
ReplyDeleteCSS vs. tables reminds me a lot of Perl vs. Python. Perl has more than one way to do everything, and the Perlites would tell you that makes it the *best language ever.* The Pythons would argue that having more than one right way to do anything is inefficient and a PITA to maintain later on; how can you pick up someone else's code quickly if you first have to grok their idioms?
ReplyDeleteI discovered a case in which both pure tables and pure div/CSS layouts lose: drop-down menus. The prevailing method of making css-drop-downs is to use the ul/li tags for hierarchy of one kind or another, and then have the list items (or certain list items, if you're not using nested uls) appear on hover.
Sadly, IE7 does not properly render display: inline block when applied to ULs within tables. So this part of the page still needs to be inside a div and NOT inside a table. Ouch.
As for me: I'm sticking with tables, and recommending that people jettison the drop-down menu, which mostly just indicates that your site navigation is waaaaay too complicated anyway.
Sorry, but by reading your arguments I can only conclude you don't know anything about CSS. The "problems" you pointed as being disadvantages of CSS using(like content order, lack of fluidness or same-sized columns) can be perfectly managed by a decent CSS developer. With the advantage that CSS-based layouts look way more decent through Search Robots eyes and are way more acessible for people with special needs (like blind ones).
ReplyDeleteTry studying CSS a little bit harder, then you criticize it with better arguments.
I didn't like CSS when I first started using it. I thought tables were much more efficient. Then I actually started to learn CSS. Now I know that while tables are good for some things (especially when you just want to get it done, quick and dirty), CSS is by far superior to tables. Sometimes I'm forced to use tables, but I figure if I can do it in tables, I can do it better in CSS, and if I can't do it in tables, I most defenitely can do it in CSS.
ReplyDeleteCheck out http://www.alphadeltaphimn.org
Most everything there is due to CSS (sans the calendar which was pre-built)... and notice how you can select the text as it is positioned above the flash? And the transparent bar at the top of the page is placed over the flash? Also notice how it looks virtually the same in every modern browser (if you're using IE6, shame on you)? I'd like to see someone do that with tables.
Elegant and to the point. Didn't realize this point was so touchy, but so it goes. Perhaps someday I too will find the time to attain CSS Nirvana, but for now using it for formatting (not layout) is good enough. Thanks so much.
ReplyDelete"Perhaps someday I too will find the time to attain CSS Nirvana."
ReplyDeleteDon't make it seem harder than it is. If I can learn CSS for layout, anyone can.
This would have been a better argument if:
ReplyDeleteWhat you suggest is impossible wasn't possible.
If you had simply made your own 3-col layout with floats set up to EASILY do what you want them to do rather than took somebody else's and then attempted to tweak it by swapping markup around when the CSS doesn't need to be set up that way in the first place. The stuff you copied was for elastic and liquid layouts. Your columns are all fixed.
Your argument didn't hinge on the idea that if CSS can't 100% perfectly separate content from presentation it should be abandoned in favor of accessibility-murdering, markup bloating, simple thousand page layout-tweak confounding, DOM node migraine inducing, SEO-unfriendly table layouts. You could have saved everybody a lot of reading and just pointed out the br tag. Then we wouldn't have been forced go back and figure out what the whole dumb point was in the first place.
You understood that we'd all be perfectly happy to use table display properties to make life easier if Microsoft hadn't dropped the ball on that too... for oh... say... a decade or so now. Yep. CSS 2 property. Still waitin' on Microsoft. And no, you don't need to use divs to act like rows and TDs.
I recommend CSS Mastery, which gets straight to a lot of the stuff that confuses people about CSS and also the CSS pocket reference which very quickly gets to the point when it comes to the specifics of how things are rendered (or supposed to be rendered) by the browsers. It's by Eric Meyer. I can assure that he knows a lot more CSS than whoever hacked together those tutorials you linked to.
Or just don't bother. Continue to stay firmly rooted to the '90s and continue to make more cleanup work for me until you've completely removed yourself from the job market like so many before you. I've got a 2-flat to save up for and could use the extra hours.
You picked a lousy industry if you don't like learning new stuff.
Wow, Pherdnut put it well.
ReplyDeleteFuckin A man. I am great with setting up tables...but CSS takes me ten times as long to design as tables.
ReplyDeleteThat's because you've spent more time working with tables than you have with CSS. When you first learned how to ride a bike were you immediately doing Bar Spins, Smith Stalls, 180s, and other sweet ass tricks? It takes time to learn something new and get good at it.
ReplyDeleteBut in the end, it's worth it, because now you've got a more efficient way of building sweet ass sites.
"but CSS takes me ten times as long to design as tables."
ReplyDeleteWhen you really understand CSS that will no longer be the case.
I thought I'd move to CSS based layout and moved one of my table based Frontpage sites to Expression web. My other webs all work whether in IE or Firefox. Now my CSS based web only works properly in IE.
ReplyDeleteI have posted queries on various web site forums and no one has been able to solve the problem.
It is obvious that there is a problem with CSS for layout.
Nearly all of the comments rejecting the authors argument stress that you need to be professional, if you can't do layout using CSS then you need to either give up or admit you're ignorant. I have bought CSS Sculptor and I'll see whether I can produce new webs with that tool. Otherwise I'll stick to what I know and use CSS for presentation. I am moving to adding content using PHP Includes often via CTM software like CuteNews. As for CSS for layout I have had to resort to setting a background colour in my divs to help figure out what the CSS is doing.
So the future's CSS? Is it? Well IMHO the future is going to restrict the creation of new websites to the pros. This dogmatic move to CSS is going to restrict access.
If it is nothing more than learning (as many commenters suggest) how to use CSS for layout properly then maybe we need to find somebody who can produce the materials for understanding how to do it.
I also note that Microsoft's Expression Web 2 is not producing webs that are rendered in the same way in browsers other than IE7. so why is that? does Microsoft need to educate their programmers? Or is there a good reason why the code doesn't work on any modern browser?
"Nearly all of the comments rejecting the authors argument stress that you need to be professional, if you can't do layout using CSS then you need to either give up or admit you're ignorant."
ReplyDeleteI know you're comment is not directed at me but I want to jump in and say that I have said if I can learn CSS then anyone can. There's a bit of a learning curve but not a huge one. Of course you can master the basics then learn more from there.
Why don't you e-mail me the address for the site you tried to create a CSS layout for?
"Nearly all of the comments rejecting the authors argument stress that you need to be professional, if you can't do layout using CSS then you need to either give up or admit you're ignorant."
ReplyDeleteI know your comment is not directed at me but I want to jump in and say that I have said if I can learn CSS then anyone can. There's a bit of a learning curve but not a huge one. Of course you can master the basics then learn more from there.
Why don't you e-mail me the address for the site you tried to create a CSS layout for and I'll give a few pointers?
Geoff,
ReplyDeleteNobody is telling amateurs they can't use tables for layout. The argument is what pros should be doing and why.
You may have trouble getting advice because Front Page has a bit of a stigma attached to it. The use of it suggests that you're intimidated by the prospect of learning to code from scratch and if you've never hand coded you're trying to run before you've learned to walk with the CSS. This is an assumption of course, but I have no idea why anyone who is comfortable with hand coding would use something as clunky as front page or even dreamweaver for that matter.
You don't have to be a pro to know how to build sites using CSS, you just have to take the time to learn it and possibley rethink they in which you code/layout your sites. Chances are, there's a better way.
ReplyDeleteAlso, why would anyone use Frontpage or even ExpressionWeb?
Open up Notepad and start coding. If you can't do this, you've got a lot to learn about CSS and Web design/development in general. Anyone who uses only a WYSIWYG editor really has no right to criticize the use of CSS for layout.
Learning how to use CSS is not difficult at all, the tricky part is that you have to learn (and experiment) all the tricks to obtain the same results in all the common browsers.
ReplyDeleteThis could be acceptable if you had not to find new tricks each time the layout need minor updates.
This is a huge time waster, and where CSS fails.
@mark. i use Frontpage and Expression Web 2 because I want to get the job done. I can't see how anything but a web of a couple of pages could be constructed in Notepad. You are of course joking aren't you? :) Personally I don't only use a WYSIWYG editor. And it's hardly possible to even use Frontpage without getting into the code.
ReplyDelete@Perdnut, Do you really think that all those major websites eg. eBay Amazon are coded by scribes using Notepad? There are lot of web designers out there who make the use of all sorts of tools that make the task in hand easier.
ReplyDeleteFor the record I was using code before CSS was invented (and HTML.
Any, for example, journalist could find a lot of material that supports arguments for reasons why CSS is not good for website layout as well as arguments for its wider use.
The journalist does not need to be able to write CSS to find arguments for and against using CSS for layout.
@ChristianZ,
ReplyDelete"I know your comment is not directed at me but I want to jump in and say that I have said if I can learn CSS then anyone can. There's a bit of a learning curve but not a huge one. Of course you can master the basics then learn more from there.
Why don't you e-mail me the address for the site you tried to create a CSS layout for and I'll give a few pointers?"
Thanks for the offer ChristianZ the website is operational but not correctly in Firefox. I have isolated and altered the code so that at present my problem is reduced to the background image being absent on one page and out of position on the rest.
By finding and reading Ron's article I have realised that I had fallen foul of exactly what he was writing about:
"The CSS layout primites are inadequate because they do not allow elements to be positioned relative to each other, only relative to their containers."
I find that there is literally a Missing CSS Manual (I bought it) And I like the "the book that should have been in the box" on its front cover. As for the W3C:
http://www.w3.org/TR/CSS21/box.html
Hardly intelligible, but I suppose it's all there. I have republished my live website to a subdomain so I can alter it at my leisure.
Again...
ReplyDeletehttp://www.alphadeltaphimn.org/
I'd like to see someone do that with tables.
Also, for purposes of expanding everyone's educational goals, check out:
http://www.alistapart.com/
http://960.gs/
http://webdesign.about.com/od/layout/a/aa111102a.htm
@Mark
ReplyDeleteDid they do that with Notepad?
@Geoff,
ReplyDeleteFirst, I did that. Second, no, I didn't use Notepad exclusively on that particular site, but I did use only the code view in Dreamweaver.
My point about using Notepad is if you can't hand code an entire page, without the help of a WYSIWYG Editor and without all the little hints from fancy code editors, you're still using training wheels, and you've still got a lot to learn before you really can say you know what you're doing.
Now, I'm not trying to slight anyone here, I'm not trying put anyone down, I'm just saying that you're never truely free to do whatever you want with your code, until you learn the ins and outs of every little detail about your code and truely understand what it's doing and how it's doing it.
And I'm using "you" ambiguously here.
I skeptically and briefly looked at the essay thinking it was going to attack CSS in all the wrong ways (as people often do), but it actually hit the right points. I disagree that tables are the final solution; the right solution is to fix CSS. However, I do agree 100% that we need a options to "position relative to another element", and less dependence on the HTML structure to achieve certain layouts.
ReplyDeleteSome of the issues have been addressed by later CSS releases, but are not supported in the IE. For example, the common versions of IE lack CSS table layouts, min/max width and height (needed to allow widths to "stretch to fill contents"). IE7 and IE8 will be a major step towards the CSS dream, but we can't use the new CSS properties until the old browsers die off.
@Henry,
ReplyDeleteBut is the problem with CSS or IE? I think IE 6 will be done in about a year which opens up a lot of doors. 7's not too bad, although in some cases more of a pain than 6 since they fixed just enough things to make harder to filter bad IE 7 behavior without document branching which kind of eliminates one of CSS's major selling points.
@Geoff,
I wasn't saying you were incapable of coding by hand, I was saying the use of front page suggests you haven't done it with CSS yet. Want ads that are obviously written by devs (i.e. they don't confruse java for javascript or ask for "w3 code" frequently ask for hand coders. That preference wouldn't exist if they thought they could better or faster code out of Front Page.
Pherdnut:
ReplyDeleteI don't disagree that most of our problems are browser related. I think things would be 20 times better if Microsoft had a single version of IE that everyone could use. For Firefox and Opera users, our answer is always "upgrade to the latest version". In my business, there are still lots of people running Windows 98, so I have to test on IE5 and IE5.5 which is a bigger problem than IE6/IE7/IE8 problems (I avoid most fancy stuff).
That being said, CSS should bear much of the blame...that is why it is always playing catch up to the needs of developers. Don't get me wrong...I love CSS. I don't think anything is perfect or expect it to be, so I feel comfortable defending CSS and criticizing it.
@Mark
ReplyDelete"Now, I'm not trying to slight anyone here, I'm not trying put anyone down, I'm just saying that you're never truely free to do whatever you want with your code, until you learn the ins and outs of every little detail about your code and truely understand what it's doing and how it's doing it."
I can appreciate that Mark but I think that it's also an interactive process. I intend to set aside some time to work on some very basic layouts and vary the parameters to get a better idea of what is actually happening.
For the record without Frontpage I wouldn't have got going at all. But it caused so many problems I found I was working more and more in HTML mode. Expression web 2 is great and it costs hardly anything compared to Dreamweaver.
I only have a handful of clients at present and several websites that are involved with environmental issues that I support.
I have sorted out my problems with the website not working as intended in standards compliant browsers.
I used: three PCs -two desktops and a laptop. Expression web 2, Google and trial and error. I usually use Notepad++ for writing content and for editing and Wise-FTP 5 for file management.
I have had a closer look at the Box Model as this is partly to blame for why I had some problems with the website and probably why others have problems as well: http://www.freshfordsomerset.co.uk/computers.php#1236019604
I have added to the Wikipedia diagram of the CSS box model and Microsoft's with my own view of the concept based on the notion of framed art works.
@Pherdnut
ReplyDelete"I wasn't saying you were incapable of coding by hand, I was saying the use of front page suggests you haven't done it with CSS yet. Want ads that are obviously written by devs (i.e. they don't confruse java for javascript or ask for "w3 code" frequently ask for hand coders. That preference wouldn't exist if they thought they could better or faster code out of Front Page."
Yes that's OK by me Pherdnut no offence taken. Technically I am an employer. I suppose if I had an applicant who has only used Frontpage I would have a look at their websites to see what they had produced first before dismissing their application out of hand. Well I would a few years ago but not now.
I find that my problem is not the web site design but getting content from the client! I had said, I think, that in my case I had upgraded to Expression Web 2 from Frontpage 2002 and to my misfortune had also decided to alter the client's website to one that is not only CSS based but also CSS layout based.
I did manage it but just had the problem of "poor" rendering with FireFox etc. Basically because Microsoft had got the ball rolling earlier. And then as part of a Google search found this forum.
I think that in addition to Geeks (no offence guys!) there are all sorts of people out there who would like to have their own website and are hindered by the technology.
For example, I have a friend who is an ex editor of a major British Newspaper who is struggling to get his own website up and running. He'd tear to pieces the grammar in this forum (including mine) but he is a novice in the area of web publishing. As for content and layout - provided he could get what he wants published - his stuff is brilliant! He could write on the most unpromising topic and make it interesting.
So what am I getting at? It's not as easy as one thinks to use CSS for layout and maybe one should avoid it. Leave it to the experts!
"He'd tear to pieces the grammar in this forum."
ReplyDeleteBeing a proofreader in addition to being a web developer my grammar is pretty good. Not that I never ever descend into "Twitter talk." Your grammar isn't bad either. I do, however, see many examples of atrocious grammar on the Internet committed by people who simply don't care and are unaware that they are not communicating their point(s) as well as they should . . . and could.
@ChristianZ
ReplyDelete"I do, however, see many examples of atrocious grammar on the Internet committed by people who simply don't care and are unaware that they are not communicating their point(s) as well as they should . . . and could."
Yes maybe but also there are some very talented people out there whose native lanuguage is not English and it would be ill mannered to criticize them. I think that Internet users should be careful not to upset those whose native language is not English. My buddy is not so sympathetic. Maybe it's a hangover from the imperialist times!
I cut non-native speakers some slack. Native speakers don't have as much of an excuse. I do know that sometimes typos just happen. They happen to me and sometimes I see them the moment after I hit the Submit button. What I think is wrong is when people say, "It doesn't matter if I make grammatical and spelling mistakes!"
ReplyDelete@ChristianZ
ReplyDelete'I cut non-native speakers some slack. Native speakers don't have as much of an excuse. I do know that sometimes typos just happen. They happen to me and sometimes I see them the moment after I hit the Submit button. What I think is wrong is when people say, "It doesn't matter if I make grammatical and spelling mistakes!"'
Yes, I am sure that some of my words are altered! in addition to typos. I have ieSpell which is an IE plugin. But sometimes I forget to check what I am writing. I also have a spelling plugin for Notepad++.
I agree with you about the importance of grammar and spelling provided it doesn't prevent people taking part.
I would have thought that using spelling and grammar checking tools that are readily available, which are often free, is very useful for those who have problems with their written material.
Maybe some web designers like to let their written material lapse in quality as they have to make sure that every letter and symbol in their code is absolutely correct.
You know what I think is really funny? All the CSS nazis here insulting the original poster for being uneducated regarding the subject matter. I'll tell you what, you don't have to be a CSS expert to know that you can create a table that expands fluidly and nicely in about five lines of code, or you can essentially hack CSS by programming a massive overflow and then hiding that overflow, and even then it's not guaranteed to work in all browsers. In fact, it's almost certain to fail in at least one.
ReplyDeleteI like CSS for a lot of things, such as being able to write classes to make certain elements uniform, but the simple things continue to elude the W3C for some reason. Inheritance is another problem. Sometimes you just want to turn it off and you can't. I'll give an example: a background div with the opacity property to make a background image translucent (for the purpose of using the image to fill white space on the right on wide screens, and compress and float behind the top layer divs when (if) the window is resized), and other divs layered on top to stand out more. There is no way to accomplish this in CSS without the opacity being inherited by the child divs. It's stupid. You can't z-index them, you can't give them an opacity of 100, you cannot do ANYTHING to override what that parent div has set. Now everyone has to be a graphic artist as well as a programmer just to build a simple website, all because someone died and made the W3C king.
Besides, it sometimes seems like they only develop standards that are in direct opposition to how IE does things (interestingly enough, in IE the CSS property I mentioned doesn't seem to inherit. It looks the way I expected it to look. I was just about to declare triumph of my new design, and then I opened it in FireFox.)
It's like a personal vendetta and really, it's immature. The more I use CSS and try to accomplish BASIC layout things, the more I just plain hate it. I know that most web designers are trying to force people in the direction of using FireFox, but let's face it: Windows is king and isn't going anywhere. You can rage against "the man" all you want, but people are still going to use IE and you just sound like a bunch of babies sniffling because the other kids are all playing with Transformers while you are trying to push GoBots.
@terrain
ReplyDeleteYour first problem is that you're writing CSS for IE first. Start with browsers that actually support standards first, then work on the browsers with the flukes.
Your second problem is that you're confusing the standard having problems for IE having problems supporting it. The W3C isn't an enforcement agency. It puts out a spec for everybody follow and IE never quite pulls it off. IE 8 is supposed to more fully support the standard but it's still having its own unique quirks.
Inheritance is the foundation of CSS. You could easily "turn it off" if IE supported the first-child selector like all the other browsers have for 10 years now but no dice.
Opacity doesn't work in IE 6 anyway, but it works the way it's supposed to. I believe you can tile a .png image since you don't appear to care for IE 6 or you'd be testing in it. Or put your containing block in a wrapper with a reduced opacity element and position the opaque stuff over the translucent stuff. Hint: Position absolute anchors to the first relatively positioned element above it.
It takes some actual learning to do CSS right. It's not an instant-gratification technology like HTML. Put a little time and effort into it though and you'll see what the fuss is about.
But that said, your personal site is your personal business. Nobody's telling you how to build that. It's a good idea to do it right the first time if it's going to get fairly complicated but that's your problem, not your client's or the other developers' and that's the part where we get mad when people try to tell us we're wrong because we have to deal with amateur BS every day from people who don't deserve to be getting paid what they do for this stuff.
"It takes some actual learning to do CSS right."Yes, exactly. You have hit on the crux of the problem.
ReplyDeleteWhy should CSS layout be any harder than drawing nested boxes on paper?
It's not. Position absolute on everything. Upper left corner coordinates are 0,0. Declare top and left from there, height and width for everything and use z-index to bring stuff forward if you have to.
ReplyDeleteThat's not where people are challenged by CSS. If anything that should be more 'duh' and intuitive than table layouts. You've barely even tried if you're having trouble at that level.
If you want to do stuff that you can't do on paper or with photoshop like elasticity and liquid layouts, you're going to have to learn stuff. Go check out CSS zen garden. You can't do that with tables. It's all the same HTML. Employers like that if they know anything about it.
> Position absolute on everything.
ReplyDeleteThat only works if your content is static.
> If you want to do stuff that you can't do on paper or with photoshop like elasticity and liquid layouts, you're going to have to learn stuff
Or you could just use tables and be done with it.
So, basically Ron is against learning anything. You can do a lot with tabled layouts but you can't do everything.
ReplyDeleteRon, you could've become a CSS pro between the time you posted this entry and now if you had just applied yourself a little bit. It's not as hard as you're making it out to be.
ReplyDelete> So, basically Ron is against learning anything.
ReplyDeleteI'm all for learning new things. For example, I think everyone should learn that nearly everything that CSS advocates say turns out, when you actually do the research, to be factually incorrect. See:
http://rondam.blogspot.com/2009/02/css-holy-war.html
> Ron, you could've become a CSS pro
ReplyDeleteYou still don't get it. I *am* a CSS pro.
The fact of the matter is that I have created many sites with non-table-based layouts that work perfectly fine in all browsers. Just because some people get it wrong doesn't mean everyone does.
ReplyDelete"I *am* a CSS pro."
ReplyDeleteA true CSS pro wouldn't talk the way you do.
I should add that there ARE proper uses for tables that soooo many web developers don't know about. I'm a big advocate for using tables in proper ways and for knowing what all those proper ways are.
ReplyDeleteOne of My Tables Articles
> The fact of the matter is that I have created many sites with non-table-based layouts that work perfectly fine in all browsers.
ReplyDeleteBut you have yet to cite even one example of your work that doesn't rely on Javascript.
We're going around in circles. I normally have comment moderation turned on for all posts older than 30 days because otherwise I have to spend too much time deleting spam. I had turned it off because I'm going to be traveling for a couple of days, but it appears that there is little hope of anything constructive coming of this so I'm turning it back on. In the meantime everyone really needs to read this:
http://rondam.blogspot.com/2009/02/css-holy-war.html
OMG...
ReplyDeletewww.alphadeltaphimn.org - CSS based layout, doesn't use javascript (who the hell uses javascript for layout?), works in every modern browser except IE6. Only people who are stuck in the past care about IE6. I don't try to play a CD on a record player, so why try to view a modern Web site in an archaic Web browser? You should see when I have Flash snow falling over the text (and it's still selectable in every browser), but under the grey bar on top (where you can see the snow falling underneath it).
www.minnesotadrumline.com/sandbox/index.php - This is where I'm testing the redesign for the site. Again, all css-based layout, no javascript crap,works in every modern browser, even IE6. The only thing that doesn't work in IE6 are the transparent PNG images. But agian, you would use a record player to play a CD, or a tape player to play a DVD, so why would someone expect an old browser to display a modern Web site?
But Mark, you don't realize that Ron thinks everyone should pretend IE6 is the only thing out there and that we should pretend this forever.
ReplyDeleteRon's mantra is: "Bow to the weaknesses of IE6! Kneel before the weakest link in the chain!!"
If you don't care for IE6 users, you are doing this just for hobby, not a real job, so you can waste time tweaking CSS until it works.
ReplyDeleteGood luck.
"so you can waste time tweaking CSS until it works"
ReplyDeleteThis is what people don't get. You only waste your time tweaking CSS if you don't know what you're doing in the first place.
Actually I do Web design and development as both, a hobby and a real job. I really only "care" about IE6, only when the client does. So when I've built sites for Target (where all of its corporate computers have IE6 installed on them, don't ask me why), I've still built the sites in a CSS-based layout, I just do less fancy things, and if they want some fancy navigation or something, I elicit the help of javascript. Simple as that.
ReplyDeleteAlso, it doesn't take much "tweaking" of CSS to get it to work. It might for you, but for me, it's just like coding regular HTML, very simple. Of course, if I'm doing something more advanced with fancy this and that, then yes, it does take a little more time and possibly might require a tutorial or two, or just trial and error. But when does trying something new not take time to learn?
Ron, I think you are probably trolling. Even your own blog here is laid out with CSS and not tables. Why are you not following your own advice? As long as you keep even this one site in a non-tabled, CSS layout nobody should follow your advice to use tables for page layout.
ReplyDelete> Ron, I think you are probably trolling.
ReplyDeleteIn my own blog? I think that's impossible by definition.
> Even your own blog here is laid out with CSS and not tables. Why are you not following your own advice?
Duh, because I didn't write the code. My blog is hosted on Blogger (and has been for many years) and I'm using a standard Blogger template. And that's why, for example, if I try to put in a photo that's too wide it overflows into the archives links in the right-hand column. It sucks. But life is short and I have more important things to do than to try to fix it.
I mean trolling by constantly propounding a viewpoint you don't completely follow yourself.
ReplyDeleteRon, I admire your enthusiasm. If you don't want to learn CSS better and you think people should develop as though IE6 is the only thing out there then so be it.
What's funny about all this, is it seems like the "anti CSS for layout" people assume we've never built in tables before, and we don't know what we're talking about.
ReplyDeleteThe first 5 years of my career in Web design and development, I coded in tables, I coded for IE, and I would spend hours, days, and weeks structuring tables and trying to find hacks so I could get those tables to do what I wanted them to do in browsers like IE. And then if I wanted to go back and redesign the site? Forget it, I'd have to start from square one... restructuring every page, and every table, table row and table data tag.
The I started learning about CSS. At first I didn't like it, because tables were easier for me, and all the examples I saw of tabless sites looked like crap. But then I started to learn more about it, started understanding the ins and outs, and now I barely ever use tables... especially for site structure. And if I want to redesign the site? No problem. Depending on how I want to redesign it, I may only have to go into the style sheet, and edit the style. Done. It takes me significantly less time now to design, edit and redesign a site using a tabless, CSS-based design, than it had with tables. You can't argue with that.
Yeah, you should to test your sites in all the different browsers and operating systems to make sure your site is being rendered properly, and if need be, makes some changes and maybe use a hack or two... but you have to do the exact same thing with tables. Let's not forget that tables have hacks too, and many have been around for so long, that they had been incorporated into future version iterations of HTML. And the same thing will happen with CSS and then the next greatest method for building Web sites.
As browsers change and become more advanced, so does the code. As code changes and becomes more advanced, so do the browsers.
IE6 is slowly becoming extinct. In fact, I believe it would be as extinct as IE 5.5 is today, had Vista not been such a bloated and hashed together operating system (because it comes with IE7). I don't think we should completely ignore it as Web professionals and enthusiast, but if we aren't continually moving forward and learning new things, when those old ways truly do become extinct... so will your career (and that's a general "you." I'm not speaking to anyone in particular).
Many lolz :D
ReplyDeleteIf you're not good with CSS, that doesn't mean that using other technique is better, especially tables for a layout.
For comparison, just open any Microsoft SharePoint site and look through the source. You'll be scared of how messy could it be.
Just learn CSS. It just takes a very little time to create these layout with CSS without any problem.
A totally off the wall view:
ReplyDeleteI am truly amazed at the pointless periodic "dogma wars" between computer people. First it was Mac VS. PC - this one lives on to this day in the moronic "I'm a Mac" ads.
Now it's the battle to convert the world to CSS layout. First of all, I use CSS layout, so this is neither pro nor con. However, if a totally new concept is desired on a shoestring budget and time frame I have an alt approach - a single table for the backbone and everything else is CSS controlled - even cell sizes.
A single table is compact, stable on virtually every old browser thrown at it. If handled wisely, a single table used in this manner presents very little code to be parsed by the browser or crawler.
On the other hand tables within tables within tables (the old school) is a mess to edit after the fact - as are divs within divs within divs.
Most of my work now is rebuilding old commercial sites and I see the worst of both methods all the time. My advice would be to use what you know best to get the job done effectively for the client - he doesn't want you to experiment on his time. Selfishly do what works best for you and screw the critics - they aren't writing your check.
I switched to CSS layout backbones to satisfy client demands - nothing more. It is not superior for layout. That is why CSS 5 is implementing "CSS tables".
http://www.w3schools.com/css/css_table.asp
Tables and CSS are just two methods that can both either create clean code (if done cleverly) or a nightmare of malformed tags and/or quirky positioning if one is not proficient. Also, the ones that are making the most fuss about CSS are often the ones with the worst LOOKING sites - they have to have something to pull rank with, if not design ability. The best scenario is for both "teams" to cooperate, but of course that won't happen as a rule - ego is endemic to the human race.
I agree with you - layout in CSS was bungled badly.
ReplyDeleteTwo clarifications to my prior post - the number 5 on the CSS update is a type-o. There should be no number at all after CSS.
ReplyDeleteAnd secondly - despite arguments by either side, neither tables nor CSS were initially designed for layout (hence Cascading style Sheet).
The main argument FOR CSS layout is the belief that search bots do not parse CSS rules, so they ignore it and move right on to the content - not that CSS is superior for layout itself.
Due to the fact that CSS makes no provision for lateral positioning, hacks have to be employed - like floats.
Some positioning elements are read differently by varying browsers, so even more hacks, like Java Scripts, are needed to correct for these discrepancies. If that constitutes superiority for layout - we use different dictionaries.
Since CSS is more search-friendly (because of non-parse) it is a valuable tool. However, in this context, we are again not talking superiority for implementing layout.
If this were a court case, the decision would go to tables. As the definition of the argument before the jury defines layout exclusively - the testimony from the council for CSS would be stricken as irrelevant.
One last comment here -
ReplyDeleteThe point of this string is "is CSS better for layout" - not "should we use CSS layout despite it's shortcomings?"
The truth is that tables, in the real world, are better for layout overall, but are less efficient in other areas - i.e., search friendliness.
However, the slight discrepancy in search friendliness is only an issue if tables are abused. (i.e.,NESTING: tables within tables, tables within tables, tables within tables)
I realize I'm late to the comments here, but I came across your article just now. Let me tell you...
ReplyDeleteYou 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).
> I realize I'm late to the comments here
ReplyDeleteIndeed. 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.