A fond farewell to tables

For many years my design process was simple:

1. Make something pretty (and usually pink) in Adobe Photoshop
2. Slice it up and save the relevant images
3. Re-create the design in HTML using tables (I’d usually do this with Dreamweaver)

This process worked well for me, it allowed me quickly and effectively reproduce my design in a language fit for the web without having to worry too much about what was going on behind the scenes. Upon joining the LCN.COM design team just over a year ago all this changed when I was introduced to the magical (though initially somewhat daunting) world of ‘Semantic HTML’ & CSS.

What is Semantic HTML & CSS

Firstly I think it’s important to state that Semantic HTML and CSS are two completely different things, one does not assume the other.

Simply put, Semantic HTML is using HTML tags for their implied meaning as opposed to using ‘meaningless’ <td>, < div> and <span> tags for pretty much everything.

CSS stands for Cascading Style Sheet(s). The main use of CSS is to position and style HTML elements. When combined with the use of Semantic HTML, CSS becomes an incredibly powerful design tool and in my opinion is far superior to the table based method I had been using.

Here’s an example:

I want the header section of my website to display a large title, I want this title to be aligned to the middle of the page and… you guessed it… pink (see below).

Matt’s Pink Title

Using my old table based design process my HTML would look similar to the following:

<table>
<tr>
<td>
<div align=”center”>
<font size=”6” color=”#c06”>Matt's Pink Title</font>
</div>
</td>
</tr>
</table>

Although this method works it also produces a lot of unneeded HTML and would become somewhat confusing should I ever wish to go back and update it.

To produce the same title using Semantic HTML and CSS I would use something like:

The HTML:
<h1>Matt's Pink Title</h1>

The CSS:
h1 {
color : #c06;
font-size : 1.6em;
text-align : center; }

Using this method I am able to keep my HTML code to a bare minimum ensuring that my HTML file size is low and that my code remains easily maintainable.

Why do I think it’s better to do things this way?

I have seen many benefits whilst using Semantic HTML and CSS, these include:

• My pages load faster as filesize is kept to a minimum
• With CSS elements can be styled and position any way I want them, it’s completely felxible
• Increased accessibility and usability of my sites
• My sites are future proof and works well on modern browsers
• My sites can be displayed on text-only browsers
• My sites look cleaner and tidier than when they were table based
• Easily maintainable / updatable
• My knowledge of how websites are constructed / rendered has increased

Are there any drawbacks?

Like me, if you choose to adopt this way of working you will eventually find something that you dislike. For me it was when I first checked my funky new Semantic HTML & CSS website in Internet Explorer 6 (IE6). I was presented with a weird distortion of my website, reminded me a bit of a Picasso painting (you know… the one where he jumbled up that ladies face and she had an eye for an ear!). I spent hours fiddling, tinkering and hacking my layout to get it to display correctly. I am to understand that these problems were a result of bugs in the Internet Explorer 6 program NOT my coding, though unfortunately as a fair percentage of internet users still use IE6 a continually find myself adding little hacks and fixes to my CSS. With any luck as the web moves forward and as people start acknowledging the ‘Windows Automatic Upgrade’ reminders that popup on their screens from time to time asking them to remove all traces that IE6 ever existed this will no longer be an issue.

When should tables be used?

It’s fine to use tables where appropriate (when displaying tabular data), e.g a football league table.

To sum things up..

Table based layouts served me well for many years and helped me develop my skills and understanding as a web designer however as the web moves forward I no longer feel that they are best solution for an accessible, efficient and flexible website creation. Although I still have a great deal to learn I feel that my use of CSS and Semantic HTML has bettered me as a designer and has helped future proof my websites.