Why DIV tag not TABLE

By: Himanshu Poddar

Hi and Merry Christmas to All,

I am back and writting after long and really sorry for this.

Today after Christmas when i am really relax and looking forward to new year just decided to write here something interesting that is happening in industry i.e change of mindset of each and every organization to shift the layout design from table to table less design i.e. from <Table> to <DIV>.

When we in my company decided that from onwards we will be using <DIV> instead of table in our layouts, everyone asked only one question WHY and it was me and the designer were give the task of finding the answer to this big WHY as we had given this idea…lol.This is really nothing new, but rather a different way of doing things. Some pages you see around the internet do not contain any tables at all. Each section is a DIV area being positioned by CSS.

Note/Warning for all programmers: please don’t try designing the form or any layout done in DIV by yourself without asking the designers till you have good knolwdge of DIV and CSS as we been doing till today with tables (sometimes), it is because this way you will really spoil the design and yes your dear friend The Designer may lose temper.

Here is some of the reason why one should use DIV instead of tables till possible.

Tables are slow

In almost every browser out there, unless table widths are specified explicitly, all the text in the table needs to be rendered before the browser can figure out how wide to make the various table cells. This means that pages load slowly. Note that using CSS for layout doesn’t necessarily help here, since there’s the same problem if the widths aren’t specified explicit. I’m guilty of this myself.Tables don’t have to be slow if you put each row in a separate table, but then you lose the alignment between rows. For a blog, that may not be much of a problem, but for data that actually wants to be in tabular form, it’s still a problem.Simply speaking just think how much time each <td> takes at the background when page is loaded (think if u have big form and have around 50 <td>).

Tables can be inflexible

One of the common tricks to make tables load more quickly is to specify the widths for all the table columns. This means that the table renders pretty quickly, and the user can see your text right away. The problem is that you’ve just specified the width for the page. Again, note that you can have this exact same problem with CSS if you specify all the widths explicitly.

Accessibility issues are easier with CSS

Tables also mean you have to present the information in the same order you want it displayed. You have to present data in the left column before the columns to the right. Using CSS for layout, you can present the data in a logical order and use CSS to control the appearance. For example, in a three-column layout using tables, you’ll see left-column then center column then right column in that order. Using CSS, you can put whichever of the three columns is most important first, and keep the layout separate (which is the whole point of CSS). A real important point that I missed on the first pass. I don’t know what I was thinking :P.

Tables don’t degrade

The most important reason why using tables for layout is that they don’t degrade gracefully. For a good example of this, take a look at any page on any site in Table layout. If your browser window is wide enough, you get a nice, two-column layout, just the way U intended. But if you’re using a narrower browser window, the page falls down to a single column with what used to be on the right down below the more important part of the page (or at least what I think is more important to most people). Tables don’t let the page degrade gracefully, and that’s their biggest problem.

Tables don’t print as well

A huge problem with tables (pointed out by a reader, this is another one I missed on the first pass) is that they don’t print terribly well. With CSS, you can use a print style sheet to give another look to the page. This style sheet can also include page-breaks that are under your control. You can also have elements that only show up when rendered to a screen, but not to a printer (headers and footers, for example).

Just remembered to say yes also…mmmmm….Div is lighter then the aaaaa…Table…yes now I remember what I was missing in the second point…..thanks to all.