Recently I received an email from someone who was having a severe problem learning CSS. I can definitely understand much of the frustration, but I don’t think it really has a lot to do with CSS. Learning anything can be difficult, confusing and frustrating. Whether you’re trying to learn how to ride a bike, swim, drive a car, code HTML or use CSS, most people will get frustrated, feel like giving up, and then give it another try.

One of the problems I see is that many people who complain about CSS being too difficult haven’t really learned how to code HTML properly. Jumping into CSS-based layouts without a solid understanding of HTML will not be easy. Going from table-based WYSIsortofWYG tag soup to structured, semantic HTML+CSS will take some time and effort. But it’s worth it. I know. Having worked with web design and development since -95 or -96 I’ve had to unlearn the table tag soup ways of coding and really learn HTML.

Another problem is that there are CSS evangelists who swear up and down that not only can CSS do everything that tables can, it does it cleaner, easier and better (quote from the post to css-discuss). Yes, there are. And no, as long as browsers like Internet Explorer don’t improve their CSS support there are a few layout tricks that are very hard to achieve with a pure CSS layout but are easy to do with tables. Don’t blame that on CSS though. Blame it on lazy browser vendors.

So, what is it that you can’t easily do with CSS that is easy with tables? Some things I can think of:

  • footer that sits at the bottom of the browser window only when there’s not enough content
  • side-by-side boxes that expand to the same height even when they contain different amounts of content
  • vertically centered content of unknown height inside a box

Anything else? I can’t think of anything else, but there’s probably one or two other cases where pure CSS layout won’t work well, especially in Internet Explorer.

Note that there are cases where tables should be used. A common misunderstanding is that tables can’t be used for anything, but if you’re marking up a table of data, a table is what you should use.

If you feel that you absolutely must have something in your design that calls for a table, then go ahead and use a table for that specific effect! Just avoid nesting tables, make sure your markup is semantic and valid, and then style the page with CSS. You’ll still be way better off than if you do the old-school thing with five levels of nested tables, font tags, presentational, invalid HTML and no semantic markup whatsoever.

Any suggestions, ideas? Feel free to comment on this article!

Back to Top