Junal on the run

“Table” gone,”Div” comes!

Posted on: October 23, 2007

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.

Reference: http://tutorials.alsacreations.com/tableaux/

2 Responses to "“Table” gone,”Div” comes!"

tables are dead 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

View Junal Rahman's profile on LinkedIn
Subscribe to me on FriendFeed

Follow Me on Twitter


My photos

Blog Stats

  • 424,735 hits
%d bloggers like this: