CSS, or cascading style sheets should be used, as their name implies, just for style. And by that, i mean fonts, colors, text size, borders, etc. Unfortunately, the "expert" web design community is pushing hard to use CSS for layouts and having a great time denouncing tables. Now, i agree tables aren't the best solution. Tables are very simple to understand and use and are generally well supported in most browsers. However, they are not terribly flexible and can be very hard to maintain. You need to use hacks here and there, throw in spacer images, invisible gif's, and so on. So, i certainly understand the motive for developing an alternative to table-based layouts.
But CSS is NOT it.
The idea behind CSS was to:
- Separate presentation from content. This allows you to layout & decorate the same content in many different ways, which is very handy.
- Remove the hacks needed to make tables layouts work.
- Save you time.
- Give you far more powerful presentation and layout options.
First of all, it's completely unintuitive. Many constructs that we were used to - and those that make logical sense - are gone. For example, let's talk about center align. With a table, you could set the table, and each cell (td) in it, to align="center". Couldn't be easier.
How does CSS do it? Well, you can try text-align: center. This works every now and then, but typically only on text or inline elements. Fine, it is called text-align for a reason I guess. But why isn't there a everything-else-align? Instead, you end up trying margin: 0 auto. What do margins have to do with it? And when this fails, which it often does, you try relative position, putting the left edge at 50%, of the container width minus the width of the item... Which doesn't apply to all layouts, so then you resort to absolute position. But of course, that's not flexible and also tends to work poorly at times...
And that's just center align horizontally. Center align vertically is significantly worse. With tables, each cell/row supported the valign property. Again, simple and effective.
To get this to work in CSS, you have to go through page after page of techniques until you find one that works for you. One idea calls for padding and negative margin. Another requires you to set line-height to the height of the container. Another tells you to set the container to be a table-cell (irony, anyone?). Almost none of them, as ridiculous as it sounds, use the CSS vertical-align property.
Isn't center align a VERY basic task? Doesn't virtually every website on the planet require center alignment (look at my blog, google, cnn)? Why is it so painfully difficult and unintuitive with CSS?
The relationship between containers in CSS is also pretty unintuitive. With tables, it was very obvious how cells interacted: it's just hard to mess up rows and columns. Say you wanted a webpage with a classic 3 column layout. With tables it's easy: tr td td td. Done.
How does CSS compare? Take a look at one of the highly recommended approaches. We're talking several pages of styling, involving absolute positioning, gigantic margins (margin-left: 201px;) , and a few hacks. Don't people realize how ridiculous this is?
Heaven help you if you wanted 3 columns with a header in footer. In the world of tables this was: tr td (colspan=3) tr td td td tr td (colspan=3). Done. Now check out the CSS from this site that shows you how to achieve it. We're talking several pages of complex CSS. And the ultimate irony: many of the containers are set to display: table-cell! Better solutions exist, but in terms of simplicity and intuitiveness, CSS cannot come close to tables.
Now, the numerous flaws and drawbacks in CSS could be forgiven, if not for one thing: ridiculously inconsistent browser support. It's probably not the fault of the CSS creators, but it'll make your eyes bleed trying to get your page to look the same in different browsers, not to mention in different versions of the same browser, different resolutions, on different OS's, in different languages, etc... It's impossible.
Want to use max-height? Sorry, Microsoft decided not to implement it, at all. Padding and margin should be simple, right? Nope, each browser does it's own thing. And don't every try setting the width to a percentage to have a flexible layout... That's ridiculous and you should be ashamed to have thought of it. You need a giant chart just to figure out what's available on each browser.
The main culprit tends to be Internet Explorer, which is not only riddled with CSS bugs, but does not implement the same CSS features as other browsers. You end up using the Holly hack for the IE6 peek-a-boo bug, selector hacks for everything else IE6 related and reading entire guides and websites on dealing with IE/CSS issues. You use JavaScript to fill in the gaps, you yell, scream, kick, break down to a cry, and finally fall back to tables. It's obscene and ridiculous. As a web designer, I end up spending 10% of my time on design, 10% on coding and %80 fighting with compatibility issues.
CSS is just not cutting it. But, as I said before, tables are not the ideal solution either. I think what we really need is a separate language designed specifically for layouts. Let the basic HTML code handle your content. Let CSS handle the styling of the content. And let this new layout language handle how all the pieces fit together.
