I've seen several big name web-sites point out this argument about whether or not CSS is worse for making web-sites than tables were, and I'm honestly getting sick of it . Some (self-proclaimed?) bigwigs in the web industry are even saying it's easier to use tables and that's what they're going to use for now. I assume everyone knows the reasons for using standards, semantic html, cascading stylesheets, and the like instead of tables. The benefits are enormous. But is it really too hard?
First, No, It's not hard.
Honestly, writing HTML semantically is super easy. All you're doing is defining content. That block of text is a paragraph. The first line is a heading. That list is, gasp, a list! That's the easiest part. Then, after you've defined content logically, you open up a CSS file and style away.
Anyone who's had to transform a design into CSS a few times and knows most CSS properties available knows it's not hard at all! It takes a couple hours to turn a design into a web-site. But perhaps I'm biased - I get it . I get CSS. What about people who don't? I can see that, certainly not everyone excels at the same things. So some people might have much more of a difficult time wrestling with the browsers box model. For people like that, here's what's up:
Web-sites Aren't For You
If you can't understand or work with the new technologies of an industry, then likely, this industry isn't for you . Can someone honestly call themselves a web professional if they can't use the tools the web requires?
It's equivalent to someone learning programming, and asking them to build a game in Java, for instance. If they could not wrap their mind around Object-Oriented design, would it be sufficient for them to say "I'm just going to write one gigantic function, because it's easier than trying to understand all that Object junk." .... Fired.
But You Love Web-sites
Perhaps you can't work with CSS very well, but you still love web-sites. Ok, so you don't have to leave the industry, but realize what you can and cannot do! If you're a designer, and you make pretty things, don't bash CSS because you find it easier to just press Slice in Photoshop. Stick to making pretty combinations of pixels, and let someone else do it.
Or maybe you're a developer (I'd find this much rarer, but who knows), and you can't be bothered with the stupid standards of browsers. It's too non-standard or non-programmery for you. That's fine. Stick to optimizing the database and give the front-end people quick and efficient queries. Stick to your thing.
But just because something is hard for you, doesn't mean the proper response is do it the stupid-er way.
Interested in my opinion or Standards? Subscribe to my articles for free.
Thanks for saying it as it is :D
Good article. I find it kind of weird that people are still debating the issue.
It reminds me of the articles where people want to completely drop support of IE6. Just like the table vs. divs issue it seems to come down to people not knowing what they are doing.
@Nate: I'll admit, I wish I could never have to look in IE6 again. But I professionally, my support of IE6 is "Users won't think it's broken, but it's not going to look as sweet."
I think this discussion is useless, why are we discussing this over and over again ?, and specially why if you are "getting sick of it", you still write a blog post about it ?
quote: "I assume everyone knows the reasons for using standards" << you assume too much man :)
Cheers!
Diego.
Thank You!
I was the "Bigwig" that wrote the CSS trolls begone article. For the record, I'm not a bigwig, nor do I wear one. Although I do like the occasional spandex outfit with fake neon eye lashes. Tre sexy.
But I digress, the point of my original article is that 75% of Alexa's top 20 web sites use tables in their design for non-tabular data. That's _fifteen_ out of the top _twenty_ sites.
In all the trolling in the comments of my post, I've not heard a single decent response to that argument. I'd love to hear one.
Why are sites like Yahoo, Facebook and Google still using tables in their designs? Do they "not get it". Should they get out of the web business? Should they be fired?
I think you are falling for the common "disease" of the "I know best" syndrome. This can be found everywhere. People are stupid if they don't use X (where X can be everything from Apple and Ruby to Linux and Lisp).
Please respect other peoples opinions. I remember when I was your age, and I had the same attitude. "Your're not using Amiga, what an idiot". There was a right answer to everything, and I was right! But then I met smart people who could actually work with Windows and even Visual Basic for that matter.
You are just 21 years old, so you haven't had the experience yet to let you see things from a more balanced perspective. I see from your blog that you are competent, so don't get me wrong. But telling people that they should get out of the business just because they use tables, are in my opionion a bit short sighted.
BTW: I use CSS mostly, but sometimes a table can be the best solution.
CSS's float model is incredibly non-intuitive. It's poorly designed and the article you mention highlights many of CSS's inherent shortcomings. Whereas your xhtml may be short and clean, the css hacks are overwhelming for novices and web developers (and yes they are hacks to make up for inadequacies in css's design).
Tables vs CSS is a bit of a red herring anyways. CSS just needs to revised to handle columns properly.
I agree with Diego above. The discussion is really useless. There is no right or no wrong here.
I get CSS and Tables. I have done many designs with both of them. What I don't get is, why people put the one against the other and then why they are trying hopelessly to pass their opinion as "the one true way eveyone should be following".
You know, you can use tables with css as well as you can do with divs and every other html element. What we realy arguing is doing column layout with floated divs vs tables. I say it depends. If you are making a simple layout like this one, floated divs are the way to go, though if you have to deal with a more complex one that includes liquid columns and / or vertical alignment, then tables are more appropriate.
Finaly a word about the spec semantics.
"The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells."
The choise of word "data" is unfortunate because it is usualy taken literally while it shouldn't. "arranging forms and form fields" clearly means *layout* and the same can be argued about text, images, links, etc.
While I agree a whole lot with your POV, the core problem is not really making it work with CSS. That's in fact the most easy part.
The hard part is building a website with the so called standards and make it work on a 10 years old non-standard compliant browser. Do I really need to finger point ?
If you can't admit that some native table features like vertical alignment or *variable* and equal columns heights are just a pain in the ass to implement using CSS only, you're just being a hypocritical (no offense).
Personally I manage to stay away from tables most of the time, but my time is too valuable to spend hours trying to make standard things work in a browser that wasn't designed to support those standards in first place.
I've lost enough time with IE6. So until it becomes just a bad memory, I will not hesitate to use tables to achieve my goals and satisfy my clients.
This is a rant, much like most of the people in your boat. you feel morally superior over something that is almost irrelevant to businesses (who are after all the ones that pay most of us).
BTW: Your layout is incredibly basic yet when I view your page in IE7 the "Commenter" and "Message" headings overlap the comment input boxes. This looks rubbish - is it by design? If not, perhaps a table would help.
Don't sugar coat it ( : I don't mind throwing out the developers who can't take the time to learn CSS. Maybe they should be doing something different. It would be nice if the principals of Darwin would deal with them in a professional sense.
I enjoyed reading this post.
Tables still have their use IMO.
sometimes getting a layout to work with css is one big f-ing hack and a table works much better - much neater and easier. Web page will still validate and personally not convinced about the whole semantic markup argument.
@Nate: are you kidding? Who wants to spend countless extra hours reworking perfectly valid markup and javascript to work correctly or look the way it's intended in IE6? I don't understand why any web developer would NOT want it to die! I do understand why it's still around and why it needs to still be supported (depending on the circumstances of the site), but I don't think the problem is developers not knowing what they're doing.
I wish Google would change thier ranking algorhythm to take adherence to standards like html and css into account, such that site that use tables for layout are places further down in the results than sites that use css instead of tables.
I have to agree with marius above. Css and divs are great but when you need relative height and width a div just won't cut it. Tables will always have their place and do the job nicely when css and divs may not.
Regarding why many of the top sites ranked in Alexa still use tables, that's very easy to answer actually. The reason actually does not support at all why anyone should use tables over CSS.
Sites such as Yahoo and Google have such a HUGE audience, they are some of the very few elite select websites that have to seriously consider their visitors who use pre IE6 browsers. It has nothing to do with their inability to render layouts in Firefox 2,3, IE6,7, Opera or Safari. It's soley because they have a strong need to support freaking browsers that are 15 years old. This is a rare requirement. For comparison, ESPN.com does not support this wide range of compatibility.
I have to agree with the author. In any standard web design/redesign, if you do not understand the box model for positioning with CSS and feel that tables is the better solution then web design is probably not your best choice for a career. I understand it is your choice to do so however. All I see is a bunch of people who refuse to admit they don't understand CSS positioning and instead blame browser support. A problem I don't have. Odd.
Personally, I can't stand doing layouts in CSS. So, I don't do them. I've got a designer for that. What takes me hours and gives me a headache, he can do in like 30 minutes.
CSS is pretty neat though it still does have its shortcomings. If you've used XSLT, there'd be a time when you'd say, "Damn, I wish they had that in CSS."
Amen.
If you can't figure out CSS, find a different career.
Table layouts are the worst thing ever, difficult to work with and just plain ugly markup.
I was getting tired of everyone suggesting tables instead of CSS too.
This has nothing to do with it being "too hard". If the "correct" way to specify a layout is with 5 lines of layout, but in practical terms requires me to serve different versions of the stylesheet to different browsers, containing styling rules of varying degrees of spec-correct or even syntactic validity. Then I have a choice as to whether to ignore the presentation differences across my users or use another tool to do the job in a way that works, and that tool may or may not include tables.
This isn't college. There are no marks given out for piling on ridiculous layers of complexity just to say "I did it a particular way, aren't I clever". But more to the point, the role of CSS is to provide a standard for styling content, in a browser-agnostic manner, and to act as a tool to give me control of that presentation in a more succinct way than could be done otherwise. When the only way to use it to that end is to throw away all of those things, then it ceases to be that tool, and I end up bending over backwards to support its use. Which is insane.
It is BECAUSE I get CSS, both from the point of view of the specs and how it is practically implemented in browsers, that I know that there are some layouts that it just cannot do, in any practical way.
If any of you are .net programmers you'll know that there is a control called the "gridview"; that is, it's a little control with columns into which database-driven data is poured. You can't control how many characters or how much wrapping is going to be in each element. The gridview is one example of a thing that cannot be done very well CSS-Only. Well ... I must be retarded, right? I must not know jack sheut about CSS. LOL. Eric Meyer himself has said as recently as February 2009 that CSS cannot address the issues presented by data-driven pieces such as the gridview. Yeah, tell Eric Meyer that he needs to learn CSS.
It's not that CSS is hard to learn, because it's very basic. For crying out loud, when I worked at Fidelity I used to write programs that allow banks to communicate with other banks, CSS is nothing. But EVERY language has limitations. There are some things that CSS simply cannot do, just as there are some things that HTML cannot do, C# cannot do, or FLASH cannot do.
I think the CSS zealots here are alone in that they think that they have a toolset that can replace everything else, instead of working in tandem with everything else.
Eric Meyer: http://meyerweb.com/eric/thoughts/2009/02/17/wanted-layout-system/
Page layouts don't need tables. Things like the gridview control, that's another story. BTW I do have a tableless gridview, and it does work so long as I don't use span borders or shading or anything else that would reveal that the element heights don't scale up. And I know programmatic work-arounds that can compensate, that are totally cross-compatible. But, what I labor at and script for a data-driven table can do inherently.
Off my soapbox. Let the flaming begin.
OMG - I just looked at your bio and you are 21 years old? Holy shit you wouldn't be hired at my place even as an apprentice and you are pontificating about the trade? Talk about the proverbial virgin teaching sex.
But it brings back some great memories, hell I remember back in 1998 I was making entire websites in Flash, and I had the same type of hardcore dogma toward that technology as you have toward CSS. And then it was ASP, and then it was .NET, and now for me it's client-side AJAX ... buddy we go through phases in this business over and over and over. My advice to you is to take each of these things with a big grain of salt. We'll never have a world of standards; we'll always have a world of hacks and work-arounds. And your [insert name of any technology to which religious zeal is taken to extremes] will always end up working in tandem with other technologies, not instead of other technologies.
Honest to God I wish you the best and many long years in the trade. But be careful about taking extreme views whereby you have to cut off your nose despite your face.
Best regards.
I also find it weird that people are still debating the issue... in terms of people bothering to write articles like this. Seriously - why do you care if someone else prefers tables? Going on about it the way you are is no better than going on about the subject the way THEY are from the other perspective.
Oh wait, except for the fact that YOU'RE actually right so you can waste space calling tables stupid and trying to dictate to people who prefer not to use css what they should or shouldn't do...
There's no difference between the two rants. The subject is tired. "Here are the advantages and disadvantages of each. Now use whatever you want to use". That's all that need be said.
You mentioned the "tools required". As is true with most if not all tools, tools may be built to do one thing yet still be perfectly suited to do something else. Someone may ask you to build them a table. They're not sure if it should be built out of wood or out of a new material being developed that's more flexible with more applications.
You base which material is better on what will do what serve THEIR purpose and provide the LOOK they want. If they say, "I want to leave it outdoors and it rains a lot and the winters get harsh", you may caution against wood knowing that even the best sealants/protectants don't last forever. If they say, "I just need something to sit my plant on", you may say it doesn't matter.
Designers often forget that while some people are designing with EVERYTHING in mind, some just need something to sit their content on.
Couldn't have said it better myself, Lance.
First and foremost, semantic html / cascading stylesheets and tables are not inherently mutually exclusive.
Tables are not inherently evil, they were misused for a long time and have earned them selves a bad rap. They should be avoided like the plague for layout.
When you have actual tabular data of varying sizes to display, whereas you need to be flexible in rows and columns, such as listing out actual data, writing CSSed div's or li's to behave like tables will not only require some JavaScript to be flexible, but is serving no one but your ego.
When you have a tool that works exactly as you need, not using it simply because its unpopular is nothing but vanity.
Shame on you good sir. Shame.
@Jesse Donat: I agree. Anyone who argues for semantics should use tables when you have tabular data.
However, a design's left, center, and right columns do not constitute tabular data.