[Lucas Kell]

Hi
I'm fairly experienced when it comes to writing sites, have written quite a few but mainly write background code. I've just started picking up a new project and I'm caught up in the massive debate that is DIV vs TABLE, and I honestly cannot tell why everyone is raving about DIV tags.

Maybe someone here can shed some light.

The arguments I've seen so far are:

Flexibility - Supposedly its faster to change layout using DIVs and css... but what if I'm not looking to change my style continuously? I'm going to have a lot of information packed into each page form various places and rearranging it will be a task no matter what method I use.

Tables are deprecated - Not true, they probably never will be as they are a basic principle in HTML.

DIVs are faster - Given, but the bottleneck will be the masses of background execution on the server and delivery of the data. A fraction of a second for a table to render isn't a concern to me.

DIVs are easier to maintain - This I really don't get. You now have to look at both the HTML and the CSS to determine how each element is drawn, and with the ridiculous amounts of both I will be using I can imagine a DIV structure will be a nightmare to keep track of.

A simplified diagram of What I will be looking to make is:

-----------  ----------------------------------------------
| Heading |  |                  Heading                   |
|---------|  |--------------------------------------------|
|  User   |  |                   Info                     |
|   Info  |  |                                            |
|         |  |--------------------------------------------|
-----------  |           Javascript Search Form           |
             |               (Interactive)                |
-----------  |--------------------------------------------|
| Heading |  | Head 1 | Head 2 | Head 3 | Head 4 | Head 5 |
|---------|  |--------------------------------------------|
|         |  |Category                                    |
|  Menu   |  |--------------------------------------------|
|         |  |  Data  |  Data  |  Data  |  Data  |  Data  |
|         |  |  Data  |  Data  |  Data  |  Data  |  Data  |
|         |  |  Data  |  Data  |  Data  |  Data  |  Data  |
|         |  |  Data  |  Data  |  Data  |  Data  |  Data  |
|         |  |  Data  |  Data  |  Data  |  Data  |  Data  |
|         |  |--------------------------------------------|
|         |  |Category                                    |
|         |  |--------------------------------------------|
-----------  |  Data  |  Data  |  Data  |  Data  |  Data  |
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             |--------------------------------------------|
             |Category                                    |
             |--------------------------------------------|
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             |  Data  |  Data  |  Data  |  Data  |  Data  |
             ----------------------------------------------

The entire thing needs to be centered.

Now I figured a mix of DIV and table would suit, so an overall content container <div>, 2 content <div>s (Left and Main) and then a couple of sub tables.

Before even getting to the stage of developing I've run into a problem: I can't center the overall <div> tag, aligning it with CSS sets every child element to centered by default but doesnt center the contents.

How would you guys proceed, and why?
I'm beginning to think this whole div vs table argument is one of those 'who cares' kind of arguments where neither side is more right or wrong than the other. All I know is, If i want to do this with purely tables I can do it in about 30 seconds, but if I wan't to attempt to use DIVs then it's going to be a long night.

[modi123_1]

The gist is table are to hold data, and divs are to hold layout and formatting. Back in the day folks were using tables as an easy layout method. That's generally a frowned upon activity.

[Lucas Kell]

I get that, but many developers were looking for a tabular layout. Why would you use anything but a table for that?

Even just the simplicity of making sure segments never overlap, a table will never overlap cells, yet I've seen overlaping DIV tags several times, especially when the window is made smaller. I guess when it coes to the argument about holding data, I have to ask, at what point does text stop being data? Each forum post here is data retrieved from a database, yet it's suddenly not considered data when discussing layout.

[modi123_1]

I would disagree, and say that many developers took the easy way out with the table layout, but now are experimenting with layouts in funky angles and areas. You would use anything other than a table because a page isn't just confined by a grid.

Sure the div tags are hard, but a non grid layout for a website is something neat and shows the time and quality put into it.

Regarding data - you are looking too hard into the argument. It's all about intent. When the data comes back formatted with HTML and the target is a browser it's safe to say the intent is for a webpage display. If the data comes back and isn't formatted in a specific way then it's text.

[Lemur]

My oh my, here we go again with this.

Quote

Flexibility - Supposedly its faster to change layout using DIVs and css... but what if I'm not looking to change my style continuously? I'm going to have a lot of information packed into each page form various places and rearranging it will be a task no matter what method I use.

...so you're saying that you should screw over any future coder because you're too lazy to do things the right way in the first place? You are correct, it will be a task, but compared to the nightmare of reordering that many tables for a complex site there's no contest in time taken.

I've worked with both and you're sorely mistaken if you think maintaining a table based layout is faster. That means remaking the ENTIRE page just to suite a minor change.

Quote

Tables are deprecated - Not true, they probably never will be as they are a basic principle in HTML.

False: Tables are deprecated as a means of layout by their creator.

Quote

DIVs are faster - Given, but the bottleneck will be the masses of background execution on the server and delivery of the data. A fraction of a second for a table to render isn't a concern to me.

False: Tables cause slower load times and larger page sizes. Now this wouldn't be a large deal if it was a few kilobytes, I understand that, BUT I have reduced a page originally made in tables to less than 10% of its original size.

Over the course of one user this seems negligible, but when they start stacking up your server is going to go to its knees fast. ALWAYS build for the worst case scenario, not some optimistic type you'd hope to happen. One link to your site from a high-end blog and you're instantly down.

Quote

DIVs are easier to maintain - This I really don't get. You now have to look at both the HTML and the CSS to determine how each element is drawn, and with the ridiculous amounts of both I will be using I can imagine a DIV structure will be a nightmare to keep track of.

No, it won't. With Div/CSS you have a much cleaner layout and with an external stylesheet you only have to use one reference to it.

A good div structure is incredibly simple to comprehend and to work with. The thing to remember is though that div isn't the end all tag for this. You use <ul> for menus, <body> for the main container, and with HTML5 you have far better code to work with for styling areas without ever really touching more than 1 or 2 divs.

Now the problem is people with what I call divits. They overuse the tag massively instead of using it properly and semantically. You don't need a div or a span to change # paragraph in a div with the id of x, you need to set a child style for it.

In closing

It isn't a matter of what people prefer, it's a matter of this is right and more efficient and people are too lazy to get up to standard.

It takes me less than 2 hours to lay out an entire CSS layout from a PSD file of average complexity. This leads me to think you're using the fallacy of sour grapes to say CSS and Div styling is bad because you don't get it and quite frankly you have no real experience in it.

If you had the level of experience that some of the members on this forum have in CSS then you would have no competition on such an issue as this.

As far as the data argument, this is more of syndicated and post content. If you want data, think Excel. If it's impractical to use in excel then you shouldn't call it data. This is only a simple test to make a distinction, not an end all.

http://www.baweaver.com

Tell me that the source of this is hard to understand. I've shown this to clients without a shred of html or coding experience and they can instantly comprehend what's happening with the page. I show them a tables layout and they sit there completely overwhelmed with no idea what's going on.

Fact of the matter is Div/CSS is: Cleaner, faster, more flexible, smaller, simpler, and above all else correct.

[Lucas Kell]

So with that, if you were looking for a tabular layout, as I've shown above, how would you proceed? A table or nested DIVs?

And how would you overcome the problem that a DIV can't properly be centered without playing about with positioning and negative margins?

I'm interested in the whys as much as the hows as well. Why is it people hate tables so much? I've theres a serious legitimate reason, I'll take the time to work a new layout with DIVs, but if its just a "because DIVs are the latest craze" thing, I'll save myself the time.

[Lucas Kell]

Lemur, on 10 August 2011 - 03:11 PM, said:

...so you're saying that you should screw over any future coder because you're too lazy to do things the right way in the first place? You are correct, it will be a task, but compared to the nightmare of reordering that many tables for a complex site there's no contest in time taken.
I've worked with both and you're sorely mistaken if you think maintaining a table based layout is faster. That means remaking the ENTIRE page just to suite a minor change.

There will be not other coder, and the design I have shown would use 3 tables at most. With segmented background code, I could move major pieces with a simple cut-paste and edit other parts without affectign things outside their parent table.

Lemur, on 10 August 2011 - 03:11 PM, said:

False: Tables are deprecated as a means of layout by their creator.

Where is this stated? As far as I can see, this is a massive ongoing argument in comparison with the arguments between which programming language people should be using.

Lemur, on 10 August 2011 - 03:11 PM, said:

False: Tables cause slower load times and larger page sizes. Now this wouldn't be a large deal if it was a few kilobytes, I understand that, BUT I have reduced a page originally made in tables to less than 10% of its original size.

I dont disagree, but from what I can see, the space yo usave on HTML you use back up in CSS, since when you have a variety of elements (complex table structures with colspan and rowspan used all over) you end up having to define a whole host of classes for the varying widths and heights.

Lemur, on 10 August 2011 - 03:11 PM, said:

Over the course of one user this seems negligible, but when they start stacking up your server is going to go to its knees fast. ALWAYS build for the worst case scenario, not some optimistic type you'd hope to happen. One link to your site from a high-end blog and you're instantly down.

I can guarantee any amount of users will not be hammering pages out that quickly. I'm having to optimise databases and server code just to avoid hitting scipt executions limits.

Lemur, on 10 August 2011 - 03:11 PM, said:

It takes me less than 2 hours to lay out an entire CSS layout from a PSD file of average complexity. This leads me to think you're using the fallacy of sour grapes to say CSS and Div styling is bad because you don't get it and quite frankly you have no real experience in it.

If you had the level of experience that some of the members on this forum have in CSS then you would have no competition on such an issue as this.

I don't deny im not great at DIV layouts, I'm decinding whether this is something I want to invest time in. So far the gains seem to be too minor for me to put the time in.

Lemur, on 10 August 2011 - 03:11 PM, said:

Tell me that the source of this is hard to understand. I've shown this to clients without a shred of html or coding experience and they can instantly comprehend what's happening with the page. I show them a tables layout and they sit there completely overwhelmed with no idea what's going on.

To be fair though, that is a very simple layout. If you look at the diagram I've posted up, its a more complex layout and that is just a simplistic view. Realistically the right hand side will have some pure tabular data, some forms, some paragraphps of information, some icon panels and a whole host of other things.

Lemur, on 10 August 2011 - 03:11 PM, said:

Fact of the matter is Div/CSS is: Cleaner, faster, more flexible, smaller, simpler, and above all else correct.

I'm not entirely convinced. I've been reading more and more about it while posting on here, and people seem to have problems with layout especially in consistency between browsers. Some of the browsers I'll be delivering to will be non-standard and theres no guarantee they will behave how I want them to.

[Lemur]

Not necessarily as much as the reasons I've highlighted above. That's like saying I'll use Windows 98 over Windows 7 because it's more comfortable to me. Makes no sense whatsoever.

As far as a basic layout (2 col header/footer), here's what I mean:

<html>

<body id="container">

<div id="header">

<h1>Header text</h1>

<ul id="menu">
  <li><a href="#">menu item</a></li>
  <li><a href="#">menu item</a></li>
  <li><a href="#">menu item</a></li>
</ul>

</div>

<div id="mainContent">

<h2>Title</h2>

<p>Text</p>

</div>

<div id="sideContent">

<h3>Other Title</h3>

<p>Text</p>

</div>

<div id="footer">

<p>Copywrite info and other such</p>

</div>

That's a very simple skeleton that took me all of 2 minutes to write.

As far as centering content, tables create nightmares for that. Divs are simple to center, just use margin:0 auto; in CSS to accomplish this. In some versions of IE you have to align the text to center as well, but that just means putting left align on all other tags.

The very creator of tables stated that they were not meant for layouts and that people should mitigate to div/css layouts instead. If that's not enough (even though I said it above if you would read the entire thing...) then I don't know what will convince you.

I just gave you all the why and not much of the how, if you read my entire statement you would realize that.

Just because you don't have a full comprehension of CSS doesn't mean it's an evil thing that must only be a fad. Going that way only makes you seem like the web admin everyone hates for sticking them in the dark ages of geocities.

[BetaWar]

I am just going to post this link:
http://www.dreaminco...-css-vs-tables/

It goes over my feelings and a lot of other people's as well. It is old, but the info should still be good.

[Lemur]

http://www.hotdesign...everything.html

Finally I found this thing.

Regardless, other links of interest:

http://www.chromatic...website-design/
http://coding.smashi...ll-to-div-hell/
http://stackoverflow...-layout-in-html

The only people heralding tables that I've seen so far are those that learned with them and are either too lazy or to stuck to change. The modern web us moving on ahead. Go to any serious web design job and say you use tables and see what happens.

[Lucas Kell]

Lemur, on 10 August 2011 - 03:35 PM, said:

As far as centering content, tables create nightmares for that. Divs are simple to center, just use margin:0 auto; in CSS to accomplish this. In some versions of IE you have to align the text to center as well, but that just means putting left align on all other tags.

Since I will be having to ensure this is cross compatible with the widest array of browsers, then I shall be needed to align the text.

Lemur, on 10 August 2011 - 03:11 PM, said:

The very creator of tables stated that they were not meant for layouts and that people should mitigate to div/css layouts instead. If that's not enough (even though I said it above if you would read the entire thing...) then I don't know what will convince you.

I don't really know either. The ting is no matter how much I search, all I seem to find is demonstrations of the same simple layouts (how to make x colums). Maybe there should be mor focus on how to evolve from that in to larger complex layouts that people are able to generate easily with tables, and people may ask these kind of questions less.

Lemur, on 10 August 2011 - 03:11 PM, said:

Just because you don't have a full comprehension of CSS doesn't mean it's an evil thing that must only be a fad. Going that way only makes you seem like the web admin everyone hates for sticking them in the dark ages of geocities.

I'm not saying CSS is just a fad. I use CSS all the time. I just don't yet uses a combination of DIV tags and CSS to replace complex layout. I only really use DIV tags when I want to combine several segments of info into a single area.

I'm not saying lets go for a geocities massive-grid-of-cells layout merging cells together to stick data all over. I'm just confused why people talk about using DIVs for layout, when they are producing tabular layouts, and am trying to decide If that's something I want to do.

If it was a smaller project I'd just give it a go and see how it works out, but I don't want to invest the time in doing a massive amount of additional work just to have to dump the lot later.

[Lemur]

If you have questions on layouts just ask, if you can get a wireframe up (google tutorials) I can give you a basic idea of how to go about it. I'll be back on later tonight to answer whatever.