CSS and (X)HTML lessons and tutorials
Most of the websites nowadays are constructed with tables. Tables allow for a multi-part structure of the page, and each part can contain a menu, a header, content, ...
However, this almost universal method has many disavantages:
Also, for accessibility (for handicaped for example), it is recommended to use each tag in the correct semantics.
Tables are initially made for data structure (forum, statistics for example) and not for layout.
More problems brought about by using tables to pageset your website at the following addresses: OpenWeb (fr) and Cybercodeur (fr).
We will use an example of a website to compare both layout creation methods so that we will find out the advantages and disavantages of both.
The website that we will take a look at is www.ink2art.com (don't bother to visit the site, the layout has changed in April 2004).
The old layout of the site (the one that we will reproduce and compare here) is quite simple and was made out of big letters that were images that changed when you passed your mouse over.
To make our comparison "tables" and "div", we will exactly reproduce this layout as a reference (same images, same behaviors of rollover) using three different methods:
Please note that each of these methods must give a result that is compatible (same visuals, same behavior) with all standard recent browsers (IE5.5, Netscape6, Mozilla, Opera6 and Safari1).
The page weighs more or less depending on the method used:
Of course, some of these codes could have been more optimized (the div document could be compressed at less than 600 octets, but it became a lot less readable that way), however, it is easy to see which method gives less weight to the document: the second solution (tables by hand) saved about 18% of the weight compared to the use of WYSIWYG tools.
Of course, the CSS and div tags version of the page is by far the lightest, saving about 53% of the weight on the coding by tables and about 64% on the wysiwyg coding!
The principle of setting up layout with CSS style sheets allows another advantage that the other solutions don't offer: separation of the styles on an external style sheet (.css document that is separate from the rest of the work). This is a great way to save on weight.
The document will contain only the code (HTML), all of the design will be located on an external CSS style sheet.
This external style sheet will be loaded by the browser a first time, then placed in the hard drive cache and will not have to be loaded again.
Plus, only one external style sheet for the whole design makes it a lot easier to update the website: one click and you can change the design on all of the pages at once.
By separating the CSS styles on an external style sheet, the weight of the layout with div tags and CSS is... 498 octets, that is a 90% saving of the weight of the code compared to the contruction with WYSIWYG tools.
Of course, being 90% lighter on a code that is 4.73 ko is small potatoes, but imagine the same technique applied to pages that are far more complex, a website of several hundreds of heavy pages and a few hundreds of visits a day... you can easily reach several mega-octets that you can save on your bandwidth.every single day.
Other difference: Accessibility to handicapped users.
To test the accessibility for the layout we worked on, we will use a text browser that doesn't read images or scripts: Lynx. We will test our documents with this Lynk viewer.
No contest here: both documents that used tables are not read by Lynx at all. Images, even with alt (alternate text) attribute, cannot be used and cannot be clickable either.
Here is the result of trying to read the first two solutions with a text viewer:
As you can see, no significative element appears and ther is no possible navigation on the webiste.
Here is the third solution (with div tags) on a text browser:
Even though it is very simple, the links are there and accessible.
Another aspect to take into consideration when looking at acessibility is that your web document will not always be viewed on a browser and a computer screen. With today's new technologies, a document must be multimedia, and be visible as well on a screen as on a telephone wap, a palm pilot...
Now, imagine that you need to change part of the HTML code to move an image for example. In this scenario, each of the three solutions offer different possibilities.
Here is a short excerpt from the "wysiwyg" code solution:
<td colspan="4"><img name="titrec1" src="images/titre.gif" width="387" height="52"
border="0" alt=""></td>
<td bgcolor="#000000"><img src="images/spacer.gif" width="33" height="52"
border="0" alt=""></td>
<td rowspan="2"><img name="t" src="images/t.gif" width="149" height="228"
border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="52" border="0" alt=""><
/td>
</tr>
<tr>
<td colspan="3" bgcolor="#000000" valign="top"><font color="#FFFFFF" size="2"
face="Arial, Helvetica, sans-serif">© InkArt 2003</font></td>
<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore();"
onMouseOver="MM_swapImage('a','','images/aon.gif',1);"><img name="a"
src="images/a.gif" width="177" height="176" border="0" alt=""></a></td>
Not the easiest to read and to figure out what means what. In reality, you could not do it without using a software that would decipher the code for you.
Now, imagine that this document is visited by a blind user, using a braille reader that "reads" the tags: this particular user will not be able to have an idea of the whole document.
Here is now the complete HTML code of the third solution, using semantic tags and CSS:
<img id="i" src="images/i.gif" alt="lettre i" /> <a id="n" href="">bouton n </a> <a id="k" href="">bouton k </a> <a id="two" href="">bouton 2 </a> <img id="ti" src="images/titre.gif" alt="titre" /> <a id="imga" href="">bouton a </a> <a id="r" href="" >bouton r</a> <img id="t" src="images/t.gif" alt="lettre t" /> <div id="copyright">© Ink2Art 2003</div>
This code is made out of only two principal tags that don't overlap: the images <img> (for fixed letters such as in the title) and the link tags <a> (for the links in reactive images): clear and simple!
You only need to know both tags (img, a) to have an idea of the structure of the document, even if you don't have the CSS style sheets.
Better readablity will make it easier to update the document and also to modify it when needed.
Note: if you really don't know anything about CSS, this code can seem complex when you first look at it... a little basic knowledge off CSS will enlighten you right away.
For beginners, read the excellent article Dave Shea's "Roadmap to Standards".
Tables are not meant for setting up layout, and this little example, even if it has its limitations, is a good one.
Tables seem to be easier to deal with, but they make you scam to make it all fit by using rowspan, colspan, spacer.gif and more imbricated tables... it is much easier to construct a clean structure by using div tags, the only thing you need is a little motivation to get rid of your old habits (fr) and get on with the Web evolution.
Raphael GOETTER
www.alsacreations.com