Why you should use CSS rather than Tables, in web design. Part 2

In part one of our guide, we stated some good, solid reasons, why you should use CSS over Tables, largely focusing on download speeds, cost, and ease of modifications.  Just in case you are not convinced, here are some more reasons that should tip the balance.

Accessibility is high on the agenda of nearly everywhere these days, and the web in no exception.  Websites should accommodate without exception, people with disabilities.  CSS comes into its own here, as it can serve alternative style sheets to different devices and mediums.  This is particularly handy if user of a website, is using a screen reader, or personal assistant. 

Another gem for CSS, is that it is easier to accommodate backward compatibility.  Over 30%, (according to W3Schools.com), of web use is browsed with Internet Explorer 6.  The W3, or World Wide Web Consortium, recommends that relative use units(em) is used for font sizes as opposed to absolute units, such as centimetres, pixels, inches, millimetres, and so on.  One of the main reasons for this, is that Internet Explorer 6 can not accommodate font sizes in pixels.

Browsers do have default settings for font size, unless it is told otherwise by CSS.  In which case, to ensure cross browser compatibility, you should specify a default setting for font size, within the body tag  For example.  body { font-size: .7em; }

It is important to remember that XHTML element settings, should have a declaration to ensure consistency where line height, and widths are concerned.  Headings, paragraphs, lists, and just a few structural elements that use these attributes.  By using the code, p { line-height: 1.5em; } will set the element settings as a default.

The placing of interactive elements is also a factor in accessibility.  By spacing interactive buttons, links, and form fields quite far apart, you are helping users where manual dexterity is difficult. 

These accessibility necessities are non negotiable, as you can be sued if you do not cater for everyone on the web.  CSS can do this relatively easily, where as Tables cannot.

Another reason to use CSS over Table designs, in web designing, is that it is far easier for a web design team to work on a project in CSS.  This is due to the external files CSS uses, that we have talked about before.  There is no to sift through markup to create or modify code, and thus, you can breakdown a project by sections.
The following example illustrates this well.

#mainContentLeftColumn { property: value; }
#mainContentMiddleColumn { property: value; }
#mainContentMiddleColumnLeftColumn { property: value; }

All the team does is access the external file, make or create code, and upload.  It is as simple as that.  This saves an awful lot of time on briefing, and explaining the various elements and requirements of the markup used in Table designs.  This also saves money both directly and indirectly.  As there is no section labeling available in Table designs, teams have their work cut out.

CSS also has far less boundaries to design than its Table counterpart.  This is largely due to CSS’s ability to layer the style sheets, like Photoshop can layer images.  This gives any designer a far greater freedom to create, and providing they are good enough, make websites that are awe inspiring, and beautiful.  Tables simply cannot offer this to the more creative developer.

A real practical advantage they have over Table based websites, is that they can simply select the best way to print a document from the web, without having to hunt for the button that says, “Printer friendly version.”  This also means that the page can be printed offline. 

There are quite a few other reasons to use CSS over Table based layouts, for web design, but the ones shown in our two guides, were quite significant ones.  No doubt, more reasons will appear soon.