DIVs vs. Table for site layout

[T4gal]

Lately I've been seeing a lot of people saying you should never use table for a site layout, only DIVs. So I began to look into this to see why, and after a lot of reading I'm thoroughly confused. Currently I make all of my websites using tables and CSS classes for everything, layout and content, but am now considering rethinking the way I do things, but it's very difficult, as I see very good points from both sides of the argument.

I've always been taught that if you're going to do something, do it right. And a lot of people say, using tables for a layout is wrong, but really, is it? Or is it just a case of everyone being told DIVs are better, and so they repeat it without questioning why it's better?

To me, tables are the easiest, fastest choice, but the easiest and fastest isn't always the best choice, and I'm having trouble deciding whether it is or isn't in this case. At first I thought DIVs were harder for me simply because I don't fully understand them and haven't ever really worked with them, but the more I read, the more I see that other people say they often take longer to get working and are less reliable. Of course there are just as many people that would disagree with that.

I'm totally neutral at this point. I would gladly learn DIVs and switch over if I knew it was the right choice, but I really have no idea what the right choice is here.

I know this is a discussion that can be found everywhere, but the more I read about it the more confused I get, so I was hoping someone here might be able to make the choice a little easier.

Thanks

[pritaeas]

The major point that always comes up in this discussion (in my opinion), is that tables were not meant for design, they are meant to present tabular data.

I've seen a lot of designers in my previous job, and they all agreed on the fact that anything can be done with divs. If you worry about cross-browser compatibility, yes, it may be difficult, but there's always a fix or way around a certain problem.

My vote is for divs. I found it hard too when I first started, but I'm glad I made the switch.

[haranaboy]

I definitely agree with pritaes's comment. Tables are meant to present data in rows/columns.

In addition to that, divs are way easier to create AND change than tables.

For example, here's the two codes the displays the same thing.

"Title of Page
Primary Navigation
Content
Secondary Navigation
Copyright Notice "

Table:
" <table>
<tr>
<td colspan="2"> Title </td>
</tr>
<tr>
<td width="20%">
Navigation
item
item
item
item
</td>
<td>
Primary content
---
Secondary Navigation
</td>
</tr>
<tr>
<td> </td>
<td>(c) 2002</td>
</tr>
</table>

With div's its like this:
" <h1 id="top">Title</h1>

<ul id="navigation">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

<div id="main">
The main content
<div id="secondary">
secondary navigation
</div>
</div>

<div id="copy">
© Foo, 2003
</div>
"

As you can see it's a lot easier with Divs than with tables. Here's the link where I got this code from. http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables

[T4gal]

Hmm... I'm not sure I see why it's easier. I did notice you used ID's for the DIVs, but not the Tables, why is that?

I keep seeing people using the fact that Tables were meant for tabular data, not layouts, and thats true, but does that really matter? I guess that comes back to "if you're going to do something, do it right". But what if my layout works best presented in rows and columns?

[haranaboy]

ID's are identifiers that are used to identify a certain element (eg. a Div)

You can have many div's (ex. Header Div, Content Div, Navigation Div, etc...)

With the CSS, you can give those different divs different attributes(eg. different color, background color, font color, etc...)

"I keep seeing people using the fact that Tables were meant for tabular data, not layouts, and thats true, but does that really matter? I guess that comes back to "if you're going to do something, do it right". But what if my layout works best presented in rows and columns? "

My opinion on this is, you can put your table in a div. Using a div doesn't mean you can't use a table and vice versa.

It really depends on what you need.

[Lusiphur]

One statement that has come up in past discussions relating to the DIV vs. Table debate has to do with loading priority of the components themselves. Tables will not load any content until ALL content for the table is present whereas DIVs (being individual content blocks and technically each 'cell' is separate from the other) load as the content is present. This allows for smoother page loading from my understanding of it.

However, I could be talking out my ass as I've never directly compared the two.

What I do know is that the 'industry standard' these days is DIVs due to additional layout flexibility and capabilities that DIVs provide.

For those situations where you are concerned about cross-browser compatibility... Most browsers are fairly uniform in the way they handle DIV formatting. Notable exception here being Internet Explorer.

I'm not going to bash Microsoft here but if you do a quick search of DaniWeb's forums under the search term "Internet Explorer" or "IE" you'll likely come up with dozens upon dozens of posts related to layout issues in IE. The silver lining here, however, is that the latest version of IE seems to finally be catching up with the pack in it's ability to handle diverse formatting abilities that it didn't handle properly before. Also, as mentioned above, there are workarounds that can be used on older versions.

[T4gal]

"ID's are identifiers that are used to identify a certain element (eg. a Div)

You can have many div's (ex. Header Div, Content Div, Navigation Div, etc...)

With the CSS, you can give those different divs different attributes(eg. different color, background color, font color, etc...)"

I understand that, but can't you do the same with tables? I use classes and ID's for table cells all of the time, is there a difference between how they work on DIVs and on Tables?

As far as using both DIVs and tables in a layout, I'm not sure I can find a place where DIVs would be more useful, or do a better job than tables, but that could very well be my lack of understanding of how DIVs work. Maybe I should be playing around with DIVs and learning how they work before I even ask which is better, but I've seen a lot of people saying that they take way longer and a lot more tweaking to get them to work, while tables just work right away. The major reason I stay away from DIVs, is the fact that you can't (or more likely I just don't know how to) put two DIVs side by side very easily. With tables, it takes two seconds to just split them and all is good.

If anyone knows of a website that really explains the ins and outs of DIVs, that would be very appreciated. In the meantime I'll see what I can find on google.

[Lusiphur]

An example of where a DIV can do what a table cannot do would be the following:

Person wants to have a graphic centered inside a group of text with the text wrapped around the graphic. (ok, table CAN do this...).
Person further wants to have some text placed directly over top of the graphic, separate from the text that's wrapped around it (Uh oh, table can't do this).
Person wants a segment of their page to persistantly appear in the exact same location every time the page is shown, regardless of other page content (Absolute positioning of DIVs can do this).

[T4gal]

That makes sense. Looks like I might have to learn how to use DIVs.

Would it be practical to create a whole layout using absolutely positioned DIVs? How stable would that be as far as different browsers and screen resolutions go?

[Lusiphur]

To be honest the above were just examples.

Many sites these days are fluidly laid out. Percentage placement and relative placement of DIV elements ensure the site looks "the same" in varying resolutions and browsers provided they're done correctly.

Similarly, em and % font sizes perform the same function on the display of the textual elements of your site to ensure the sizing appears uniform no matter the resolution it's being viewed in.

The difficulty with absolute positioning is that it generally starts from the top left of the screen and works down and across from there so... wide-screen vs standard screen may appear differently if not handled correctly.

[T4gal]

How about for, say, a centered, fixed width layout? How simple would that be to do with DIVs?

[Lusiphur]

Easily enough using left-margin: auto; and right-margin: auto; in the CSS for the containing DIV.

There's a lot of information on DIV and CSS configuration available if you do a search in Google for tutorials. w3schools is a good site for them in particular.

[dietdew12z]

The last time I built a web site it was HTML 1.0 and there was no javascript or PHP, so I decided to re-learn web programming.

When I started the web site I'm working on now I used all absolute positioned divs because that's what all the sites said to do but I quickly ran into problems. Then I tried using a combination of absolute and relative divs and wound up with crappy looking pages where you couldn't count on the content being where you wanted it to be.

I finally broke down and tried a table for one of my worst shape shifting pages(lots of dynamic content) and viola! it looked beautiful.

I've now gone back and reworked about half of my pages using both divs and tables and I believe that's probably the best approach to building a website. Spare use of tables to achieve your overall layout and divs to get the 'shiny' feel. :)

That's my 2 yuan, anyway.
David

[Usernamex235]

Hey,

Posted in a similar thread a while back:

Technically there is little difference between the 2 - both are block-level elements so you could basically manipulate them in the same way, with CSS, nesting or otherwise.

The difference between the two is semantics. The meaning of the element.

A table should be used to show tabular contents, for example data showing a list of supported features on a page comparing different versions of a software product.

A div should be used to show a "page division" i.e. a site's header, left/right columns and a footer, assuming we're not using some of the cool new elements in HTML5.

The reasons the argument still rages on:

- It's simply two different schools of thought
- Browser compatibility

The "old school" designers have tended to use tables, because of browser compatibility. Divs, implying page structure, were interpreted differently by the early browsers.

As divs should semantically be used and because of improved browser standards-compliance, more recent designers (or those who didn't learn "old-school") use divs.

So if you are looking to decide between the two, use divs for page structure, and tables for tabular data. It'll mean more to any parsers (i.e. robots/crawlers) so your page will reflect better in seo and will be more helpful for mobile browsers.

[cofibach]

Hi
I'm new here .Just joined but have had a look at the various threads and are making notes.I have always used tables since I started doing webpages 13 years ago and use frontpage but there are a few tips in this thread that I can try.

My websites a simple with no flash or adverts.

Here is one that I did for my grandson who is just gatting better after leukaemia.
www.mattsmatch.co.uk

It is all done with tables and the jigsaws I did with Ulead Photoimpact which I had free with a Computer Magazine dated 1995.

I will keep looking in.

[Elihu5991]

It really does matter on your project. DIVs give you absolute control whilst Tables are limited.

[agrable]

I've been trying to figure out if I should design with tables (I'm very comfortable with this) or with DIV's and I am now thinking that I should use both? Why not use tables for the main area of the page and use DIV's inside the tables to place the content? I'm finding that DIV's are more limiting, but tables load slowly...

[localinternet]

Dear You are right, But If you want to utilize your web space you can use DIV,Div provide more flexibility rather then table.If you want to design Unique temple from other use DIV.