A Step toward Tableless Design

By Akbar • March 1st, 2008
I have been working on the website development for few years now and nearly 98% of the time I was using the Tables for the web page layout. I had known that this task can be better done using the CSS, but, to be honest, I didn’t had courage to drop the old fashioned technique of the table layout I had learned over the last couple of the years. I learned to layout the page using tables from the very first HTML lesson and from then have religiously followed it until today.
The story behind this swtich is that while working on the web page today, I had to align two labels like this on the page:

Left Aligned Text Right Aligned Text

I was going to jump and create another nested table in the page layout when someone inside me (good programmer) scrammed a loud and shouted “STOP IT! There must be some better way of creating the layout then all those clumsy nested tables which not only take more space but also make the page complex to read”. I finally got courage and decided to read more on the CSS layout and drop my old learned technique of HTML layout (at least for as small layout as above). As I continued reading more and more, I was amazed by how simple it’s to layout this using only CSS. For example, if I head created the above layout using the table layout, it would have been something like this:

<table border=”0″>
    <tr>
        <td>Left Aligned Text</td>
        <td>Right Aligned Text</td>
    </tr>
</table>

And this is how I ended up doing it using CSS:

<div class=”leftAlign”>Left Aligned Text</div><div class=”rightAlign”>Right Aligned Text</div>

Though I have to add the following entries in my CSS file but as these will be cached in the browser, it will not require reloading of the presentation data again and again. I see two main advantages of using CSS technique over the HTML layout. First is that my code is more compact and will load fast, second is that the new code is easy to read and maintain

div.leftAlign {
    float: left;
} div.rightAlign {
    float: right;
}

For some of you interested in reading more, please check the following related links:
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html
http://www.stopdesign.com/articles/throwing_tables/
http://www.alistapart.com/articles/practicalcss/
http://w3tableless.com/

My favorite quote of the day is “Look Ma, No Tables!”

Tags: , , , ,

This entry was posted on Saturday, March 1st, 2008 at 7:24 pm and is filed under HTML. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.