Even if you've just done the weeklong crash course in HTML you will have learnt about Tables. Tables are an excellent way of displaying - wait for it - tables of content. But, someone soon realized that you could set the border surrounding the tables to zero and thus creating an invisible grid upon which to lay out images and text. This is by far the most commonly used technique when building websites today.

But here lies the problem; building websites this way is actually stopping us from building faster, more accessible and flexible websites.

In this article I will give an introduction to how to use a new way of building websites that will make your site more accessible, faster to load, easier and more cost-effective to redesign, get better results on search engines as well as give you a head start as many companies are now moving towards using Web standards.

Tables work, why not use them?

Anyone who's been working with Tables for a while know that we have to use quite large amounts of code to make our website look the way we want it. We also need to have representational elements (like width, colour, font size etc) repeated on every page. This makes the pages unnecessary heavy and slow to load. It also makes it much harder to preserve a consistent look across your site as well as making it very labour intensive to redesign.

Using tables will also cause problems if we want our site to be displayed in a PDA or mobile phone. And a bit less obvious problem is that by using Tables we're making our websites less accessible for people with disabilities.

So, if we decide to use Tables we will have to be prepared to:

• Spend more money on bandwidth
• Spend more money and time on development
• Spend more money and time on redesigns
• Lose potential revenue from PDA and mobile phone users
• Lose potential disabled customers

If this does not appeal to you then read on, there is another solution.

Solution: CSS (Cascading Style Sheets) and structural markup

Our aim is to keep the content of our pages separated from the way they are represented. We want to take away all representational markup from the pages where we have our content and put it in a single place called a CSS. The CSS dictates how the website looks and what goes where. We are separating the graphics from the content.

The reason for doing this is that we only have to define representational markup once and then re-use it on all our pages. If you wish to redesign your site you only have to do the changes to the CSS and not to the individual pages.

So instead of having the users downloading representational data with each page they visit they now only have to download it once making our sites much faster and saving us bandwidth.

Here is a quick example of a Table coded site:

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="625" height="151" valign="top">
<font face="Verdana,Arial,Garamond" size="10px" color="#000000">

This is the content. Wrapped inside a Table tag to make it end up where we want it on the page.
</font>
</td>
</tr>
</table>

And here is the same code using structural markup:

<div id="mycontent">
<p>
This is the content. Wrapped inside a Div tag to make it end up where we want it on the page.
<p>
<div>

The difference between the two is not only in size (i.e. slower to download) but also in compatibility with a screen reader. A screen reader reads the website out loud. Where properly structured markup tells the screen reader the order of things the tables layout causes the screen reader much more difficulties as it will read it as you would a table of content, cell by cell.

Using proper header tags and as little markup as possible on the pages will also get us better search results with search engines like Google.

So, by keeping the content separated from the representational markup we:

• Speed our website up
• Save bandwidth
• Save money and time on development and redesigns
• Can offer a consistent look across all our pages
• Make our site much more accessible to people with slow connections and disabilities
• Enable users to browse our site with PDA's and mobile phones

And it's not difficult, but:

Using CSS to do our layout is not difficult but it requires a new way of thinking when we code our websites. We need to think first and foremost about the different types of information that will go on our site. We need to define the different types of content logically by using the correct structural markup.

So the most important header gets an

<h> tag while the sub-headers gets

<h2> tags and paragraphs of text gets

<p> tags. This way the content will display nicely even without the CSS.

We use Div tags to wrap content. Each Div tag gets an ID that we use in the CSS to specify how it will look. We can even position it where we want on the site.

Resources

Zen Garden
Great example of how different style sheets can be used on the same website to achieve completely different designs. Thinking about a redesign?

Why Tables for layout is stupid
An easy and a much more extensive guide to the how's and why's of CSS and structural markup.

What next?

If you are wondering how to migrate your website into using CSS or just have questions regarding structural markup and CSS please drop me an email.