Why Divs when tables work, in all browsers

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

User avatar
swiftouch
Forum Commoner
Posts: 80
Joined: Sun Dec 10, 2006 7:35 am
Location: Salt Lake City, Utah

Why Divs when tables work, in all browsers

Post by swiftouch »

What's all the fuss about using divs and how divs are so much better because css is the "wave" of the future, part of the 2.0 world of the web.

I dont get it. I can spend literally HOURS more pushing pixels around in the individual browsers causing me severe headaches. Why, why, WHY would you people out there who are div/css fanatics suggest that divs/css is better when we all know that IE has to be hacked hacked and more hacked because their box object model is ****?

Please. I really want to hear some intelligent conversation on this because I am sick of our designers designing table-less websites that don't work in every browser making me sit here for hours pixel-pushing until i'm ready to break my laptop in a dozen little pieces out of frushtration.

I can fix a problem in a table using tidy(to find missing tags)and my IDE(which finds them as well) about 100% faster than I can using divs. The unpredictability is what makes a div lame. You can say it's a microsoft issue, but what you're dealing with is a "new technology" that HASN'T come into it's own yet...at least not until microsoft does something other then bung up there browser.

I feel better. Thanks for listening to me vent.
thiscatis
Forum Contributor
Posts: 434
Joined: Thu Jul 20, 2006 11:00 am

Post by thiscatis »

It's not only <div>. It's valid xhtml CSS based layout where you put all your layout config in one file (stylesheet) and all your content in another file (index.html)

Also, from another board
Technically you can get a table to render incrementally without having to wait for all content to first load.

http://www.w3.org/TR/html4/struct/tables.html
http://www.w3.org/TR/html4/appendix/not ... tes-tables

However, because very few people realize this (and browser support has been spotty) most web designers are under the impression that tables have to wait for all content to render... starting with the innermost table. But, that is not necessarily the case. It entirely depends on whether the number of columns etc has been defined or not.

The technical reason why divs are not plagued by this is that a div itself is a single element, always. A table, however, does not exist without rows and cells. Thus, before the table knows how big it is supposed to be it has to wait for all <tr> and <td> elements to load (up until the closing </table>) before size can be determined. In the case of a table used as a wrapper for the whole page, the entire page therefore has to load before reaching </table> for the first table. Specifying the number of columns (as described on the above pages) avoids this problem.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post by Christopher »

I have to agree with swiftouch's sentiments. The "improvement" of <div> based layout over <table> based layout certainly does not seem like much of an improvement. Specifically in the very common area of putting content in columns, <div>'s seem to be a step backwards in ease of implementation. I think the layout zealots oversold the dream.
(#10850)
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Tables are dirty and nasty when used for layout. It might look good, but if your ranting like that, you don't know how much it really breaks that you don't see.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

I personally hated DIV layouts, or at least designing them. PITA to the max over simplified tables.

Once I began to use DIV layouts however and discovered all the quirks that go along with it, I began to *really* appreciate CSS layouts. They make your HTML much cleaner.

I don't think I have ever heard anyone that gave DIV layout a respectable chance (6 months of trial and error) revert back to tables, but I have heard ocuntless cases like my own.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

I thought the problem was mostly down to accessibility for screen readers since markup doesn't flow in a logical order when using tables for layout.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Try this...

Download a screen reading browser. Load up a tabled layout in it, turn the browser off so it talks to you, then try to navigate your site.

Tables, like divs, are a markup element. However the area they differ in the most is what their intended purpose is. Would you use fifteen P tags to make a list of items? No, you'd use a list element (UL, OL, DL). Would you use a bunch of DIV tags to make a table? No. So why would you use a table tag to mock a series of DIVs? Because it is easier? Sounds lazy to me.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Tables require more mark-up than divs. One table requires at least 1 inner tag, and that if the table is nothing but a box. A div is one tag no matter what. Also, in order to alter certain properties of the table (cellpadding, etc.), you HAVE to use the attributes. Attributes should be used for functionality, not style.

The amount of the table that can be altered via CSS is very limited, but external CSS style sheets greatly increase the loading time of your site, saving your clients time and saving you bandwidth.

Also, layouts are not the purpose of tables. Tables give you tabular data, not layout schemes. What is the purpose of web standards if no one will follow them? Even Microsoft *tries*.
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post by AKA Panama Jack »

d11wtq wrote:I thought the problem was mostly down to accessibility for screen readers since markup doesn't flow in a logical order when using tables for layout.
Actually DIVs are less likely to follow a logical order than tables. DIVs can be places anywhere as they allow pixel position placement and using z-index layer positioning can cause accessibility problems because content may be hidden by other DIV layers.

DIVs are great for micro positioning layers anywhere on the screen but they are not the end all to layout. You can even end up creating larger downloadable content using only DIV tags compared to doing the same thing using tables.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Like any tag, DIVs should be used when appropriate. I have seen just as a bad a mess of crap with DIVs as I have with tables.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post by Christopher »

I agree with Everah and superdezign in principle, but that really doesn't address how time consuming it can be to build columnar layouts using divs that are trivially simple using tables. I am not saying that we should be using tables (for all the reasons given) ... I am saying that the glorious replacement is crap at doing many common things. Honestly, do <div>'s just do what you wanted on the first try? Do you never get to a point where no combination of CSS attributes will do what you want to do and you have to scrap it and try a different way?
(#10850)
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post by AKA Panama Jack »

superdezign wrote:Tables require more mark-up than divs. One table requires at least 1 inner tag, and that if the table is nothing but a box. A div is one tag no matter what. Also, in order to alter certain properties of the table (cellpadding, etc.), you HAVE to use the attributes. Attributes should be used for functionality, not style.
Actually you can use more data using DIV tags than tables when you use CSS to position and modify the DIV. Some people get carried away and you end up having 2-3 times more data for a DIV layer because of the CSS compared to a similar layout using a table. :D

I have seen some layouts that use DIV tags only that have a CSS file that is many times larger than the HTML page using DIV tags.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Personally I am pretty quick out throwing down columns with DIVs. It isn't that hard, and the CSS is not that hard either. I find it easier to make columns with DIVs than with tables. But that is because I made it a point to write my markup that way about a year ago. It took about three months to get it to where I could effectively create a layout without tables that looked similar in nature to that of a table.
User avatar
The Phoenix
Forum Contributor
Posts: 294
Joined: Fri Oct 06, 2006 8:12 pm

Re: Why Divs when tables work, in all browsers

Post by The Phoenix »

swiftouch wrote:I dont get it. I can spend literally HOURS more pushing pixels around in the individual browsers causing me severe headaches. Why, why, WHY would you people out there who are div/css fanatics suggest that divs/css is better when we all know that IE has to be hacked hacked and more hacked because their box object model is ****?
Hi there!

I am a fan of semantic markup, so I wanted to take the time to answer your questions. You asked very reasonable questions, in a very spirited fashion that says you really care - so hopefully I can provide insight.

First, you mention that you can spend hours 'pushing pixels around in the individual browsers' causing you headaches. Most modern code tries to avoid fixed-pixel layouts, so thats one problem - you are working against the grain. The ideas that spawned the horrible catch phrase "web 2.0" were accessibility, machine processibility, and consistency. Fluid design hits #1 right on the head, allowing users with screen maginifiers to still have a (somewhat) reasonably formatted page.

But don't throw out your fixed-position ideals just yet, save that for another comment below..
swiftouch wrote:Please. I really want to hear some intelligent conversation on this because I am sick of our designers designing table-less websites that don't work in every browser making me sit here for hours pixel-pushing until i'm ready to break my laptop in a dozen little pieces out of frushtration.
It sounds like there are two problems in play. First, your designers aren't finishing their work. Testing against the major browsers should be a requirement for web designers. But second, you are forced to redo their work. Because you are more comfortable in tables, and fixed-positioning, and they are more comfortable with div's and fluid design. The result? Frustration all around.

Have the designers include the same testing you do as a requirement, OR have them use table designs, OR, do it yourself. :)
swiftouch wrote:I can fix a problem in a table using tidy(to find missing tags)and my IDE(which finds them as well) about 100% faster than I can using divs. The unpredictability is what makes a div lame. You can say it's a microsoft issue, but what you're dealing with is a "new technology" that HASN'T come into it's own yet...at least not until microsoft does something other then bung up there browser.
Its interesting that several times you've brought up Microsoft, and Internet Explorer. The difficulties in coding to the standard, and then making it work around IE's shortcomings shouldn't be complaints about divs, but complaints about one (bad) browser.

Here's the rub. Tables *do not* work properly in every browser. You are leaving out a whole world of browsers for users with no real choice. Namely, accessibility browsers. People with screen magnifying software, screen readers, and more. People have (correctly) commented that divs can be presented out of order in screen readers. The same is true for tables, but worse, in tables, you do not have control over the order (you can with divs and creative use of css). Even further, tables add extra markup that is spoken to the user but cannot be suppressed. It makes many sites nearly unusable.

But lets assume that ~%6 of the users out there don't sway you. Then there is the reality of redesign and maintenance. Check out a page you've designed that has logical portions (three columns, for example). Take the time to redesign a new version of it with two of those swapped. You'll find in a table design, it is very difficult to do. In a correctly designed div/css page, you simply change the css.

Lets assume you are an absolute wizard at tables, and scoff at the previous statement, while also being completely unable to migrate a single pixel to the left in a css/div design. No problem. Thats why html 4.01 transitional exists. Use tables to your hearts desire, and leave the newer technologies to others.

New technologies are about solving problems better for more people. CSS makes it easier to change layout without changing CONTENT. Div's (can) make it easier to present content to a variety of browsers that poorly present old content. XHTML makes it easy for scripts to chop up your content and reuse it. Each of those are issues you either care about, or don't.

So definitely don't be afraid to say "Hey, I like tables, and I'll keep using them". Thats why html 4.01 transitional is the overwhelming majority of content on the net today. But if you find your blind friend can't pull up your quake clan page, or your mother's sight (and use of a magnifier) makes your blog look like tag soup, maybe you'll find a reason to deal with div's and css.

Maybe you'll even think up an idea so simple, and so great, that you could make millions if other people would build on it thanks to your use of xhtml, and you'll have the next flickr or google maps.

But don't hate div & css because Microsoft has browser bugs. There are plenty of fixes like Dean Edwards *amazing* "IE7" script.

To answer a comment at the beginning of your post, I always TRY to use standards-compliant code, and try to be as semantically correct as possible. You are correct that the problems are 99% of the time with IE. But I work around them because its a buggy browser used by a majority of users, and I care about my users. That brings me to using conditional comments or scripts to fix IE, but I'd rather do that than eliminate users that use accessibility software.

Of course, I'm biased - I'm one of those users. :)
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post by jason »

http://code.google.com/p/blueprintcss/

There is no excuse to still be using tables to design web sites, especially considering table based designs simply don't work in every browser. CSS based designs, however, at least fail gracefully in browsers they don't work in.

Basically, if you are using table based layouts, I'm gonna also assume you aren't using JavaScript either.
Locked