I know that tables are for tabular data, but it's so tempting to use them for layout. I can handle DIV's to get a three column layout, but when you got 4 nested DIV's, it get tricky.
Is there a tutorial/reference out there to persuade me to use DIV's for layout?
I want to use DIV's, but I refuse to spend an hour to position my DIV/SPAN where I want it.
#GaryF: Blueprint CSS has to be the CSS's best kept secret.
Great tool - Blueprint Grid CSS Generator.
There's the Yahoo Grid CSS which can do all sorts of things.
But remember: CSS IS NOT A RELIGION. If you save hours by using tables instead of css, do so.
One of the corner cases I could never make my mind up about is forms. I'd love to do it in css, but it's just so much more complicated than tables.
You could even argue that forms are tables, in that they have headers (labels) and data (input fields).
In the UK and in US there is a legal requirement for favouring CSS layouts over Tables. Both Section 508 (US) and the Disability Discrimination Act (UK) cover accessibility standards for users with limited vision.
In the UK the legislation extends so far as to actually make it illegal to commercially produce a site that impedes the ability of a partially sighted user in the same way that it is now illegal to have a shop with a step to enter it and no way for a wheelchair user to get in - admittedly there have been no prosecutions over website accessibility yet. However I would always go with CSS as it means that your site design is so much easier to maintain in the longer term.
Investing time in learning CSS (I used W3C schools and .Net Magazine http://www.netmag.co.uk) will pay off.
Why tables for layout is stupid: problems defined, solutions offered.
In my opinion, the bias should be in favour of CSS over IE6 - i.e. unless there's an insanely good reason (e.g. your site is only targetted at people using IE6, which would be weird), it's better to 'alienate' people using IE6 rather than people with poor vision and/or automated user agents. Usage of IE6 is decreasing; the latter group is increasing in number. Even if your site doesn't look perfect in IE6, it will probably be easy for those users to read it than a table-based layout will for those who can't see it.
This is a very general question, so it's difficult to answer with specifics. The two books that are excellent resources are:
Bulletproof Web Design, Dan Cederholm
CSS Mastery, Andy Budd
If you only have to spend an hour designing your overall site layout, that's not bad going.
CSS may not be a religion, but it is how browsers interpret HTML for layout. Like it or not, all modern browsers use (some version) of the W3C box model. To continue to rely on tables is continue to rely on a methodology that is just plain wrong in the eyes of the people who design web rendering technology.
I know CSS can seem awfully complicated at times, but I believe it is a necessity in this day and age (trust me, your clients are going to want it).
If you don't feel comfortable taking the time really learn CSS (so it takes you seconds or minutes to position elements...not an hour), then you need to pass the layout work on to someone who knows really knows the front-end.
Yes, there are a lot of problems with the current browser implementations of CSS, but nothing so drastic that you should ever feel the need to return to table based layout. Just sit down and take the time to learn it, like you would any other language or framework.
The best online reference resource I've found is this one:
http://reference.sitepoint.com/css
But it might not hurt to look at a book like Designing With Web Standards which goes a long way in helping you to understand why this stuff is important.
I was also thinking Blueprint was great until I saw YAML (Yet Another Multicolumn Layout). There is an online builder tool which is fantastic. I can get a cool looking multicolumn layout within 5 mins.
After a while you don't even think about it. Using divs with CSS seems like the easier option imo. Plus, you have more freedom when using frameworks such as jQuery. I couldn't imagine doing some of the cool jQuery stuff without using css or divs. If you use tables for style and layout I feel like you miss out on a lot of new technologies and stay stuck in the 90's.
This may be unhelpful but I somehow don't understand all these problems related to CSS. If a newspaper designer would try to embed a movie in the ad page, everybody would agree that he's a bit crazy. But still those same people pine after three-column layouts in HTML. HTML is just not apt to handle this kind of layout well at the moment. Furthermore, multi-column layouts are generally not really well-suited for reading on computer monitors. Aren't there enough viable alternatives?
And by the way, even tables don't offer a good way of implementing a fluent column layout so this is no reason at all to resort to such hacks. Assuming a halfway modern browser (i.e. > MSIE 6), tables don't offer any advantages over clean HTML + CSS that I know of.
I would just use the table.
In my experience, using a table for layout will work the same in all browsers and the CSS will not (especially if you're trying to support IE6). It's just not worth the hours and hours of coding to get a layout to work in CSS when it can be done in 10 minutes using a table.
The other advantage to using tables is that your layout can very easily dynamically size itself to content. Trying to get that done with CSS is a huge nightmare.
I find there are lots of limitations to CSS that just seem to hint the specification designers don't make websites for a living.
Use HTML tables if you can't do it easy in CSS.
Having said that, some of the frameworks do help and it always nicer to do in CSS if you can manage it.
You might be able to find some inspiration here: http://blog.html.it/layoutgala/
A List Apart is a great reference for using semantic HTML, the Holy Grail article is probably one of the best examples. Also, check out CSS Zen Garden for some inspiration on the topic or read Dave Shea's excellent book "The Zen of CSS Design."
You use CSS for layout because not only is it semantically correct but because tables have multiple drawbacks.
Tables are horrible for accessibility because they break almost all screen readers, which in turn gives the visually impaired worthless information because of the way the tables are read.
They also render much slower than their CSS counterparts. Tables have to be drawn twice, once for the layout, and again for the content. This can mean that if you have a remote image or two on a server with a slow connection that your ENTIRE LAYOUT will not render.
Would you use an array to store a dictionary when you have a hashmap? No. And you shouldn't use a table when there's something out there which works better.
Related
I've made websites before it was really used, and I've made the decision years ago to use CSS to design my webpages. It was a lot of trouble to leave the great tables and try "clearing both" instead.
The question is, after all those years I still have trouble sometimes. And everytime I run into a bad CSS situation I recall the easy way to make cols with "table".
And the more I'm thinking about it, and the less I understand why we dropped the use of table. They are great to design pages, and not every websites need to be 100% W3C conform or have hundreds of page that wouldn't support a change of design because of that.
So yeah, now I'm thinking about going back using tables. Should I do it? Do pro designers actually use tables where they shouldn't use them?
I also stumbled into a grotesque table in the google map API. If google ingeneers are taking that shortcut, why not me?
(sorry for my english I'm not fluent).
EDIT:
lot of response says it's my fault. I considered being pretty good in CSS, started with books of Eric Meyer and have been doing CSS since 2005. I know that the trick width:100%;overflow:auto; works in most case (and also that we didn't have this trick bad then), but I wonder if it would be a bad thing to use tables to quickly do the job on smalls website, like a blog.
I had the same issues when I started dropping tables and using CSS. Sometimes CSS floats can be a pain, there are a few tricky edge-cases that come up when using them for page layout, but you'll learn how to deal with them and it really is worth it. Your code will be 10% of the size and much easier to work with.
Another consideration is CSS floats can be made to work nicely with mobile devices and small screens. Tables can cause real issues with this, especially if you want to add nice touchscreen improvements.
Lots of "pro" designers use tables when they shouldn't. All over the place. But "pro" is often not the same as "good". Tables should only be used for visible tables of data.
Tables still have an important and semantically correct correct usage. That is for the display of tabular data. That is especially useful in envirnments that are DB-centric or that are process a lot of xml with ajax. For general layout they are not appropriate because the cause slow page loading because the browser has to wait for all contents before it can start rendering. CSS should not be difficult. If you are having trouble you should look at how it is being used on sites where you like the design.
The big advantage of CSS is that you can develop a master stylesheet for a site, and then where individual pages need slight variations you can apply overrides or modifications to specific elements without having to change the master sheet.
avoiding table layouts offers up a plethora of benefits but # the end of the day, browsers are still entirely too forgiving (currently) and you can get away with it. if you are wary of going back to them, read up on display:table and css3. it's practically table based layouts, minus the table.
One reason tables are avoided is that the content inside of them does not display until the HTML for the entire table has loaded. With the CSS method, this is not true.
If you really have a lot of trouble with the CSS method, you must be doing it wrong. Consider reading over other people's code to see how to do it better.
6 years later (we're now in 2017) and CSS now has grids and flexbox which should be the easiest way to build a layout without using ugly hacks and without using tables.
Having recently become a convert to Grid Layouts, I find myself looking at more and more sites' code and seeing that grids are still grossly under-represented.
While I accept that grids might not always be the only right solution for every web design situation, I think that they are a tool that should be seeing higher rates of adoption than they currently enjoy.
I think if I'd known more about the design approach earlier, I would have saved a considerable amount of time and effort. But Grids don't seem to have the sort of exposure that, say, CSS standards do. Why should that be? Is it even a problem that some people might be missing out on a design approach that could potentially be a better solution to a problem they're working on?
The "Grid Layouts" you speak of, are nothing "special". What you are actually talking about, are "CSS frameworks". These "Grid Layouts" should still be using CSS Standard
You also did not mention the most popular CSS Grid Framework - YUI Grids CSS
I think the reason people normally don't use a framework, is that they don't want to be locked into something with limited customization. Also a big reason is that there is no guaranty that the framework will be around forever, and once it is gone, your knowledge with that framework is useless.
There is also some Criticism of CSS Frameworks on Wikipedia:
Lack of flexibility outside the limitations of the framework
Bloated source code
Additional HTTP requests for multiple files
Lack of substantial additional features beyond what is already available with CSS
Also I think that most web developers just like to write there own HTML/CSS.
I'm going to preface this by saying I personally have no strong feelings about grid-based layouts one way or the other. However, the reason other people may not want to dig into them is that it's a major time investment. For example, if you look over the docs and tutorials for Blueprint, it's clear that figuring out how to use it and applying it effectively for one simple project is going to cost you at least an afternoon, and that's assuming everything works exactly the way the docs say it will. If everything doesn't do that, you could be looking at several days of Googling and forum posting. Nothing against Blueprint or grid-based layouts. It's just the nature of these things.
So for all that risk and effort, here's the payoff: every element in your layout lines up on a grid.
The debate over whether that's worth the effort could go on for years. I'm not going to touch that one. Let's just say it's debatable.
I don't like them. The 960 grid sites don't work well on the iPhone/iPod Touch. And they're terrible on my Blackberry. I prefer a fluid layout that works well on smaller screens.
I don't mind if they show up as 960 on computers, but for Pete's sake, serve me something fluid on mobile. If everyone used this, I'd be happy.
I think we don't see grid layout to be so popular because to use any CSS framework you already need to know CSS on decent level, in case anything goes wrong, or because you gonna need to style your elements anyway.
So the question that asked why somebody who already decently know CSS will start using framework.
I think the best way to use framework is to rip some parts of it (like form styling) and use it with your own developed things.
For some reason, it never dawned on me that there could be frameworks for CSS. I have been working on my own personal site, and I just really hate 'designing' with CSS (I think more then a few programmers might agree with me). Anyways, I understand the benefits of a framework for a language such as Java, PHP, [insert language]. I downloaded a couple different CSS frameworks and couldnt really figure out how to use them. I guess I might be expecting an API or something (which obviously doesnt make sense given the lack of logic in CSS)...
Has anyone here used (and would reccomend) a CSS framework? Is it overkill for a relatively simple layout?
Please do not post links to other sites, I know how to use Google. I would rather hear the opinions and insights of the community. Thanks.
Please understand framework here simply as 'a collection of helpers for getting things done'. So what will you get in most cases is a set of CSS definitions, resetters and hacks, which you will probably need to code for yourself anyway when having cross-browser compatibility on mind.
No links? K. First, you should get familiar with Grid Design techniques. My fellow front-end developers recommend Blueprint for handling CSS-based layouts, no matter how complex they are. Hope this helps a little.
Caveat: I haven't really looked into this subject in a few years, the landscape may have changed.
The few CSS frameworks I've played with in the past have been more or less hideous things designed for snapping to grids, wrongheaded desires to bring WYSIWYG into the picture, and providing things like generic rounded corners and such. They tend to have some semantic issues (.italic FTL) and require a lot of manual tinkering for a framework.
More practical for the CSS beginner or rapid dev site, are perhaps the CSS reset which functions to baseline CSS across browsers (yahoo's) (Erik Meyer's). But this is not without it's own controversy and never seemed to be enough.
Basically. I find CSS requires a toolbox of common techniques of your own, but something you'll pick and choose and modify constantly. As in much of web dev I think the more experienced you get the more you find yourself wanting to roll your own.
I used YAML (Yet Another Multicolumn Layout) in a few projects, because I didn't like to "fight" with the Internet Explorer 6 HACKS.
There is a good explanation of how to use it and you can customize it to your needs (as long as you're going to use a multicolumn (2 or 3) layout).
960.gs seems to be fairly popular with designers lately, although I have never quite seen the point to CSS frameworks myself.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
Reading on another forum I've came across the world of CSS Frameworks. The one I've been specifically looking at is BluePrint. I was wondering if anyone else had come across CSS frameworks, suggest which is the best and if they are worth the effort?
CSS 'frameworks' are completely missing the point.
CSS is not like JavaScript, where you can include a base library/framework and then call functions and objects from it to do higher-level work. All a CSS framework can give you is declarative rules: some default browser-rule-reset stuff, some class styles to be forced to author your page to, and layout rules using 'float' and 'clear'. You can write that in a few lines of CSS yourself rather than pulling in the bloat of a hundred framework rules.
The 'grid layout' stuff in particular goes back to the bad old days of mixing your presentation into your markup. 'div class="span-24"' is no better than a table, you'll have to go back in there and change the markup to affect the layout. And all the frameworks I've seen are based around fixed-pixel floated boxes, making it impossible to create a liquid layout accessible on a wide range of window sizes.
It's backwards authoring, of use only for someone too scared to write a CSS rule.
So, nobody's responded to this question yet (although I've seen a few upvotes), so I am going to at least attempt to tackle the second question in this prompt.
CSS Frameworks are great; like any other framework, they reduce development time and let you get working immediately on site-specific design and CSS. They think about hard decisions so you don't have to.
Unfortunately, there are two downsides to using a framework (in general):
The framework dictates the overall structure and mechanics of your CSS code. Now, I'm not talking about a CSS reset (these are useful in their own right, but they are not true frameworks); I'm talking about an honest to good framework, that has already made the decisions about what semantic tags you are going to be using in your document, etc. As such, you are made dependent on the framework, and when there is a bug in the framework, you will most commonly have to fix it yourself.
Frameworks are not an excuse for being oblivious to cross-browser/advanced CSS issues. You will invariably run into them, just as you would working with a PHP or JavaScript framework. And you need to know how to deal with them. There is a common saying that you should write your own framework first, before using someone else's.
Taking a quick peek at Blueprint, I would not really call it a framework; maybe a reset with a few extra goodies on top.
I've looked at BluePrint and a few others and the only CSS 'framework' I'd recommend is YUI Grids
Pros:
Written by one of the best frontend engineers out there (IMO) (Nate Koechley)
Very small. 4KB
Very flexible (1000 different layouts)
Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
Supports easy customization of the width for fixed-width layouts.
Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
Layouts less than 100% are automatically centered.
Somewhat semantic classnames (better than top, left, right, etc)
Cons:
Lots of extra markup compared to hand-written HTML and CSS
Takes some learning to figure out how to do complex layouts
As other have posted, there are no real 'frameworks' for CSS. Reset stylesheets help a lot with layout too. I usually stick with a reset stylesheet and go from there. But if you don't have a lot of CSS experience YUI Grids could save you some time.
Compass is an actual CSS framework in the sense that it gives you not only templates (both YUI and blueprint), but also reusable constructs and higher-level declarations while still giving you familiar CSS syntax.
Take the time to study and understand (really understand!) a few css frameworks such as BluePrint and YUI, and css resets like Eric Meyer's. Then, take the time to put together your own reset and/or framework based on your work methods and the kind of sites you build.
Personally, I use most of the Eric Meyer reset with some classes and resets of my own, plus a few ideas from BluePrint and YUI.
I recently watched Eric Meyer give a presentation on CSS Frameworks in which he asked the question: "so which one is the right one for me?" He then answered the question by showing a blank slide. His point was, that there are certainly some useful concepts built into most resets and frameworks, but the one that will suit you the best is the one that you write for yourself (it's worth the effort).
Why use css 'frameworks'?
If you are pressured for time.
If you do not know css, and don't
know someone who can write it for
you.
If you are not overly precious about
standards etc.
I know programmers who have been really happy to use blueprint or 960, as it allows them to put together a layout on their own, without turning to a front-end developer. This is ideal for personal projects, or startups with limited resources.
If you have decent knowledge of CSS already, then presumably you have a decent library of stock layouts already, so you clearly won't need a framework.
However, if you're a beginner and just need to get something up and running, then you might turn to a framework, as it makes basic layout much simpler, and tackling browser compatibility also.
Having said all that, many frameworks out of the box do make use of some horrible class names etc. I know of some websites that have taken a framework as a starting point and then customised it with their own class and id tags. But clearly there's a bit of work involved in that rewrite too. Using something like Compass, as mentioned above, does help to get around that.
So, CSS frameworks - they can save you time, at the cost of semantics. They might also hurt your knowledge of CSS, but that is more up to how much you invest in learning the subject in general. Whether you make use of them is up to you.
You'd have to ask yourself how effective the available frameworks are at solving your problems. Do they meet your requirements?
By using a framework, you can set some rules or details at the pixel level and devote the rest of your time to implementing and producing. It's a massive productivity boost. If you find yourself spending time adjusting things by a few pixels late in the project (micro managing the design), it's a sign that a framework can be useful.
Tip #17 in The Pragmatic Programmer says: "Program close to the problem domain". Using a layer of abstraction can get you closer to solving the real problems of layout. For example: you might be able to concentrate of enhancing the user experience with the extra time you have rather than minor adjustments of pixels.
This is not to say you must sacrifice quality for quantity. It's about efficiency.
On a recent project, I made my own framework because we had very limited resources and the popular frameworks didn't do what I wanted. Then, I set up the design team's PSDs to snap to the same grid I deployed.
A framework doesn't have to be any particular implementation of CSS. It doesn't have to be something bloated you downloaded from the interweb or something implementing outdated ideas. It's just a technique for getting a job done. I wouldn't be surprised if some coders already have their own frameworks and don't even know it. In fact, if you consider the DOM as a set of default elements you extend with CSS, then that's a framework by definition.
I actually spent a good portion of the last 24 hours investigating this on my own, heh. My conclusion was that a nice reset (I used YUI Reset), and maybe something else to set baseline stuff (YUI fonts was worthwhile in my case; maybe the "extra goodies" of BluePrint would be in yours) is a good idea. But, a "framework"---which is generally something like YUI grids---is too restrictive, forcing you to use their class names, ids, etc. and rarely fitting into your site like hand-made CSS would.
So in short: resets seem pretty nice; it's good to eliminate all the variation in e.g. margin-vs-padding for lists, or paragraph spacing, or whatever. But that's as far as I would take it.
i haven't used it yes, but i think emastic may be a good alternative worth a check. it it is similar to blueprint in scope, but also supports elastic layouts (hence the name) and you can specify values in px, em or %, and even mix them.
Compass I think is amazing. Make sure you see the screencast.
I am using 960.gs for a few websites and find it very simple and easy and worth the effort. Saves me a lot of work on layout. Make sure to check the custom CSS generator which goes away with the fixed width of 960 pixels.
I think that this video presentation by Site Point CEO Kevin Yank will answer your question. I really recommend to watch it.
Compass lets you rename your framework's classes and ids with your own semantic names, so you might want to check it out. It also provides access to stuff you just don't get with plain-vanilla CSS such as mixins.
I'm astounded by so-called "CSS experts" who criticize these tools without really having digged in and used them. Are they essential? No. If you like your own framework (you do have one of your own, right? A CSS framework is just a carefully defined library--everyone should be using one) then by all means, keep on using it. No one is forcing you to use other frameworks and I don't see people who are using frameworks telling CSS purists that they are "doing it wrong."
Criticizing frameworks from such a standpoint just reveals an insecurity as well as an ignorance. For example, the notion is laughable that a person would use a tool like Compass without knowing CSS. You realize, right, that a framework generally doesn't write all your CSS for you? You can still break out and write your own CSS within the context of most frameworks. In fact, if you don't know CSS you might get frustrated quickly.
For myself, I appreciate having a framework because it is already documented, tested by hundreds of other users, and I can apply my own classes and ids via Compass. If I need something that the framework isn't suitable for, then I'll code my own.
Matt Raible of AppFuse fame had a CSS Framework contest a while back to develop CSS Frameworks for AppFuse. The results are published here. There are a few variations and I have used some myself because I use AppFuse and find them very good.
I should add that these CSS Frameworks work well because they are used in themed applications. That is, if you stick to the rules then switching from one to the next is as simple as changing one value in a properties file.
I have used BluePrint with much success on a site (I could mention the site here but I am sure the post would be marked as spam!). I am not sure if I will use it in the future though because one of the ideas of CSS i thought was to not have layout logic hard coded. You shouldn't have css elements called span-24 and span-12 to define the layout but something like searchBox and mainContent. At least thats how I see it.
Good link I found : Top 12 CSS Frameworks and How to Understand Them
Here is my blog post about CSS Frameworks When to use CSS framework?
The only way I know of to use a CSS framework and retain semantic markup is to use a higher-level abstraction. At the moment, Compass is the only one I'm aware of that's mature enough to use, but Nicole Sullivan seems to be doing some interesting stuff with her "Object-Oriented CSS" project.
I find Compass' clever use of Sass mixins to be brilliant, and a big step toward the Holy Grail of maintainable semantic markup. I don't think I'd want to use a framework like Blueprint or YUI without an abstraction such as Compass to keep presentation classes out of the markup.
BTW, there's a nice-looking CSS framework called Elastic that looks good enough that I'm considering adding it to Compass.
I believe CSS is about simplicity. The goal is to have one or two places to check when you're referencing between the HTML and your stylesheet. Adding more lines, and especially lines that you did not write and are probably not that familiar with, will exponentially increase the complexity thereby volatility of the CSS code.
I would suggest your layouts as you write them and develop a generic template system from that. While I love making CSS more modular, often and depending on the design, your CSS may be very case-specific and not modular at all.
I've used Blueprint on a few one-off sites and it definitely saved time, primarily in cross-browser testing.
It definitely sucks adding presentation code to your markup, although on the bright side it's readable. While I love the concept of "you can redesign without touching the markup", if you're producing a site where that really isn't going to happen anyways and you just need it done yesterday, Blueprint is something to look at.
There are also tradeoffs in what types of layouts it can feasibly create though. If you wireframe the site from the start on a strict grid, it will be much easier to transpose into the framework with a minimum of fuss.
I have used BluePrint and YUI but I always get frustrated with some of the names they give their id and classes.
To each their own, but I prefer doing things from scratch, but after a while you develop a process in which you will use your previous work and apply it to new projects and just make some tweaks to make the web site look the way you would like it to.
Be sure to use a good naming convention, just in case someone else down the road comes in to edit the css, then they will have a good idea what each style name is referring to.
Craig,
Compass is what you're looking for: it allows you to rename your Blueprint CSS classes like "span-24" with your own names. It also expands CSS functionality with variables and mixins. Truly, those that prematurely judge frameworks without having checked out Compass are "missing the point." It's sort of like those folks who told us years ago that we are missing the point by using CSS instead of HTML tables for our layouts.
-Matt
check out http://www.ez-css.org/. one of easiest and lightest css framework to work on. :)
Take a look to this demo:
http://www.richstyle.org/demo-web.php
This framework is based on idea that "HTML tags should be enough".
I think re-usability is the most important factor for choosing a software component, including a web framework.
For web frameworks developers, the more you commit to standards, the more you guarantee re-usability.
It seems like every time I try to create a pure CSS layout it takes me much longer than if I'd use a table or two. Getting three columns to be equal lengths with different amounts of data seems to require particular fancy hacks, especially when dealing with cross-browser issues.
My Question:
Who are these few tables going to hurt?
Tables seem to work particularly well on tabular data — why are they so reviled in this day and age?
Google.com has a table in its source code, so do many other sites (stackoverflow.com does not by the way).
Since this is stackoverflow, I'll give you my programmer's answer
semantics 101
First take a look at this code and think about what's wrong here...
class car {
int wheels = 4;
string engine;
}
car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;
The problem, of course, is that a bike is not a car. The car class is an inappropriate class for the bike instance. The code is error-free, but is semantically incorrect. It reflects poorly on the programmer.
semantics 102
Now apply this to document markup. If your document needs to present tabular data, then the appropriate tag would be <table>. If you place navigation into a table however, then you're misusing the intended purpose of the <table> element. In the second case, you're not presenting tabular data -- you're (mis)using the <table> element to achieve a presentational goal.
conclusion
Whom does this hurt? No one. Who benefits if you use semantic markup? You -- and your professional reputation. Now go and do the right thing.
Like a lot of things, it's a good idea that often gets carried too far. I like a div+css driven layout because it's usually quite easy to change the appearance, even drastically, just through the stylesheet. It's also nice to be friendly to lower-level browsers, screen readers, etc. But like most decisions in programming, the purpose of the site and the cost of development should be considered in making a decision. Neither side is the right way to go 100% of the time.
BTW, I think everyone agrees that tables should be used for tabular data.
In the real world, your chances of taking one design and totally reskinning it without touching the markup are pretty remote. It's fine for blogs and concocted demos like the csszengarden, but it's a bogus benefit on any site with a moderately complex design, really. Using a CMS is far more important.
DIVs plus CSS != semantic, either. Good HTML is well worthwhile for SEO and accessibility always, whether tables or CSS are used for layout. You get really efficient, fast web designs by combining really simple tables with some good CSS.
Table layouts can be more accessible than CSS layouts, and the reverse is also true - it depends TOTALLY on the source order of the content, and just because you avoided tables does not mean users with screen readers will automatically have a good time on your site. Layout tables are irrelevant to screen reader access provided the content makes sense when linearised, exactly the same as if you do CSS layout. Data tables are different; they are really hard to mark up properly and even then the users of screen reader software generally don't know the commands they need to use to understand the data.
Rather than agonising over using a few layout tables, you should worry that heading tags and alt text are used properly, and that form labels are properly assigned. Then you'll have a pretty good stab at real world accessibility.
This from several years experience running user testing for web accessibility, specialising in accessible site design, and from consulting for Cahoot, an online bank, on this topic for a year.
So my answer to the poster is no, there is no business reason to prefer CSS over tables. It's more elegant, more satisfying and more correct, but you as the person building it and the person that has to maintain it after you are the only two people in the world who give a rat's ass whether it's CSS or tables.
Using semantic HTML design is one of those things where you don't know what you're missing unless you make a practice of it. I've worked on several sites where the site was restyled after the fact with little or no impact to the server-side code.
Restyling sites is a very common request, something that I've noticed more now that I'm able to say "yes" to instead of try to talk my way out of.
And, once you've learned to work with the page layout system, it's usually no harder than table based layout.
I'm of the thought that CSS layout with as few tables as possible is cleaner and better, but I agree that sometimes you just gotta use a table.
Business-wise, it's generally "what's going to get it done the fastest and most reliable way." In my experience, using a few tables generally falls into that category.
I have found that a very effective way to mitigate cross-browser differences in CSS rendering is to use the "strict" doctype at the top of your page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Also, for the dreaded IE6 CSS issues, you can use this hack:
.someClass {
background-color:black; /*this is for most browsers*/
_background-color:white; /*this is for IE6 only - all others will ignore it*/
}
The main reason why we changed our web pages to DIV/CSS based layout was the delay in rendering table based pages.
We have a public web site, with most of its users base is in countries like India, where the internet bandwidth is still an issue (its getting improved day by day, but still not on par). In such circumstances, when we used table based layout, users had to stare at a blank page for considerably long time. Then the entire page will get displayed as a whole in a tick. By converting our pages to DIV, we managed to bring some contents to the browser almost instantly as users entered to our web site, and those contents where enough to get the users engaged till browser downloads entire contents of the page.
The major flaw with table based implementation is that, the browser we will show the content of the table only after it downloads the entire html for that table. The issue will blow out when we have a main table which wraps the entire content of the page, and when we have lots of nested tables. For the 'flexible tables' (those without any fixed width), after downloading entire table tag, browser has to parse till the last row of the table to find out the width of each columns, then has to parse it again for displaying the content. Till all these happens users has to stare at a blank screen, then everything will come to screen in a tick.
If you have a public facing website, the real business case is SEO.
Accessibility is important and maintaining semantic (X)HTML is much easier than maintaining table layouts, but that #1 spot on Google will bring home the bacon.
For example: Monthly web report: 127 million page views for July
Monthly web report: 127 million page views for July
...
Latimes.com keeps getting better at SEO (search engine optimization), which means our stories are ranking higher in Google and other search engines. We are also performing better on sites like Digg.com. All that adds up to more exposure and more readership than ever before.
If you look at their site, they've got a pretty decent CSS layout going.
Generally, you find relatively few table layouts performing well in the SERPs these days.
Keep your layout and your content separate allows you to redesign or make tweaks and changes to your site easily. It may take a bit longer up front, but the longest phase of software development is maintenance. A css friendly site with clear separation between content and design is best over the course of maintenance.
One other thing I just remembered, you can assign a different stylesheet to a page for printing vs. display.
In addition to your normal stylesheet definition, you can add the following tag
<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />
Which will render the document according to that style when you send it to the printer. This allows you to strip out the background images, additional header/footer information and just print the raw information without creating a separate module.
doing a complete revamp of a 15 page web site just by updating 1 file is heaven.
This is true. Unfortunately, having one CSS file used by 15,000 complex and widely differing pages is your worst nightmare come true. Change something - did it break a thousand pages? Who knows?
CSS is a double-edged sword on big sites like ours.
In my experience, the only time this really adds business value is when there is a need for 100% support for accessibility. When you have users who are visually impaired and/or use screenreaders to view your site, you need to make sure that your site is compliant to accessibility standards.
Users that use screenreaders will tend to have their own high-contrast, large-font stylesheet (if your site doesn't supply one itself) which makes it easy for screenreaders to parse the page.
When a screenreader reads a page and sees a table, it'll tell the user it's a table. Hence, if you use a table for layout, it gets very confusing because the user doesn't know that the content of the table is actually the article instead of some other tabular data. A menu should be a list or a collection of divs, not a table with menu items, again that's confusing. You should make sure that you use blockquotes, alt-tags title attributes, etc to make it more readable.
If you make your design CSS-driven, then your entire look and feel can be stripped away and replaced with a raw view which is very readable to those users. If you have inline styles, table-based layouts, etc, then you're making it harder for those users to parse your content.
While I do feel that maintenance is made easier for some things when your site is purely laid out with CSS, I don't think it's the case for all kinds of maintenance -- especially when you're dealing with cross-browser CSS, which can obviously be a nightmare.
In short, your page should describe its make-up in a standards compliant way if you want it to be accessible to said users. If you have no need/requirement and likely won't need it in the future, then don't bother wasting too much time attempting to be a CSS purist :) Use the mixture of style and layout techniques that suits you and makes your job easier.
Cheers!
[EDIT - added strikethrough to wrong or misleading parts of this answer - see comments]
The idea is that Designers can Design and Web Developers can implement. This is especially the case in dynamic web applications where you do not want your Designers to mess around in your Source Code.
Now, while there are templating engines, Designers apparantly just love to go crazy and CSS allows to pull a lot more stunts than tables.
That being said: As a developer, i abandoned CSS Layout mostly because my Design sucks anyway, so at least it can suck properly :-) But if I would ever hire a Designer, I would let him use whatever his WYSIWYG Editor spits out.
Business reason for CSS layout: You can blow away the customers by saying "our portal is totally customizable/skinnable without writing code!"
Then again, I don't see any evil in designing block elements with tables. By block elements I mean where it doesn't make any sense to break apart the said element in different designs.
So, tabular data would best be presented with tables, of course. Designing major building blocks (such as a menu bar, news ticker, etc.) within their own tables should be OK as well. Just don't rely on tables for the overall page layout and you'll be fine, methinks.
*I would let him use whatever his WYSIWYG Editor spits out
I just threw-up a little...
*ahh hello? You don't think the graphic designer is writing the CSS by hand do you?
Funnily enough I have worked with a few designers and the best among them do hand-tweak their css. The guy I am thinking of actually does all of his design work as an XHTML file with a couple of CSS files and creates graphical elements on the fly as he needs them. He uses Dreamweaver but only really as a navigation tool. (I learned a lot from that guy)
Once you've made an investment to learn purely CSS-based design and have had a little experience (found out where IE sucks [to be fair it's getting better]) it ends up being faster I've found. I worked on Content Management Systems and the application rarely had to change for the designers to come up with a radically different look.
Besides being easily updatable and compliant...
I use to design all table based web sites and I was resistant at first, but little by little I moved to CSS. It did not happen overnight, but it happened and it is something you should do as well.
There have been some nights I wanted to toss my computer out the window because the style I was applying to a div was not doing what I want, but you learn from those obstacles.
As for a business, once you get to designing web sites by CSS down to a science, you can develop processes for each site and even use past web sites and just add a different header graphic, color, etc.
Also, be sure to embed/include all reusable parts of your website: header, sub-header, footer.
Once you get over the hump, it will be all down hill from there. Good luck!
:: nods at palmsey and Jon Galloway ::
I agree with the maintainability factor. It does take me a bit longer to get my initial layouts done (since I'm still a jedi apprentice in the CSS arts) but doing a complete revamp of a 15 page web site just by updating 1 file is heaven.
Some additional reasons why this is good practice:
Accessibility - the web should ideally be
accessible by all
Performance - save
bandwidth and load faster on mobile
devices (these lack bandwidth to some
degree and cannot layout complex
tables quickly). Besides loading fast is always a good thing...
When a screenreader reads a page and sees a table, it'll tell the user it's a table. Hence, if you use a table for layout, it gets very confusing because the user doesn't know that the content of the table is actually the article instead of some other tabular data
This is actually not true; screen readers like JAWS, Window Eyes and HAL ignore layout tables. They work really well at dealing with the real web.
I don't think there is a business reason at all. Technical reason, maybe, even so, barely - it is a huge timesuck the world over, and then you look at it in IE and break down and weep.
i actually can see Tables in Stack Overflow on the user page.
It even has heaps of inline styles...
There definitely is. If you are still striving for it, you are not getting it right.
DIV+CSS layout is actually much easier than table layout in terms of maintainability and productivity. Just keep practicing it before it's too early to say that.
Table layout is good too it's just not meant for layouts and have exceptional drawbacks when it comes to minor tuning.