Skip to content

Why DIV tag not TABLE

August 5, 2009

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 doesnt necessarily help here, since theres the same problem if the widths arent specified explicit. Im guilty of this myself.Tables dont 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, its still a problem.Simply speaking just think how much time each

takes at the background when page is loaded (think if u have big form and have around 50


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 youve 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, youll 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 dont know what I was thinking :P.

Tables dont degrade

The most important reason why using tables for layout is that they dont 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 youre 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 dont let the page degrade gracefully, and thats their biggest problem.

Tables dont 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 dont 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).

No comments yet

Leave a Reply

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

You are commenting using your 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

%d bloggers like this: