Tables vs CSS: CSS Trolls begone
First mistake, drinking the CSS Kool-Aid
Several weeks ago, I started designing the layout for my threaded comments on a social news site that I'm building. I had created a down and dirty layout using nested tables. It was ugly, and used nested tables but it worked.
I was then paralized by guilt. I couldn't let the nested tables go. I figured that I had to take the time to layout the site properly using CSS and Div tags. I figured this would give me a chance to get up to speed on current web design best practices and to learn more about CSS. Besides, Reddit models their threaded comments in CSS, how hard can it be to model a tree structure out of nested div tags? I believed what I've read online about CSS, web standards, semantic purity, screen readers, blah, blah, blah...
I drank the Kool-Aid, and I woke up two weeks later with a broken design. I had a headache from banging my head against the CSS wall. But, it simply couldn't be a problem with CSS itself. The problem had to be that I didn't understand CSS well enough. The answer had to be that I was bad, lazy or I didn't care about web standards or something. The internets had told me so.
But like a shaft of light in a dusty attic, a single comment by Nosredna on this thread changed my web designing life forever.
Want to see gratuitous? Go to Google Finance and use Web Developer Toolbar’s Outline->Outline Tables->Table Cells to show all the crazy ways Google is using tables for page layout.
.
iGoogle? Yep. For real table things, but also for layout, like that new sidebar to the left.
.
Twitter? Yep. For rough layout.
.
Google News? Yep. For layout.
.
Amazon? Lots of tables for layout.
.
Sure, you can say all these pros are lazy are dumb if you want, or we can try to improve the situation as we all learn to use CSS better. It’s going to be gradual.
I want my money back
As I read web design forums and blogs, it seems that the Divine Essence itself has given us CSS standards and Div tags. Any one who would dare to use a table for non-tabular data in their web design is committing a sin against humanity, Love, Art and all that is good. Tables violate all that is semantically pure in this world. CSS is the new way forward, CSS is progress itself. Tables kill kittens, ponies and unicorns with each misguided use. Any and all problems are not the fault of CSS, it is the fault of the dark and sinister overlords of Microsoft who stubbornly refuse to bow to internationally recognized web development standards.
Prompted by Nosredna's comment, I did some research. What I found has shocked and outraged me. How could the internet mislead me like this? I want my money back.
My research on Table usage
I used the Firefox developer toolbar to take a look at the frontpages of the top 20 Alexa sites. Please try it yourself. Install the FireFox developer toolbar extension. Then, for each page, click Outline->Outline Tables->Table Cells. Then go table-hunting.
For the time-constrained, I submit to you the results of my highly scientific research:
- Yahoo: Minimal Use of tables. I found a picture of Hugh Downs horizontally aligned with it's caption in a table
- Google Home Page: Not only does Google use tables for it's iconic home page, it embeds styling in the <td> tags. The horror.
- YouTube: Uses tables for of layout of videos
- Windows Live: Uses tables for footer layout
- MSN: There is one table, but it's only for stockquotes which is tabular data
- MySpace Semantically pure. MySpace. Whoda thunk it
- Facebook: Does form layout with tables
- Blogger: No tables anywhere on the front page
- Orkut All tables all the time
- Rapidshare: A table with a single <td> for header placement. And again a single <td> table for the central "browse" section. Tsk tsk
- Microsoft: Navigation bar is a table. What did you expect? Unicorns and rainbows?
- Google India: It's the same Google layout. I wonder if they used copy and paste for the template?
- Ebay: Tables, tables every where
- Hi5: Tables for every thing, pretty much. BTW, I didn't even know this site existed until last week. Alexa rank 14!?
- Photobucket: Tables for photo gallery layout
- AOL: AOL's layout is semantically pure! Friggin AOL?
- Google UK: Same GOOG layout. I'm now sure the copied an pasted their html
- Amazon: Now that's just silly
- IMDB: They used tables for their 3 column layout. What! No CSS framework?
- Imageshack: Semantically pure as the driven snow.
- Finally, even though it's not on Alexa's top 20, log in to your Gmail account and look at
the use of tables
My Hypothesis: Pure CSS design == overcompensation
So, the five companies that use CSS are the web powerhouses--MSN, MySpace, Blogger, AOL and Imageshack. MSN, MySpace and AOL have been maligned for years throughout the web savvy community. My hypothesis is that these companies are overcompensating for the crap that they've taken thoughtout the years by designing their site in pure CSS.
Other companies that have more web street-cred like Google and Facebook don't really have to worry about how the web design community sees them. This leads to things like Google making extensive use of inline styling on their homepage instead of putting it in their stylesheet. I've never heard anyone claim that the Google folks are slouches at the web design/development thing. Why is that?
CSS Trolls, Begone!
So, I don't ever want to read how web designers who don't use pure CSS in their layouts are lazy, stupid, don't care about their craft, backwards or don't bathe properly. Never again. People who post such things online are heretofore to be known as CSS Trolls and are to be banished from the internets for all time. Begone yea vile fiends!
What I've learned
I suppose I should have listened to the Perl and Lisp guys. The attitudes in those communities tends to be--just use the tool that gets the project shipped. It might be ugly, but it works. They practice what they preach, too. Just look at the table usage on the Perlmonks site or Paul Graham's Hacker News with the developer toolbar.
So, I'm going to give up and use tables. It's going to take me all of 45 minutes to undo the last two weeks worth of CSS work. I'm going to launch my site. And then, I'm going to go and get a donut.
Anyone else find joyous and flagrant table based design? Please post links in the comments.
Update:
1. I'm not against all CSS. I'm against CSS trolls. And, by trolls, I mean people who post nasty comments about someone who disagrees with them on whether to use tables or CSS.
2. I haven't given up on CSS for good. I did give up and use tables for one part of one project. I will give up and use tables a lot more frequently. I'm positive that 75% of Alexa's top 20 sites agree with me.
Update 2:
My apologies to the devs at the 5 companies that were able to use a pure CSS layout. My snarkiness was more a function of my frustration with a technology, a specific form of trolling and trying to write an entertaining blog. That should in no way detract from the technical achievements you've accomplished. The "overachievement" bit was out of line. Much respect.
posted by iamelgringo @ 10:38 AM
129 Comments:
Agree 100%.
And for those that have a problem with it - get a life, kids and mortgage and then we'll talk.
I've found a lot of people who are stuck on table layouts are stuck because they can only think of HTML pages in terms of how tables work. You have to break free from that mindset and CSS design makes much more sense.
After designing sites for 10 years, 3 of those in the dark ages of tables, I wouldn't touch tables with 100 foot pole. But if using tables makes it easier for you, more power to you. It's just really sad to see people bash CSS because it's too hard for them to implement.
Well, they can slow your page's perceived loading speed, and hurt maintainability. Used with care though, there's nothing wrong with a few tables for layout.
Once you get in the CSS layout mindset you will NEVER EVER go back to tables. Its the holy grail...
You can save tons of bandwidth by using less verbose semantic markup. When espn.com switched from table to css layouts...
Projected bandwidth savings:
* 2 terabytes/day
* 61 terabytes/month
* 730 terabytes/year
http://www.mikeindustries.com/blog/archive/2003/06/espn-interview
The cost of maintaining a table based site must be a large factor of a clean semantic markup.
Also, tables are usually not friendly to screenreaders, and hopefully you do care about the visually impaired?
This is horrible advice.
sorry the url got cut off
http://www.mikeindustries.com/blog/archive/2003/06/espn-interview
None of the site that use tables are remotely good looking. CSS all the way. Sure it takes time to learn but it's worth it.
For my nested comments widget, I used nested lists (UL elements), and a couple of javascript functions to generate the HTML.
One of the functions is recursive and created an associative array of the comments and their depths. The other renders the HTML.
Then, the list can be skinned any way you want using CSS.
Here it is: http://www.trailbehind.com/user/blogpost/4/
At some point, I'm going to open source this code,but it's really a mess right now and I haven't touched it in months and months.
At some point you thought this warranted writing a essay. That surprises me. At a later point I thought it worthwhile to write a mocking comment, which surprises me equally. We all have way too much time.
This page gives some interesting insight http://shouldiusetablesforlayout.com/
Ditto. Maybe in a few years CSS (and the browser base) with catchup, but the blue-sky designers of CSS did practically everything in their power to make CSS layouts difficult (if not impossible) to use.
Everything from the infamous box model (padding the INSIDE of a box requires a change in it's OUTSIDE dimensions?) to postioning nonsense (the height of an absolutely positioned object has no effect on its container) contribute greatly to the number of hacks and other measures needed to create even simple layouts.
Add cross-browser-specific nonsense and the whole thing simply boggs down.
Yes, separation of data and presentation is desirable. Yes, it's POSSIBLE to do so. But all too often it takes round-after-round of testing and retesting, only to find that the Opera patch breaks IE (again).
I am not a purist by any means the interesting thing about the sites you mentioned in this post, ESPECIALLY the Google homepage is that not one of them NEEDS to use to tables at all and most of the places they do use them are can be achieved with very rudimentary knowledge of box models and CSS. This post is not proof that you should "get your money back" but maybe you should so you can buy a book or two and learn CSS.
I have a wife mortgage and kids and a life - and I use tables too.
Because they work everywhere the same way and CSS hacks are worse.
If you work on mobile browsers you also have to use tables because the CSS is broken especially in the floating and positioning department.
What idiot came up with this idea that tables were bad anyway.
Like anything in life use in moderation.
I am no CSS troll, but let me say, I started learning and incorporating CSS into my designs about 7 to 8 years ago, and it was so much different than using tables that it was hard to catch on to. It took until just recently for me to have a complete 100% grasp of CSS. I love it. It makes life so much easier once the design is done. Sure the design may take a little longer to get going, and to get cross browser compatible, but after that it's a breeze. I love how I can have multiple style sheets and let users choose between them, for example. There are lots of applications which are hard to see until you have years of experience. I'm no troll, I still even have 1 table on my portfolio to simply allow me vertically align the contents of one particular table.
I get the feeling that you have more than just CSS to learn. You have to learn the way the web works behind the scenes, and start using the W3C's HTML validator. You can still use tables, but there's a place and a time for tables, for data not for design.
I'm with you. CSS still can't resize to the browser width like tables can.
Using tables for forms (a la facebook) or using tables to list things in detail (a la ebay) is fine. Css is better at everything else though. I agree with css in theory but can understand tables in practice. I personally try to keep my style in css and my structure in html. Nothing more nothing less.
I learned CSS by going cold turkey and redesigning my site using 100% CSS, about 5 years ago.
Since then, all the sites I've designed have been CSS.
Not a day goes by that I don't think, you know, this would take like 1/10th the time to make in Tables.
CSS does get easier with time, the more you learn and so on, but it all feels like one big hack.
There has to be something better.
it's = it is
Nested comments are pretty trivial to implement in CSS once you get used to it. The trick is to really think about the semantics of your page and you'll find that css really complements a well-htmlized page... but probably hurts a site that relies on divs for everything. Whatever is faster for you is what you should do.
However, every single time I've gone to tables I've found the dreaded redesign to be a true nightmare. Larger companies like google are probably shielded from this problem due to a larger work force.
And... yes... I would say that the design and front-end development team at google is often sub-par in web standards.
Yahoo seems to be the leader of the big-boys for frontend web development
agreed.
i use css extensively, floating, relative-absolute positioning, inline styles, stylesheet classes and tables and flash.
your clients don't care about semantics. they care about results.
implement the design and get it done. if they want mobile or accessible design specialty versions of the site.
Jeez. Two of these blogs in a row about this? If you can't do it, hire someone who can, and quit trying to think you know computers.
Couldn't agree more. Go blueprintcss.org for the win--best of both worlds. Follow its rules and you get light, manageable markup with a tiny amount of formatting to make the grid (the flexible, adaptable gird) work.
i was in this boat once but had a revelation about 9 months ago that anything i wanted to do in css must be achieveable. and it is. and now looking back on my table based layouts i want to cry and cry again :(
Table based layouts are a requirement for email templates. Until email clients catch up to browsers in standard, it will remain a viable option.
However, I have identified the main cause of frustration and it is the float: element.
Check out my post on display:inline-block as an alternative to float based layouts.
While it is not a perfect solution, it will eliminate many issues, especially cross-browser ones, that developers experience when using floats.
I believe you should stick with whatever works for you and your clients, but there are other ways to go with CSS layouts.
If you can't get your design looking right in CSS, then that's your problem, not CSS's. And run your table markup through a screen or aural reader to see how accessible it is. Just because all those sites use tables doesn't make it right. In fact, I'll now think quite a bit lower of all of them. Thanks for ruining half the interwebz for me!
I second that div/span tags are not like tables - cannot be used like tables - will not behave like tables. A div is a document object that you assign display behavior to. A table has pre-determined display behavior of which you can alter certain attributes.
No matter how many colspans/rowspans you hack into holding all your site assets that have to be cut up into little squares, you still have to squeeze everything into the mondrian clusterf##k of a table based layout.
When I finally stopped thinking about the site markup as a series of divs I expected to behave like table cells, css got a whole lot easier understand.
My main issue with CSS is the browser compatibility issues. I really hated CSS when I hit this bump to tweak to make sure my site is compatible with IE.
How hard is to use unordered list (inside UL, inside UL etc.) for comment threads? Pretty easy. Tables should be used for tabular data only, which comment list is not.
Dood, just because you don't know how to use CSS doesn't mean tables are better. Amazon.com's site is in dire need of some design, dontcha think?! So bad example there.
One of the best presentations I have seen was Eric Meyer explaining his process of doing HTML & CSS layouts. He looked at ALL possibilities - including tables - and then ruled out the ones that wouldn't work based on the needs of the content (e.g. positioning won't be suitable if certain content areas will grow). At the time I was very surprised that he didn't rule out tables at the start.
The more I have learned CSS the more comfortable I feel with it and so I feel I don't need tables. However you also learn it's weaknesses and there are occassional situations where tables make sense, such as a client wanting a layout with dotted (graphic) borders separating each area, all equal heights - just like a table. That warrants a table in my mind, at least until CSS3 is supported well enough for table-layout properties to be useful.
When you think that you need to use tables because it is easier to build certain layouts, you probably dont know enough about CSS. There are things like floating, absolute positioning, setting margins, that give you the same results in about the same time with the bonus of clearer code, better maintainability, compatility with screen readers.. I am using CSS because I get advantages from it, not because Its 'the way to do it' according to some web gurus. Who doesn't agree to this might just need to invest more time learning CSS. And live happily ever after.
It’s always that funny. When people are complaining about CSS than these complains mostly are just based on a huge lack of knowledge abd pure lazyness.
Noone ever said that webdevelopment is an easy business. Deal with it, or just let it to those who understand the techniques. Would you repair your car if you’d just know how to “drive”? No way, you’d ask a well trained and knowledged mechanic. So, webdevelopment isn’t that different.
I use 100% CSS because I've got to the point were it's easier than using tables. Don't bash it cos its hard, once you reach a certain level you will never look back.
As for 'using Divs', you might want to google 'semantic web' and then rethink that statement.
Hi! I really like your article.
Sometimes it is so easy to use tables while CSS would cause one problem after another.
It would be heaven if you could code by webstandards to be sure that your website looks great to every visitor.
From my point of view the advantages of CSS are often far overrated.
I have written about advantages and disadvantages of html tables these days too, please have a look and tell me what you think! :)
I think both techniques have a right to exist, both of them are not bad at all and can work great in combination.
In the end: Your visitors care about your website and about how it works. Not about your sourcecode!
Regards,
Dennis
This is a perfect example of 90/10 rule
CSS works for 90% of the time, but the other 10% will be a HACK, and will take days to work out all the quirks in all the browsers, if at all. That's when you NEED to use tables.
And if you argue that current state of CSS standard and browser compatibility are ready to cover 100% of layouts, you're either an inexperienced kid or a troll that is looking for an argument.
Or maybe you just forget that each tool is good for it's task: Tables are for tabular layout! Doing them in CSS will be a hack.
Just because you found some major sites that use table based designs does not make them more right or wrong.
Your goal was to implement nested comments with CSS. Your first hurdle was that you were using the wrong HTML element to accomplish this. Lists, not DIVs would have been a more appropriate tool for that job.
I agree that simple comment threads are to be done with lists and not tables.
I'm trying to make a point that tables are not evil and should be used whenever necessary, to avoid CSS hacks.
Another point is: internet should be freedom.
It is my freedom of choice to use tools I'm proficient with to get the job done, and enjoy my life.
And if someone did not dedicate their life to learning CSS and all the proprietary quirks, it is their choice, because they chose to invest time in other interests.
HTML and subsequently web publishing by individuals became popular only because it was flexible and non-restrictive, and allowed everybody to be creative.
If the fascists of all kinds would say: do it as we say or don't do it at all, the web wouldn't exist as it is now.
And that is why HTML5 will succeed better than XHTML2.
tables show be used for displaying a grid of data and that's pretty much it. CSS is the way to go. While it is VERY painful doing your first full fledged CSS site, the rewards are too great to pass up. Besides, pretty much every layout you want to do has been done before, so use your firebug and hunt around for ideas. worst come to worst, when you get stuck, stackoverflow.com buddy.
Hey, use what you want. Its your site and your code. If you don't see the advantages and its too tough go with what you know. Then you can follow up with what you learned from using a table based layout. I've developed site since the 90s and will never go back to tables no matter how much trouble a CSS design gives me. The advantages of CSS are great and if you can't see them, then learn by going through the trials that I an other went through when tables were the only game in town.
Threaded comments. 1 not difficult line of CSS. (Remove space after each '<')
Comment system on here screws up the formatting but you get the idea.
< style type='text/css'>
.comment {border:1px solid #000;padding:3px;margin:10px 1px 1px 10px}
< /style>
< div class='comment'>
Comment 1.0
< div class='comment'>
Comment 1.1
< div class='comment'>
Comment 1.2
< /div>
< /div>
< /div>
< div class='comment'>
Comment 2.0
< /div>
< div class='comment'>
Comment 3.0
< div class='comment'>
Comment 3.1
< /div>
< /div>
I'm not a CSS Nazi, and I don't recoil at the appearance of an occasional non-semantic table.
However, mobile devices are a significant and growing part of the web community. Traditional table-based designs will always look like crap for them.
In addition, they do cause serious accessibility problems, which you're free to ignore if you're so inclined.
I love how a large number of these comments are from the very CSS Trolls you denounce, as if you are going to listen to them.
Sometimes I think they just like to hear themselves speak.
i've been in this game long enough to know both methods quite well, and i simply wouldn't go back to tables for general page layout. what strikes me about your post is that you haven't done it long enough to evaluate it fully. the happiness i experience in using css vs. the old table way has a lot of value.
btw, i have a job, mortgage, wife, kids, two cats, etc. and i build web sites for a living. with css.
for those who say your customers don't care about your markup, just that the site works, i suggest you think about what you're saying. your markup is *how* your site works. if it's messy, ugly, hard to maintain, it probably doesn't work great, or it won't when you have to make a major modification to the site. and when you're frustrated with the work you're doing, the work suffers. or if you have to charge your customer for a lot of time to adapt your bad markup, your customer will most certainly care about it.
i'm not endorsing the trolls or fanatics on either side of the fence, but i don't think this is a very well-reasoned argument for tables or against css.
Agreed. I try to avoid tables because I've come behind too many designs that are 100% tables and seen the spiderwebs they can make of code. But a table here and there is sometimes the best use of our time. Sure, we could spend extra hours and (maybe) get it with css. But in the end, is it worth the few hours? gays? weeks?
My rule of thumb is if I can't get it in an hour or so, I use a table and move on. (That is for the small stuff, though. Page layouts and stuff I find css to be much more flexible and cleaner)
Hey, I've found a great simple way to eliminate tables in forms!
http://www.alistapart.com/articles/prettyaccessibleforms
Isn't it simple, straightforward and full of semantics?
Doesn't even compare to this horrible layout for the forms using tables!
Well, never mind that the final example doesn't work in my browser of choice, Opera 9.63 (considered to be one of the most standards compliant):
http://www.alistapart.com/d/prettyaccessibleforms/example_3/
I can sacrifice all these users, much more important that I'm using CSS and not tables!
Wow, look at all the people taking the bait. It's 2009, and we still have to build sites that straddle everything from Internet Explorer 6 to the iPhone if we want to reach the majority of users. As if anyone could possibly think that table-based layouts worked consistently across all these different browsers and platforms without serious CSS hacks.
Someone who uses tables for layout is certainly not "stupid". CSS layouts is an evolution of the web, and therefore, it takes time to learn the nuances and adapt to the new playing field.
I work for web marketing firm where we routinely churn out highly optimized websites in nothing but pure-as-snow CSS. The mere repetition alone has brought me to the point where I can pop out a pure CSS template, fully styled with all the bells and whistles in under 4 hours. That's a complete site minus content in 4 hours. With experience, CSS is actually far simpler than table layout and much quicker... but you have to reach that point first. And, there's no shame in not being there yet. There is shame, however, in giving up entirely.
Many of the top 20 may make use of tables for layout, but that doesn't validate their use. All of those sites will eventually hit the maintainability wall at some point and migrate more and more to pure CSS layout over time. We can see it already happening on many of the sites you mentioned. It's all a matter of time.
@Myrth I have a life, kids and a mortgage and I haven't used tables for layout for many years.
Tables are for data NOT layout. It doesn't matter what Google, Amazon et. al. are doing. Its not that hard to achieve the same layout with CSS as it is with nested tables, in addition when you have to come back to make changes it will save you a ton of time.
And a site redesign? If you use content descriptive names for IDs and Classes, redesign doesn't require you to touch the (X)HTML. Faster turn-around = more profit.
And then there's semantically correct mark-up, which table layouts just aren't. Screen-readers break with table layouts, translating to mobile devices becomes a nightmare with tables, same with printable pages.
Does it take some work up front to learn the nuances? Yes it does. Does it take some time to keep up with all the recent developments and changes? Yes it does, but this is the web, it changes constantly, if you can't keep up.....
Great post, I agree 100%. When facing something that *could* be done with CSS but would require gymnastics, I just revert back to tables. The goal is to keep the code clean and simple. 10 lines of table code vs. 236 lines of cryptic CSS... the table wins every time.
I will abandon tables whenever there will be a viable alternative.
Viable meaning I have to use less hacks for it to work consistently cross-browser, than I would need for tables.
As long as CSS alternatives require me to do more hacks (and javascript!) and constantly revisit already created sites to make sure my CSS hacks still work with new browser releases, I will skip this great opportunity to screw up my life.
I'm to the point that when I'm doing my own stuff I'll do it with CSS, but anymore when I'm designing an interface for a web-based application at my day job, where non-css-savvy (and barely html-savvy) java developers are going to be raping my layout, tables are just the way to go to help avoid problems with implementation.
I would like the CSS gurus to tell me how to create a 500px wide menu that:
- has a variable number of buttons
- the button width depends on how long the caption is
- the buttons together fill all the available width
...without using a table (which does all of the above automatically).
I would say, as long as your pages validate and are accessible (i.e., you are using dtd and keep screen readers in mind when creating the "flow" of your html docs), you can decide on a case-by-case basis.
After all, css sites usually do take a little longer to create, unless you start of with a template or are a css wiz.
If it's a small project and you only have to support modern browsers, it's well worth the effort to improve your css skills.
It takes a while to make good looking forms using only css for label/input alignments, for example, but it's definitely doable.
Rachel Andrew has done a lot of research comparing css and table layouts - I like her article "Everything You Know about CSS is Wrong." Worth checking out.
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
In my opinion...pure CSS is only really necessary if you have a project where multiple people are attacking the same page and a "separation of concerns" into content/layout is desirable to avoid conflict.
If it's just you, do whatever works well. The pain of learning CSS (vs learning table layout) automatically makes it a "specialized professional" tool, not one for amateurs.
Guilt over tables is false guilt:
http://combatentropy.com/coming_back_to_the_table
Tables are actually the semantically correct way to lay out a web page.
You're simply not up to the front-end job. Here's some honest advice:
http://aplus.rs/css/on-css-tables-and-layout/
No, tables are semantically one of the worst ways to layout a web page.
Ok, how about that - everybody stays with their own opinion, and no one gets hurt.
Table-less CSS concept is one of many concepts out there. It is not a God-given absolute truth, even if some people want you to believe that.
You want to dedicate your life to studying the mysteries of CSS talmud - no one stops you.
The same way as no one stops you from earning your bread using tables.
They are just tools for spaghetti monster sake, don't make a religion out of it.
I've been building websites and working with HTML for fourteen years -- the first five or so spent using tables almost exclusively -- and I'd never go back to using table-based layouts. Too hard to code, understand, debug, and maintain. CSS has its quirks, but so far it's only gotten better. As older versions of IE fade into the mist, that semantic HTML I wrote nine years ago still chugs along, looking great. I just comment out the "hack" CSS files for particular browsers as I decide not to support them.
The tables vs. css argument strikes me as similar to an (imagined, because it's silly) argument about spaghetti PHP 3 vs. late '00s MVC frameworks.
@Pies:
STYLE:
ul.menu { display:table; width:500px; }
.menu li { display:table-cell; }
HTML:
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Abrigado fujisan moistened scimitar</li>
</ul>
CSS and html are built, just like,.. t_bles ( it hurts to spell it out, lol )
the div's are the backbone, CSS is the flesh.
When you can control the CSS layout you will see why they are loved.
SIGNED
Just a CSS master.
Bui
"I suppose I should have listened to the Perl and Lisp guys. The attitudes in those communities tends to be--just use the tool that gets the project shipped. It might be ugly, but it works."
Ugh. Fireable offense for any engineer. Of course a Perl developer might believe this as Perl is a language lacking a clear paradigm =P
"Any and all problems are not the fault of CSS, it is the fault of the dark and sinister overlords of Microsoft who stubbornly refuse to bow to internationally recognized web development standards."
You were being sarcastic but that's absolutely true. CSS is the way forward and UAs that don't properly support CSS clearly are the fault of their creators.
You seem to only care how the page looks (...and without CSS, I imagine you only care how it looks on computer monitors at that) Semantic pages are not about how your page looks to other people. Semantic pages are about whether or not my application can understand your Web page. CSS is your means of styling a page while allowing the mark-up to be standardized in such a way that when my application parses your Web page, it knows precisely what the information on your page means. If you design a page that eschews that concept, you're intentionally leaving the Web behind in 1995 as a static, hyperlinked device.
Ok buddy - it's just tables, you are having a bad day... breathe, good!
Maybe there wouldn't be so much of a backlash about CSS, as well as so many coders agonizing over, and hacks to try to compensate, if CSS actually facilitated good design practices. I'm tired of CSS being shoved down the throats of designers, and I'm tired of all the self righteous "standards" bullies who assert that they, and only they, are qualified to pass judgement on what's good and not good - users be dammed. Of course their stuff never sucks because it uses CSS, and they are the only people on earth who care about anyone who is handicapped or disabled.
Oh praise be! This all makes me feel a LOT better... I've actually sat in dev. meetings and had-a-go at our coders who spit out all those ugly tables with their code... only to find myself using them in a particularly awkward layout situation that has to be resolved by NOW! o'clock.
Nice, reassuring article. Web-geekoids are human too, see?!
It's simple. Tables work. Always have. Always will.
CSS sometimes works. And sometimes it stops working.
When people tell me "CSS Rules, Tables suck," I ask them what browsers they develop for. 99% of the time they say "Just IE."
When I see a CSS layout that renders properly in IE 7,6,5, all six versions of IE (5.0 - 5.1.7) on MacOS/9, Mozilla, Firefox 1 and 2, Opera, Safari, and all Netscape versions back to 4 on PC, Mac, Linux, SGI, HP/UX and Solaris, then I will drink the cool-aid.
Until then, leave me and my tables and my sites that work alone.
I am a css troll! and i am proud of it!!!
Shortly: coz i believe in accessibility, usability and the beauty of code! also because i can do much more with pure css then with tables
and truly i cant write nested tables. that makes me insane ^-^
I would use css-tables though, once IE 6 is fully dead. thats truely an open. but else i love css. and i love the beauty of pure code!
I love how the trolls keep insisting that anyone using tables is just unprofessional and doesn't know what they're doing. And when you confront them with the scenarios where pure CSS either isn't practical or just doesn't do what you want, the answer is unfailingly: "If your layout cannot be done in CSS, it shouldn't be done at all. And by the way, you're an incompetent who doesn't know what he's talking about."
Don't get me wrong, I love CSS. But there is just no practical reason whatsoever not to use tables where they just work so much better than contrieved, buggy CSS box nightmares from hell.
Tables are not meant for layout for a very simple reason: You are just making life harder for yourself in the long run, or harder for whoever takes over your project. Here is why:
You build your site with tables exactly how you want it, it is perfect, awesome. I build the same site, put in a little extra work, get my CSS layout working which will take me a little longer. Now comes the classic redesign. I have to switch out 1 stylesheet. If I feel so inclined, I can offer 20 different stylesheets that style my page in 20 completely different ways. You have to change your table to a new layout and create a new stylesheet. You can't offer multiple layouts and designs with the same HTML.
When your design is tied to your markup, you limit yourself in the future. It might be easier now, but it is harder in the long run.
It helps that a friend of mine and I had this conversation yesterday. Every time he gave me an "unsolvable" problem, I found an answer using Google within 5 minutes. CSS is not hard, it just takes thought. If you are trying to be a web developer in today's times and you don't want to think, you are in the wrong business, because the people who do will be taking those jobs. Web development has not prospered by taking the easy way out; if it did we would all be using frames for our multi-column layouts and every page would look the same.
If you think that CSS can't do what it is intended to do then you need to visit:
http://www.csszengarden.com
1 HTML file and 210 css files makes 210 completely different designs. 3 column, 2 column, 1 column, and horizontal layouts all using the exact same HTML.
So, sorry for the rant, but I just want to save you, your co-workers, or the person who takes your job, time in the future when the site you built is redesigned. But then again, this is the internet, how often are people really going to want to redesign websites. You are probably safe.
@fallenrayne: that's not what I'm talking about at all and I don't think I need saving.
Redesign doesn't happen without touching the underlying HTML code either, at least not in practice. Often times, a page template is completely thrown out and replaced by another. From my experience it's a nonsensical notion that people just switch out the stylesheet when they want a new website.
Besides, I'm not advocating the usage of tables for anything and everything - just for basic layout options that don't translate well into CSS (yes, they DO exist and it hasn't got anything to do with the fact that I'm too stupid to grasp CSS). So you have a template like this
<table id="table_blah">
<tr>
<td id="col_left"><?= $leftCol ?></td>
<td id="col_right"><?= $rightCol ?></td>
</tr>
</table>
it's not like this's unmaintainable code. Granted, it carries the assumption of column positions, but those are most likely integral to the functionality of the website anyway. And if you want to change them around, you can do that very easily, too. Conversely, you can produce horrible spaghetti HTML with "pure" CSS just as well (ineptly named div recursions of doom, anyone?).
PS (sorry for spamming): I forgot to add that I'm really really tired of people using the straw man assumption that non-purists who occasionally use tables for something generally don't use proper CSS at all and somehow need to be told how attribute selectors are going to save the world.
Why does everybody think these are conflicting and mutually exclusive styles? Can't I just use CSS for pretty much everything and sprinkle a table in there if and when that's the best tool for a given task?
I was actually the one of the lead devs responsible for writing and maintaining the css for MSN sites world wide. Believe me there is a world of difference in creating layouts for sites that have static or semi static content and sites that not only have completely dynamic content but also have to support millions clicks a day such as MSN. CSS allowed us to support maintain and extend features and content way past what could be done with tables and was also way more performant in every test we did. Especially when you would need nested tables to achieve the same layout. CSS allows reuse of rendering modules for different page types that could not be easily achieved with table layouts due to the difficulty of swapping out code sections.
I use tables now and then, and I'm not ashamed to admit it.
You can take your floats and suck it.
Wow. I'm glad I drank the koolaid 5 years ago and already went through the learning pains you're just now going through (welcome aboard!)
Now I have no problem quickly marking up a layout and decorating it to my needs with CSS. If you use HTML elements as they were intended as best as possible, it's pretty easy to get it right, or mostly right, the first time around (and that does not mean replacing every table column with a div tag, either)
Since you felt the need to delete your other post as well my comment, I will re-post it here since it also applies to this post as well:
I'm all about using the right tool for the right job, as you are suggesting. Though, I have three questions for you.
1. Have you thought about how screen readers and other folks with disabilities use websites? Tables aren't overly accessible.
2. Do you know how much time and effort are put into building a website like Amazon (or any of the other websites you mentioned)? It may very well be that they were strapped for time or resources to do it the "right way".
3. How do you know that the sites you mentioned have CMS that can produce clean markup? Where I currently work we use MOSS and by default it is riddled with tables because some programmer some place "thought" it was better.
Leave the markup and CSS to people who have a passion for it. If you don't want to learn how to "properly" write CSS and get it to work for you then that is your choice. But blasting a impassioned group about their choices makes you no better then your co called "CSS trolls".
Simple rule of thumb: Are you developing a web application or a web content? If the answer is "web application" then there is NO POSTERITY and NO ARCHIVAL CONCERNS. Use whatever tags you want to get the application to work, because there is no implicit meaning in the tags you choose, because the information presented on the page has no meaning. If you are developing a "web content" (static documents), then you should follow the W3C recommendations, layout and styling should be segregated from content, because the information is what is important.
I totally agree, I've suffered from CSS guilt as well. Begone you evil trolls.
Sure, pure CSS has perks, sure tables has flaws. Both work. Let's have peace and develop some kick ass apps that change how human share information.
Those of you posting about tables vs. screen readers, do you use a screen reader? Do you test with a screen reader?
JAWS (which I've used, blindfolded) and Window-Eyes both handle tables, elegantly even, and have done so for years. Raw accessibility is not the problem.
To achieve Accessible Usability, which I think is the real challenge, then you definitely have to be mindful of your HTML output... and you get more of that mindfulness for free if you are already thinking about semantic markup and CSS.
But you CAN create a Section 508/WCAG 1.0 standards-compliant accessibly-usable website for screen readers using tables for layout. I've done it, with a complex bunch of web forms we created that a blind employee needed to use to perform job-critical functions for a government agency, and it worked. I'm proud to say the system was no less user-friendly for him using JAWS than it was for sighted users. ;)
CSS Accessibility Trollery must end! :)
@cmh yes you are right there are ways of creating tables for layouts that are accessible. However, given the fact that the author doesn't seem to care about the markup do you think he is going to write accessible tables?
@Andrew Jaswa: yes, you are absolutely correct.
It is not about using or not using tables.
It is about caring about accessibility, which can be achieved using tables.
So the developer can focus on the accessibility and not CSS hacks that would be needed to replace tables.
Developer employing table-less CSS might as well screw up the accessibility of the site by placing elements in order that makes absolutely no sense, but is dictated by CSS floats model.
So while the CSS rendered page looks great, without CSS it's a unintelligeble collection of pieces of information.
Heh. Almost exactly seven years ago I wrote this an article on using table vs. CSS. Of course, at that time, the big issue was Netscape 4, but you may find some value in it still.
I love that Craig Saila commented that he covered all this, seven years ago. Indeed, "tables versus CSS" was yesterday's argument, and it has been resolved: CSS-based layout methods are superior. This is not a troll speaking, but the voice of experience.
I certainly agree with the basic tenant that there are multiple ways to accomplish a task, and you should use whichever method works best. And vanguard of web designers have long since proven that using CSS in conjunction with other standards-based methods including semantic XHTML is the best solution for page layout. Save the tables for tabular data.
The typical reasons given for not evolving from table layouts to CSS-based layouts basically fall into one of two categories: ignorance (which is forgivable because you can always learn) or laziness (which is inexcusable and means you should get a different job).
The reasons why CSS for layout (with semantic XHTML) is better have all been said before: smaller files, faster load times, more accessibility for all browsers and devices, easier maintenance and updates, improved search engine friendliness, and so on. The key is in knowing how CSS works and what techniques are best suited for your design.
The CSS learning curve is not that steep, and there are many cross-browser compatible CSS solutions freely distributed all over the web (see Craig's site!), including well-documented best practices for handling older, non-compliant browsers.
Meanwhile, tables offer NO real benefits over CSS as a layout method. (I'll accept challenges). As already stated, every one of the post author's site examples could be accomplished - improved! - with CSS. Indeed, any design done with tables can be done with CSS and with better results.
Why clutter your markup with meaningless spaghetti code (nested tables, pixel shims, etc) for the sole purpose of making the content display a certain way? Instead, use well-structured, lean markup that remains meaningful and accessible even in the absence of design flourishes. Table layouts can't do that. Semantic XHTML and CSS can.
Why have your content intermingled with presentational hacks (nested tables, pixel shims, etc) that add bloat to your code and hinder maintenance? Instead, keep those concerns clearly separated, and reap the benefit of updating your design sitewide from a single, centralized stylesheet without having to touch your markup. Table layouts can't do that. Semantic XHTML and CSS can.
There are established and recommended best practices in our industry for a reason. If you want to stay relevant (employed), you should understand the benefits of Web Standards and know how to effectively implement them.
Raise the bar a bit for yourself, and make the web a better place for everybody. Drop the tables, and embrace CSS.
> http://www.csszengarden.com
on slow days, i go over to that site and
crank my textsize to break each design.
often one click bigger is enough to do it.
and the results get _extremely_ comical
as the type become bigger and bigger...
all these "c.s.s. experts" act as though
they've reached some kind of nirvana...
but i suspect if we visited their websites,
we could easily make 'em look very silly.
-bowerbird
Life = true
Wife = true
Kids = true
Mortgage = true
Tables for layout? No.
Learn CSS and 1 year from now you'll wish you never posted this crap.
Your article made me laugh my arse off - I couldn't agree more. I've been doing div-based CSS layouts for a while now and whilst most modern browsers don't complain, IE6 is always a problem. Sadly, 18.5% of web browsers have this installed on their machines which means we still have to pander to their insanity/ignorance.
@bowerbird: If you like to crank up your font size on CSS designed sites, try at least doing it on a site that was designed for professional use such as yahoo.com. They have 2 tables on the entire site, both are for ads. Now, try your same fun little trick on compusa.com and see how it works with a table based layout. About the same as the CSS sites you like to break, eh? Both table and CSS layouts break if not properly built. This is why browsers are starting to implement page zooming instead of font resizing. Not meaning this to be rude or as a slight, but you are new to web design if you think this is only an issue with CSS; hell, this was even an issue with frames.
Oh, and I think you might have been just hitting all the wrong sites on zengarden. Half of the sites I tried broke, and by broke I just mean that some of the font started to overlap, the other half looked great and never broke. I only saw a few layouts that actually broke because of the font size. Those were the sites where the designer didn't think of text resize and put in fixed sized elements that the font sit in. Font overlapping other font happens and a lot of designers fail to think of that. I hope you have some more slow days so you can actually check out some more of zengarden, there is some really great stuff in there.
Tables galore - http://news.bbc.co.uk/
Tables galore: http://news.bbc.co.uk/
@anonymous no so much tables galore:
http://www.bbc.co.uk/
Hrmm looks like the BBC is moving away from tables... If you are going to try and find an example of a tabled site maybe you ought to check and see when that site was last redesigned.
I'm with you on this. It's funny that many CSS Trolls have already posted in your comments things like, "yeah, you can use whatever you want but I would *NEVER* do what you've done."
Anyway I think your reasoning is sound.
Not to be a troll.. but I struggle to believe that this kind of thing is still being posted. It's 2009. Web standards have been argued and fought and discussed for a good 10 years already.
We don't just do CSS because some people say it's a good idea anymore. We do it because there is more than enough evidence proving it IS a good idea.
I started webdesign, coding everything by hand. In Tables - no thanks to HTML for Dummies, but it was the standard thing 8-9 years ago. And tables worked. I used a bit of css, but only to style hover states for links.
Then I got a job where I got hired on the condition I didn't do table layout. And, I'm not going to lie, the first 3-4months was HARD! I spent as much time (if not more) in google and scouring the internet, as I did designing.
But I am so glad I did. I really don't understand people who say tables are easier. They're just easier because you don't know any better. On every account (bar maybe one or 2 remote situations, for which there are workable alternatives) they're harder.
Keeping a site updated in tables is a nightmare. Changing layout is a nightmare. Having any form of continuous text flow is near impossible.
The only thing it is possibly easier at, is a 3 column layout - if you use css for everything else. Oh, and for data. like it's meant to be. that's why the table element is there. for tabular data. and it's good at it.
IE6 is a pain, yes. but that is possibly the worst reason to use tables!! it's like saying my ferrari is really terrible at riding where there aren't any roads, so.. I'm not going to get it, I'll stick with this bicycle... it's just plain bad reasoning.
This, being the internet, means that there is enough information, help, assistance and tutorials to learn to do things the right way. On top of that there's books, courses, and professionals on twitter, etc who are more than willing to help.
Stop taking the lazy way out, or, at least - don't dare call yourself a professional.
If you're happy to bow out, because you don't want to take the time or effort to do something right, then that's fine by me, but don't flaunt yourself like you know what you're talking about.
I've done enough ranting. This post is something I would have expected to read maybe 5-6-7 years ago. not in 2009.
I'm still surprised.
@Cameron: you're actually bringing a good example.
When I know that I'm going to drive only when there are good roads, I will take a ferrari from my garage.
However, if I know that where I will be driving, there are no roads, it would be plain stupid and irresponsible to break ferrari over offroad just because it is "better" than all-terrain jeep.
It's not about "better" it's about right tool for conditions, including investment in time and health.
If you've read the comments, you would see that "moderates" (people who do not see tables as evil) do not propose to use tables instead of CSS.
Just whenever road conditions call for it.
As you have said by yourself, 3 column layout, tabular data, and few other cases are currently solved by using tables saving days of futile fight, and stubborn webdevs' gray hairs.
It is notable though that, this argument still has proponents on both sides after 9 years, in practice showing that tables are not dead, because there's demand for them.
So, the bottom line, there are uses for tables and in some cases they're better than trying to hack the result in CSS, just because someone on internet is theorizing, that tables are evil.
And, btw I'm in web development since 1999, although mostly backend web applications and thick javascript clients, not static content pages.
Also, whenever CSS "display:table*" properties are going to be properly supported by all browsers I'd like my applications to run on, I might use them instead of table tags.
One of the most important things, if not THE MOST IMPORTANT thing to do when learning to do CSS layouts is to work with XHTML "Strict" Doctype. In other words, include this doctype at the beggining of your (X)HTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This disables the browser "quirksmode" and eliminates the apparent unpredictability of your CSS code. This frustrated me to no end when I was learning CSS layout.
If you looking to really learn CSS, without going mad, follow this tip and you will go places.
Cheers!
I build web apps and use tables all the time. They are quicker and easier and much less error-prone.
I use CSS for formatting, tables for layout. You're never going to not use HTML tags, why not use them if you can? I like CSS, but I haven't seen a CSS layout that is faster to implement than tables.
CSS tables can be an elegant solution, but I just don't have the time to mess with the browser-compatibility issues. As long as we have those the path of last resistance is using tables.
And we're talking lots of different KINDS of web sites: if you're designing a huge web APPLICATION like Amazon, with lots of different pages, sub-pages, navigation controls, etc. that all have to work together, tables are easier.
Are you going to tell me that table-less CSS works better when designing a web application when you can have 4 different potential parent containers that your control is going to be in?
If you're designing a web site that needs accessibility and you need to have lighter weight code, or you're a purist and wants to spend extra time, use CSS.
Most really large web applications (like Amazon, Facebook, and eBay) use tables, and they do so for a reason. They are easier to maintain, it's a much lower learning curve, and it's easier to put different content in different containers.
Web designers can feel free to use CSS at their leisure, web app developers almost have to use tables.
Actually Facebook, Amazon, and Ebay all use divs and floats for the main layout. Amazon uses tables to setup their header and footer and a couple of other places. Ebay uses tables in a bunch of little places but the overall page layout is with divs and floats. Facebook uses mostly divs and floats with a little use of tables here and there.
Also, if we are talking large web apps, how about Yahoo. They use all of 2 tables on the entire front page, both for ads.
If you need a page that is always being updated and has constant maintenance, how about CNN. All CSS layout.
So very large websites that want to attract as many people as possible are switching to using all CSS layouts. I am sure they are doing this because it is just the cool thing to do. Why would CNN worry about browser compatibility. Though it is funny that I visit CNN through Opera, IE6, IE7, Firefox 3.1, and Chrome on a weekly basis and it always looks exactly the same in each browser.
Tables have their place. Tabular data and possibly for setting up complex forms (which I still consider data, whether it is inputted or outputted it is still data). For everything else, CSS.
that is very good information related css and table. According to me css is greater advantage than the table.
css is better for website designyou have explain it in better way.
Silly Rabbit, Tables are for Kids.
No serious designer with lots of deadlines, and tight infrastructure would stick to pure CSS, lest they try to get fired.
Except for a few losers, almost all of the sites you pointed out rely primarily on CSS, and make a few exceptions. Trust me, there must have been some good thought before someone decided to use the tables.
Also, large companies tend to have large developer teams with varied range of skills. I know that nearly all of the programmers (i.e. non-front end, non-html savy folks) will put stuff together with tables, and I as the designer go in and clean it up.
There are infrastructure reasons that also favors tables and inline style in certain situations, such as google's layout. I think to achieve something that doesnt break the arrangement of the search box, buttons, and form elements for millions of users with a wide range of browsers, tables are a safe bet. They used inline CSS, most likely, to avoid HTTP requests, which can be damning in high traffic situations.
Finally, like you said. Big companies can break the rules, that does not invalidate the rules themselves.
You don't need a refund, just try finding a job with tables only and see what happens.
But, yeah....the web and browsers are not ready for pure CSS.
It doesn't matter what "should" be used, because most developers don't care.
Tables ARE going to be used because they're easier to use and take less time to implement, and they are much less of a learning curve.
Why do sites like http://giveupandusetables.com/ exist? Because it's more difficult to use CSS for layout and everyone knows it!
You are talking about CSS being easier to read/understand when you forget about all those IE5 Mac hacks tucked away in your CSS file. How are those hacks easy to read?
Tables are a universal element to do layout across all browsers; they are used because there isn't much complexity to them.
You purists can talk and talk and keep talking for years, tables will continue to be used (on most sites) whether you like it or not. Even if the Top 20 sites don't use tables, the bottom 10 million sites will.
If we get to the point where CSS is easier to use than tables, faster to develop, and we don't have to WASTE time dealing with a missing CSS tag or browser compatibilities, then we will all jump over to CSS with open arms.
Until then, all of us web developers are going to HAPPILY use tables and laugh at any post that says we can't or shouldn't.
All the tables trolls miss the point. Table design now is nothing like table design back in...let's say 1998. Really, we're not talking about CSS vs. Tables, we're talking about using DIV elements instead of TABLE elements, but most of the "design" work is handled by CSS. So it would be nice to see the CSS creators come up with a close to Table alternative, if tables are to be avoided for maintaining document structure in a certain way. And for those that use tables heavily, you're obviously making mom & pop websites that aren't very demanding, good luck finding a job.
I guess I'm a "table troll".
No one is suggesting ditching CSS, CSS is GREAT. For FORMATTING. No one in their right mind is saying to use FONT tags or CENTER tags, but to use tables (not exclusively, but for the most part) for layout and css for formatting.
After all, does CSS mean Cascading LAYOUT sheets? NO.
CSS stands for Cascading STYLE sheets, because CSS overwhelmingly is designed to encapsulate style and not layout of pages.
Use what you want, I'm going to continue to use tables for layout until CSS works easier in all browsers.
Floats are a pain in the ass. And that has nothing todo about the different implementations.
A couple of things were CSS sucks big time:
Floats combined with adjusting "cell" content height due to font size changes + fixed size images (accessibility)
Anything that has to "stick to the bottom" without Javascript.
oc you can get most page layouts working without tables, yet sometimes I have to muse about the people that have to use dozens of helper DIVs and browser hacks to achieve what a rather simple table would have done in no time. There are just some serious gaps in the CSS specification (and implementation, min- max- height anyone?) which can be painfull to bypass.
btw - almost all aldi (south) pages use pure CSS layout. It's not pretty all the time though.
Hundreds of lines of CSS suck btw (and that is were pure CSS based layouts end most of the time).
I've been using CSS for layout for a while now but I miss the days of tables, things were much easier with them.
Let's put it like that, I believe tables were not originally made for layout, but they get the job done very nicely. CSS, even though it's the right thing to use for layout was not created with layout in mind, using 100% in your design is now impossible (thanks to the *brilliant* CSS box model), things that used to be incredibly easy with tables (like centering things vertically) are now impossible with CSS, now designers use javascript for their layout for the things CSS make impossible, CSS should make our designs clean and elegant but I wonder how clean and elegant is a design that uses javascript for layout, I don't remember ever using javascript when I used to use tables for layout.
In short, let's admit it, CSS as it exists today is not ready yet to take over tables (and this is despite all the time they had and the changes in CSS2 and CSS3), CSS is not designed for layout, it's designed for simple mainly *text* based websites, the way CSS is used for layout is far from being clean and elegant JUST LIKE TABLES.
CSS will be viable for layouts when the Official Web Standards Team adds a tag that says "I want to make a freakin three column layout without having to dick around with things like how wide each browser thinks a pixel is or whether it understands z-level abluuuuh". Until then, there is literally no reason not to use tables for layout.
If you're worried about your kids and mortgage, you might want to examine how often words like "tableless" and "semantics" are popping up in the classifieds
And if you think...
Replacing tables for layout means you just put divs in where all the TRs and TDs went...
It's actually hard to make a CSS layout expand with window resizing...
The fact that markup changes are frequently required for new layouts lets tables off the hook...
That a good CSS developer uses hacks or even bothers to learn most of them...
...then I am a better, more marketable developer than you are and I am coming for your job.
That's not trolling. That's just calling intellectual laziness and willful ignorance for what it is. To any employeer who knows a thing or two about code, yours is a joke.
Get some books and read 'em. Take a class. Or accept the fact that some people are just graphic designers who know HTML and some people are developers who probably can't do art to save our lives.
Those of you who are neither will be joining the ranks of unemployed network people who were drawn in by the paycheck but didn't want to learn anything new after college either.
Pro table layout arguments in 2009? How are you people still getting jobs? Have any of you worked for the same client twice? Or have most of you just had the same boss for way too long?
Half the Google non-table web designers are probably wishing the other table-users would stop messing up their designs.
There isn't one bloke called Joe making a website like Ebay or Amazon. There's a team, and some people in those teams are idiots, and don't keep up with the times, just like the school teachers teaching how to cut pages up in Photoshop/Dreamweaver.
Learn CSS. Seriously. You're dead wrong about this.
Allowing yourself to yield to other people comment is a mistake you have learned.
CSS and Div doesn't necessary mean the only way to get things done.
Thats why we have tables.
By goly, ever heard of the term: "Use whatever to get the job done right"?
Now that I've learned it and have used it for years I just find CSS easier most of the time. It's hard at first but it's worth the initial frustration. CSS is actually easier for laying out content, the html is easier to read, style AND layout tweaks can be made mostly in the CSS without tampering with the html, and there are all the other benefits of semantic markup.
CSS has limitations (such as PIES's nav example) and sometimes you've got to bite the bullet and slip in a hack. But a clean separation between content and style is something to strive for.
This battle will wage on until the end of time. Each group just shake hands and agree to disagree. This debate get old and tiring.
I appreciate what CSS offers and I use it CONJUNCTION with tables. For these CSS purists who do say that this is the be all and end all, I refute primarily because of the 100% browser compatibility issues. As a commercial web designer it's something I MUST think about. There is nothing worse than have something work on browser A and fail on B and have to tweak it because of some little CSS anomaly.
That's not saying, in an ideal world, that CSS wouldn't be the way to go, but there does need to be a reworking of the whole "DIV" system. CSS allows you to build the framework, keeping your page code very clean, but it IS very confusing to set up (though much of this can be overcome with standards).
If you have to add Java in there to get it to respone, you're adding a layer of complexity that is now something else to break.
I use tables. Perhaps I'm old fashioned. I use CSS as well. I like the strengths that both provide and, as CSS is more widely accepted by the browser community, I'm sure I'll adopt more of it (but, for example, the Z-INDEX feature only works on some browsers).
I don't think there is WRONG way to build a site. If you're an avid CSS fan or rabid TABLE fan, then go with what works. Just keep the code neat and support won't be too much of a problem.
Those who "flame" people who don't agree with them usually tend to be people who really don't do this for a living in a world where we don't always have time to be "purists" because, as Myrth said "life, kids and mortgage"...
How do you design a web page using CSS-P that has a header, footer, and two columns of equal height with a 160px width static sidebar on the left and a fluid content panel on the right and have it resize properly with an overall minimum width of 320px? I've seen hacks like the use of extra div's, negative margins, and background images and still in the end, it doesn't work as cleanly and error-free across browsers as tables. IMO, not only is CSS-P esoteric and difficult to learn, but even if you master it, it still doesn't cut it.
Great article, and it reinforces the impression I got from these CSS fanatics. CSS is cool for some purposes, but these guys who think using tables for layout is the ultimate social disease need to get out more. I've read a lot tonight on "why you shouldn't use tables", and am not at all convinced. Each has its benefits, so I'll continue to use both.
I appreciate all the comments. I think it's silly to insist on one way of building a site. I've used both CSS and tables for layout and happy there are both options. What annoys me, like others, is the attitude of some CSSers that it's the only acceptable way to do it. As far as screen readers, there are ways to code tables so that readers get the information.
Thanks for the nice post.
Thanks for your comments. You've said exactly what I have been thinking. I too have been banging my head against the CSS wall trying to get all the code right. Everyone says CSS is better, but I can't see how. It's triple the markup, triple the headache, and you need two screens to keep it all straight. I agree, lets just use the code we know. It's not broken, it still works. So why kill ourselves over this??
You use the top sites as examples.. Are you building a top site?
How many search engines care about indexing Google's home page?
How many search engines are capable of penetrating the walled gardens of Facebook, Hi5, et al.?
Have you ever parsed a DOM tree?
Do you know what a DOM tree is?
You TABLE troll, in February of 2009, for CSS trolls to begone...
I have personally e-mailed leading accessibility and design professionals in the industry and they have responded (more times than not within minutes) things like "time marches on, tables [for layout] are history" and "tables [for layout] are a cheap hack".
Can you name one person I might be referring to as a "leading professional"? Try a Google search or two..
Check out W3's CSS home page. Read the quote at the top of the page. Are you familiar with a Jakob Nielsen?
Are you sure you have enough information to open your mouth? I find that the most naive of people have disproportionately large egos.
Why do so many people care about three-column layouts?
The designers of CSS, who have laboriously pined over the most miniscule of details, have prioritized a whole slew of issues that make the TABLE argument sound like child's play.
.. it really is ..
That said, leading CSS gurus have lamented on the layout system. I agree it is far from perfect.
The CSS working group (CSS WG) always has a public mailing list if you have any ideas.
In case you haven't changed your mind in the last two months I anonymously request that you try something:
Next time you're in the shower -- take a few extra minutes -- think about how and why smart people (look em up, don't take my word) might have neglected to solve the multi-column design pattern up until now.
Keep it simple stupid and learn to love CSS for what it's worth -- you'll soon realize that using TABLEs to pack information across multiple columns of the same screen probably works better for your .psd than it does for your site's users.
How about that: as soon as any of my users/visitors will complain about table usage on my site, i'll deal with them.
LOL
Nice post
Amen brother.
Like many of you I am a senior level developer. I've been making websites professionally since 1997, everything from small stuff to 8 million dollar rollouts.
You idealists try this: Make a tableless gridview where some of the elements wrap. Use border shading for every element. Observe the results. ERIC MEYER himself says that CSS is not capable of addressing the issues that you will observe. But according to many of you Eric Meyer is just too lazy and stupid to learn how to do CSS the right way. LOL.
When we reach our utopia I'll be able to join all you web designers with your colored pencils and preaching against ANY use of a table. But until then, I'll use CSS for things that CSS does better, and I will use tables for what tables do better. The gridview is one such thing that tables do better.
For reference - Eric Meyer:
http://meyerweb.com/eric/thoughts/2009/02/17/wanted-layout-system/
Let's consider a webpage featuring the following basic elements:
1. two horizontally centered columns with different widths, full height and different background colours
2. the text in the first column is aligned to the upper left corner
3. the text in the second column is aligned to the lower right corner
layout tables vs. css2: http://tinyurl.com/ccj8em
Very good post.
Loved the comment:
"
Microsoft: Navigation bar is a table. What did you expect? Unicorns and rainbows?
"
:) :)
Forms are INTERACTIVE TABULAR DATA. Meaning, you should use tables for forms. Period.
The one thing I hate about tables, is not even really the lack of semantics, but the way you are so locked in to a design. Now when you start using css, you can easily fall into the same trap. But it is easy enough for a well designed css site to be rearranged later without touching the html. It also means you could easily use multiple themes on a site using only css and some method to select the css file.
Using css is great when your page makes sense without css because the html is clean. Then you are free to change the look at will and the content is the same.
Not trying to hate on table users, but I don't see the point of going back to tables personally.
And one more thing, you shouldn't be concerned about pixel perfect results across browsers, it should just look good in all browsers.
I've been behind the 8-ball for MANY years. It was only recently (where the heck have I been?!) I learned that tables are 'out' and not considered standard compliant, and have since been working on converting my personal website to use DIVs/H1s/ULs/standards and (more) CSS.
It's not easy.
The inconsistency is what bugs me. One of the big ones being no valign=bottom. I ended up changing my whole header design due to this. As much of a 'hack' as using tables and spacer.gif's is, at the very least there I could code a design and get it on-screen very quickly. Not try to align something, find out (after hours of searches and tweaks) that it's only partially supported sometimes, and end up having to change my design because of code limitations.
I can see the argument for CSS. Margins and padding are wonderful and a couple DIVs instead of tables inside tables and spacer images makes for much cleaner code. Then again, tables seemed to be a lot more consistent across browsers, where layout in CSS is giving me headaches as I'll add a float or whatnot and it suddenly renders different in IE vs Firefox.
That said, going forward I expect to become much more comfortable with CSS, but I can see cases where a mix of CSS and tables is the most simple and clean solution. It all depends on context. I will continue to pursue tableless design for experience's sake though.
your post is helpful and informative
For all of you designers discussing why css is better than tables once you learn how to implement it correctly, I'm going to go out on a limb here and say that I don't think that's the point of the article.
I also think those responses partially prove the point about those who use css instead having a bit of a "superiority complex" with the following mindset...
"I used to be an idiot stuck on tables too until I actually bothered to learn css and now I'm enlightened and advanced enough to know never to use tables again, but, ya' know, if YOU'RE too stupid to be able to use css 'cuz it's just too hard for you to understand, then hey, why not use tables?"
The fact remains that at the end of the day, some designers have only two goals: Put up a site quickly that displays the content the way they want it displayed.
Not everyone cares about coding "holy grails". Not everyone's website is going to have 100 pages and be designed to support thousands more. Not everyone cares about facilitating the entire gamut of possible visitors to the point of straining themselves over accessibility beyond the typical web browser.
Some people just want to do a simple thing simply and in a way that's cross compatible with the MAJOR browsers THEY care about without having to put in extra lines of code or hacks.
No one should have to justify or defend their desire to use tables nor should they have to be continuously pelted with css users going on about why they "get what you're saying, but css is still better..."
Not everyone cares.
When it comes to table-based sites being unattractive, I can't say I've seen a pure css site that wowed me either nor have I seen one that didn't still have the appearance of being set up in a tabular format anyway.
As for increasing load times, I've yet to see a difference in load time on the sites I frequent and happen upon that would even make a difference and I've encountered plenty of pure css sites that take forever to load.
Saying tables can increase load times is like saying that eating too much can make you gain weight. Depending on what else your physical makeup is comprised of and how your individual body functions, that could be one pound or eighty, which means it only matters WHEN it matters.
As for the comment that the only reason tables make more sense to some people is because they think of design in terms of what tables can do, the only reason that may be true is because what tables can do happens to mimic the way we actually see and interact with content in a browser window or often in life, for that matter.
When you put two pictures up on your wall side by side and another below them in a way that looks nice to you, will you not readjust them later if something about the wall changes in order to keep it looking as nice as it did to you before?
So what if someone uses tables to do the same for three pictures on a page? It's not the end of the world.
There are plenty of things css can do. It doesn't mean you HAVE to use css when something else works perfectly fine for you and often in a more universal way.
Let's not forget that there are people out there using the major most popular browsers who disable css entirely, not just changes to colors and fonts.
I've seen plenty of pure css based site layouts degrade in a way that makes the content completely useless because you can't follow or read the content anymore.
Everyone is always wasting their time arguing over what code SHOULD be used for. What code was SUPPOSED to do. When it comes to some things, all that matters is what will get the job done.
If you want to use the back of a screwdriver to knock in a tack instead of a hammer, who cares? It did what you wanted, didn't it? In the same token, if you want to use tables to show your content instead of css, whatever works.
You're wrong. I've been designing and building websites since 1994. I've done more table layouts than probably half the people on this comment thread. Tables. Nesting. Font Tags. Spacer GIF's. You name it. I go way back and I've seen and done it all.
I made the switch to proper semantic coding a few years ago and yes... it is maddening as hell at first. To say the least. It's a HUGE mind shift and there are so many little things to learn and gotchas (like the box model issues in IE and how to clear floats... etc.). But once you get it... you will NEVER go back. It's hard, but if you care about what you do, you will take the time to learn. And now that I code this way, I actually find it significantly easier and it opens a whole new world of design possibilities.
On the other hand, if you don't care about what you do and have no pride in your work, then keep on doing things the prehistoric way.
I love the "CSS Troll" name. Great one.
The bottom line may also be this: You are probably the only one who cares because within 3 yrs all websites get rebuilt anyway.
I've also built sites for more than 10 yrs and very few of the sites exist in any way now. Not because they weren't built right, but because someone wants something fresh and they have money to do it.
Unless you are trying to optimize a site and save 4kb per page, I say - built it however you want, minimize your js and css, and turn on GZIP. You are good to go. Use what works. The right tool for the right job.
peace out CSS Trolls !!! ha ahahah
I find it ironic that one of the people extolling css based design and dissing tables in the comments above gives a link to a page that does not fit in my browser window.
http://aplus.rs/css/on-css-tables-and-layout/
I use an 800 x 600 display on my little laptop, and must scroll from left to right to read every line of his pro-css, anti-tables screed.
If your css based design was accessible to ALL users, whether using older equipment or having low vision (thus using low res/large display) then I could take your argument seriously.
But it's a complete PITA to have to scroll to read every line of a site.
The one that continues using tables is because it does not dominate or does not know CSS. To design in CSS is far better, by the subject of order, maintenance, accessibility, navigability and thousand reasons more.
Post a Comment
Subscribe to Post Comments [Atom]
<< Home