“Table” gone,”Div” comes!
Posted October 23, 2007on:
Maybe you were taught by your university teacher how to create a layout using TABLE. But now you have to change this idea. This idea is old for now. Now ‘Div’ concept being used instead of table concept. There are few reasons why you should use DIV instead of TABLE. First have a look at these bellow points.
- The multiple imbrication of tables is very often necessary, even for simple designs.
- The number of tags (table, tr, td, colspan, rowspan, not to forget the horrible spacer.gif) quickly gets out of hand and makes the code heavier and which makes it harder to read and also harder to update when needed.
- This heavy code often makes the page heavier as well, making it longer to load.
Tables are initially made for data structure (forum, statistics for example) and not for layout.
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:
Ø First method: reproduce the layout by using WYSIWYG -what you see is what you get- tools such as Macromedia Fireworks for the design and Macromedia Dreamweaver for the HTML code. View result.
Ø Second method:redo the layout by hand, with tables.View result.
Ø Third method: redo the layout by hand using semantic tags (like div) and CSS style sheets.View result.
The page weighs more or less depending on the method used:
- with tables wysiwyg: 4.73ko
- with tables by hand: 3.86ko
- with semantic tags and CSS: 1.73ko
So which one you would prefer ? you better start with DIV and forget about TABLE. I guess you heard the name of Liquid Layout. This is the latest trend that mainly followed to create Layout.
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.