Why Go Table-less Strict XHTML CSS Design?

Why Go Table-less Strict XHTML CSS Design?

VitalBodies builds or remodels web sites or pages for different folks now and then and one of things we try to point out is the value of having a Strict, Valid, Table-less, CSS design. A design where the structure and style are separate. This post was adapted from an email about some of the reason why.

TEST YOUR SITE:

The first test for your current site is to go to the site and crank up your font sizes in your browser.
How did the site do? Did it break your layout? Now adjust them down as see how the site does.
It is highly likely many of your your sites viewers will have their fonts sizes cranked a notch or two either in the bowser or the Operating System.
Does the site validate? Click on the links below and open them in a new tabs. Then paste the address of the site you want to check, and see how the site fairs.

MARKUP: http://validator.w3.org/#validate_by_uri

CSS:http://jigsaw.w3.org/css-validator/#validate_by_uri

If the site is not valid then the browser will go into what is called Quirks Mode and render the site how ever the browser sees fit.
This will be different in each browser and each version of each browser and each OS.
Better dig out about 50 computers to fully test how your site will look on all those browsers, versions and OSes.
What fonts are used by your site? Are they fonts that ONLY come with Windows?
Well, then how will a Mac or a Linux display your sites fonts?

How many lines of code will you have to go through to edit all those font tags? Hopefully someone told you not to use font tags in your HTML. Fonts should be specified in the style sheet.

And what if you want to change the layout of your site from a nav bar on top to one on the side or from the side to one on top?

Essentially table-less frees you from tables where tables are not needed, like layout. Plus you are free from sorting through a whole lot of junk like all the column, row and other table tags in your code and a obstinate structure to have to fight with layout wise.
…A FIXED/SET hard to change layout that in many cases requires a complete rebuild of the page to make changes to the layout.

With no tables you could put the footer where the header is and move the nav to the side or make the site wide or narrow, you name it. All with out changing the XHTML and only editing the style sheet.
With a table, well, you have that and only that layout – You CAN NOT change that tables total layout with the stylesheet.
And you would not have to change every page one by one rather than changing them all with just one style sheet.

VitalBodies spent a number of years learning how to be free from all that. A big part of that change was to just say no to proprietary web code and closed source code web programs. The final piece was just put into place, the OS Ubuntu that glues all the other pieces together.
Interesting fact is, this journey towards freedom all started the with web mastering…

CSSZenGarden was the inspiration: http://www.csszengarden.com
“A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.”

NOTE: The XHTML code does not change on the CSSZenGarden site, only the stylesheet – that is the power of table-less, Strict, Valid and CSS.

-

If you take the time to learn to be a webmaster, learn to make table-less Strict Valid CSS web sites.

Having a strict standards based site is one that ANY software tool that is standards based can work on and any webmaster that learned standards based web building can work on. Ah, freedom…

-

And guess what tools are likely to be standards based?
The free as in freedom, Open Source tools!
And guess what webmasters are the ones that are likely to do standards based code?
The ones that support freedom…