To div or to table, what would you use?

**dharrison** · #1 (**permalink**) 11-03-2005, 05:47 AM

Hi all

I am in the process of re-designing my website and although I mainly use tables to layout my web pages, I am becoming quite a fan of using <div> layers to layout the pages of my most recent projects.

From the many newsletters that I subscribe to do I learn that table layouts are dated/unreliable/the anti-Christ, etc.

So I would like to hear from my fellow forum members: Which layout do you use for your web pages? Why do you prefer that layout? What are its Capabilities/Restrictions?

I would love to hear from you :-D.

All the best.

**dharrison** · #2 (**permalink**) 11-03-2005, 10:09 AM

Also has it had an impact of your SEM campaign?

Sorry, just thought of that one. ;-)

ADAM Web Design · #3 (**permalink**) 11-03-2005, 01:10 PM

It depends on the content and the circumstances.

For base layouts, I've grown used to using divs layouts because there are certain limitations to tables that divs overcome.

However, there are situations where I am presenting information in a grid, and that's where tables come into play.

speed · #4 (**permalink**) 11-03-2005, 02:45 PM

If the content is tabular in nature I use a table, for everything else I use divs.

Now days I find tables frustrating when using them for layout. The only thing in favour of tables is they tend to behave the same on all browsers, but that's not enough to make me want to go back to tables.

I find that divs tend to produce a smaller file, which gives quicker loading and less bandwidth usage.

bj · #5 (**permalink**) 11-04-2005, 06:31 PM

Funny, though I'd use a table if I had a need for one . . . I just don't have a need. Float a div and put it anywhere you want, why would I go back to thinking in nested grids? ACK!

Really, xhtml/css tableless design is MUCH more flexible. Yes, it's an initial learning curve, but well worth it.

I had to use a tabled layout yesterday (no choice, it's a shopping cart whose core generates tables) and had to troubleshoot some stuff in the template, so I printed out the source code. Normally on the very rare occasions when I need to print source on one of my xhtml pages it's one, or at most two, sheets. This index page printout was six pages long . . . that's the difference in coding between tableless and tabled layouts. Think how much more quickly your site loads, especially since the css file is in cache. In a tabled layout site those six pages worth of nested tables have to reload on each and every page.

There are also accessibility issues between the two.

Divs all the way for me.

drummin · #6 (**permalink**) 11-07-2005, 05:49 PM

Hi All!

When I started learning to hand code a few years back I only used divs and never thought of using tables.
In fact, I posted many comments in those early days to this forum about the benefits of a div layout over a table layout.

I appreciate all the pros here and read all your post with anticipation. I've seen many posts on this topic, yet even with my "div" beginning, I'm finding on many occasions I still need to use a table to get the effect I'm looking for.

It usually involves trying to get an image element to duplicate on the y-axis.
Looking at this sample site I'm working on; getting the left column background images to duplicate down to match the main body parts is the problem.
http://prebuilders.com/tour3/welcome.php

I end up making a site that combines both absolute positioning using divs and tables.
Sure I could make a site without the images, but to me that would be no fun.
SO...

What would you do to accomplish this type of repeating background image as I used to the frame left column?

speed · #7 (**permalink**) 11-08-2005, 03:52 AM

Quote:

Originally Posted by drummin

What would you do to accomplish this type of repeating background image as I used to the frame left column?

I'd make an image that can be tilled vertically the entire width of the content area (brown, white, brown, orange, brown, white, brown) then apply that to a div, this gives the columns effect.

Now I'd just build everything inside this div inserting the top and bottom box graphics as required.

The graphics that go all the way across at the top and bottom of the content area I'd add as 2 additional divs one before and one after my containing div.

I'd probably keep the title and footers separate from the above. All in all you don't need a table for that layout, I also tend to avoid any absolute position elements.

Hope that's clear enough.

Faglork · #8 (**permalink**) 11-08-2005, 07:53 AM

Quote:

Originally Posted by bj

Really, xhtml/css tableless design is MUCH more flexible. Yes, it's an initial learning curve, but well worth it.

I second that. This is especially true for "liquid design" as opposed to rigid, table-style pages.

The problems most people seem to have is that they cannot abandon old-style print design. That's the core of all problems IMO: If you want a controlled, exact-to-the-pixel page, then it is in most cases easier to use tables. But this sort of design is not "web" design. It is "print" design crammed into a medium which is built to *overcome* the severe limitations of print.

There are two ways to look at this.

The "print design" view: "My god! It is SO hard to make pixel-perfect designs which display exactly the same in all browsers."

The "web design" view: "It is a godsend that we do not have to cling to fixed screen sizes. Luckily, our pages can adjust to every need."

*Not* using rigid pixel-perfect layout means taking a step towards using the web at its full potential. But that also means to think different. This is not a simple decision between TABLE and DIV. It means switching to an entirely different media model.

Cheers,
faglork