Thursday, June 14, 2007

Understand Web Standards - CSS & Tables

While not a web standard in the sense of a W3C standard, CSS is becoming, if not already, a layout standard. For good reasons too. The "old" method of tables, still in use of course, should be avoided if at all possible, and for lots of good reasons. Tables do a lot of things that, more than 5 years ago made life easier, but they didn't make them correct.

Tables take longer to load than CSS, in many ways. For one, the code in and of it self takes longer. Secondly if you are using a CSS style sheet for more than one page, the sheet doesn't need to be loaded again to go in between pages. There is no need to have miles of code in your pages too, it is much easier to read CSS than it is to sort through tables.

Another great benefit of having one style sheet for a bunch of pages is that changing your layout on every page can be done simultaneously. If I change the parameters of one div tag is goes through the entire site. If you used tables, you would have to change each and every page, what a pain.

Going back to our W3C post, it's easier to write valid CSS once you get the hang of it. Part of the reason tables are bad is that they don't play well for web accessibility. This means that for the blind, who use web page readers, elements on the page don't come out verbally, as they may appear visually to us. This is especially important to educational and government institutions, but that certainly doesn't mean that it shouldn't be important to you too. Especially if your business web page isn't web accessible, you don't shut your doors to blind people, do you? Of course not.

There is a downside to CSS though. It doesn't render the same in Internet Explore as it does in Firefox. Which can create quite a headache for web designers sometimes. There are "hacks" for these issues, most notably perhaps is the box model hack, but hacks are hacks for a reason. It's a cheap way of coding and it also isn't web accessible.

If you're looking to learn about CSS, or more information I suggest you check out these pages:

CSS Zengarden
W3C Schools CSS Tutorials

2 comments:

Anonymous said...

Interesting post. Did you post this on digg.com yourself?

I like your writing, but there were way too many commas in the first paragraph. I caught myself stopping and re-reading to make sure that I understood it all correctly. Although correct should be avoided in blog writing to make it easier for some of the weirdos out there.

Interesting article though . . . not much different than a lot of other articles out there though.

Eric said...

You're probably right about the comma's.

I did post this on Digg, but because I was messing around with the whole "digg" thing and some of the forum options. So I was testing it out.

Thanks for the comment!