Web Development

Tables and CSS

Sunday, 18 September 2005

Recently I have been asked what the big idea behind using CSS vs. tables is. There are a couple of things that firstly come to mind that I have learned along my CSS path. Each one has it's purpose and we can explore those purposes here as well. Please feel free to leave any comments or questions in the comments section about this or any subjects.

One of the main reasons I like to use CSS for layout purposes rather than tables is that it allows me to truly seperate content from design. I am not limited to my table constraints setup by the 'table' tag. Seperating content from your design is a good practice because it allows you the freedom to change design without having to worry about your content not fitting or being formatted the wrong way. Some really strict CSS design people would never use the table tag because in their mind it should be deprecated. I don't follow along with this rule entirely. I believe tables are great for displaying tabular data and information. After all, insn't that what they were designed for in the first place?

Tables for so long now have provided web designers a way to constrain boundaries for their pages and keep designs nice and neat. Even Fireworks and Adobe InDesign splice using tables. So, it's okay for a most sites and designs.

{tab=Accessibility}

Fangs Screen Reader

This FireFox plugin will emulate how a screen reader will read your page. A Must Have!

Download Here

There might come a time when accessibility crosses your path where someone with a screen reader such as JAWS or FireVox visits your site and does not get the information they need or may expect. As a matter of fact, your site may make no sense at all. Since screen readers read a page from left to right and top to bottom they look at the code and markup of the web page. If your markup has no alt tags for the images, they wont know what the image is about. If you dont use h1 or "heading" tags for headings...they will know what it says but not that it's a heading. Also it reads the order the page is written in.

If a table is used it goes through the whole table in left to right format which might not make that much sense. With CSS you can put things in the order you'd like them to be read out by screen readers and other devices. The truth about it is that more large companies are switching to CSS layouts because they recognize not only the accessibility issues involved but it can reap big rewards on a companies bottom line for bandwidth as well. Usually CSS pages are much slimmer than their table counter parts leaving extra room on servers for more files and less used bandwidth and server pings for spacer images and so forth.

Also, if you use a table for a layout every page has that table in it and the server gets pinged over and over until the page is rendered. On the other hand, with CSS, the stylesheet is downloaded only once and used over and over again. On this site I use another stylsheet with a media type of 'print' that allows the user to have a printer friendly version of the story they are reading. Like this one for instance. This 'print' stylsheet was a complete after thought for me after building this site and was not in the original plans. If I had used tables for this site I would have had to make a link to another page for printer friendly version of the story creating a lot more work for myself. Having used pure CSS, I can merely make the new stylesheet and "hide" everything I dont want shown and have a different header at the top. Click on 'File | Print Preview' to see what i'm talking about.