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
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post by AKA Panama Jack »

jason wrote: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.
Not true... Each browser is different in how it interprets CSS. In some ways CSS is just as much of a problem as Tables when it comes to formatting and display. Some CSS attributes that are supported in one browser may not be supported the same way or at all in another browser. So you can't count on CSS being universal in how it is displayed either.
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post by jason »

AKA Panama Jack wrote:
jason wrote: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.
Not true... Each browser is different in how it interprets CSS. In some ways CSS is just as much of a problem as Tables when it comes to formatting and display. Some CSS attributes that are supported in one browser may not be supported the same way or at all in another browser. So you can't count on CSS being universal in how it is displayed either.
Huh?

What's not true? That there is no excuse not to use CSS? That tables don't work the same in every browser? That CSS based designs will fail gracefully in browsers it doesn't work in?

It's all true.

What you said really didn't make any sense with what I said.
User avatar
swiftouch
Forum Commoner
Posts: 80
Joined: Sun Dec 10, 2006 7:35 am
Location: Salt Lake City, Utah

Post by swiftouch »

ok, i admit, i'm old school and after taking a break from programming to pursue other interests, i'm back and wondering where my table dominant world ran off to.

I guess my problem is the Mac designer, who doesn't have more than a 5.5 IE browser to test with because (that nasty M word) decided to stop supporting IE for mac a long time ago. 95% of my issues crop up in ie6, because people don't want to upgrade. It's not like IE7 was ever easy and intuitive. I despise that browser for it's continual lack of features and add-ons and everyone else should who've had a taste of firefox. But then again, i know my mother hasn't upgraded from 6.0 to 7 specifically because I refuse to have to make her re-learn where everything moved to in the newer 7.0. I really have a problem with M. right now and better quit before I start thinking about breaking my laptop into little pieces.

My frustration grows out of lost time spent dinking around with pixels. Fluid design or not, when you have a heavy site graphically, anyone is going to have 3 dozen issues to deal with before you get the kinks worked out. Instead of a $500 dollar website costing $500 what you end up charging is more like $2-3k to deal with all these "inconsistencies."

The one thing I really haven't considered is the accessibility aspect of css/divs. That's nice for those 6% for sure.

Thanks for the spirited discussion people. I'm learning lots. ...and hope others are too.
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post by AKA Panama Jack »

jason wrote:Huh?

What's not true? That there is no excuse not to use CSS? That tables don't work the same in every browser? That CSS based designs will fail gracefully in browsers it doesn't work in?

It's all true.

What you said really didn't make any sense with what I said.
It should make sense. What doesn't make sense is your claim that CSS fails gracefully. The same thing can happen with CSS in different browsers as it can with tables. The layout just don't looks the same. Fails the same way. So where is this graceful failing you talk about?
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

@the size issue

After the initial download, the css (if linked) gets cached and therefore becomes irrelevant. In most cases, div mark up is considerably less in size, especcially when comparing to a similar table-based layout.

Not to mention readability is a huge thing now. Seeing a page with little markup is much more intriguing to delve into than table tr td tags everywhere.

Then, you can edit your WHOLE LAYOUT (not speaking in every case, of course) by editing a css file. If doing that with tables, you'd have to do a lot of editing to every page you wanted changed.

And of course, the separation of markup from content as much as possible is another key factor. (hopefully this sentence doesn't get quoted and disputed without the several other valid points raised above)
Last edited by s.dot on Fri Aug 17, 2007 12:05 am, edited 1 time in total.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Post by Stryks »

I believe that most of us here using the term 'tables' to mean 'tables used for whole page layout', and in this case I would have to weigh in on the side of CSS being the only way to go.

However, we tend to throw this idea that tables are evil and to be avoided at all costs around just a little too easily of late, and I just wanted to raise the point that tables are a semantically correct and viable way to present some types of information.

If I have tabular data to display, it makes little sense to me to use DIV's to recreate the exact appearance of a table, when you could put it into ... well .. a table. Don't get me wrong, I haven't used a table for years that didn't have CSS applied to it, but it's a correct HTML construct to hold tabular data.

I'd even go so far as to suggest that certain problem-prone pages are well suited for a tables based layout. Forms spring immediately to mind. I can slap a form in a table and know that I could strip that CSS right out of there and my users will still have a half decent form to use. I've had CSS forms go to hell with very little alteration.

My point is that it's part of a toolkit. Your table is just a basic structural tool, and CSS is your paintbrush (with the magic ability to move the furniture and insert windows). Your structural tool can be messy and ugly, and you might not want to use it on every house you build, but it's still a tool worth keeping because every so often, it's the best tool for the job.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

First, a very important nitpick. Don't talk about "div" layouts. Any time I hear someone say that, I know he or she has still a lot to learn. The thing is, to understand the motivation behind using "divs" for your websites instead of tables, you have to understand what web standards are. And what advantages they give. It is not about replacing tds with divs! When you take that approach, it is no wonder you have a very hard time pushing around pixels. Because divs/css just don't work the same as tables.

It's about best practice. Using web standards. Meaningful and accessible markup. Markup which can be styled easily with CSS. Markup which is easy to maintain.

We can all agree that using web standards and not using tables for layout is a good thing. Many reasons have been mentioned in this thread. That leaves only one reason why you would want to use tables: it is easier for you. You are used to working that way, and for you it's easier and faster.

I don't think that's a good excuse. First, I believe that you may never let the quality of your product be decreased because of your inability to do the best thing. that's just unprofessional.

Secondly, as many have said before: invest in learning CSS properly and you won't go back. Really, all the problems you have can properly be solved or prevented very easily. Once you know the main bugs in IE you can design your sites in such a way that hacking for IE is not needed anymore. It's also a lot easier nowadays to find the cause and solution of potential issues then a few years ago. Now a quick google search or a question on this problem will get you your answer within minutes.

p.s. I use "you" in a general sense, as in "we" so don't take my words too personally
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Post by Stryks »

I'm not sure if your post was a direct reply to me or to just to the thread in general.

If the former, then seriously, you're preaching to the choir. I'm a presentational CSS convert and I honestly don't know how I ever worked with tables for presentation. When I rework old projects, I literally have to scrap the whole thing and start with the content in semantically relevant constructs and style it from there.

Again with the generalization of tables though. Tables are not always a bad way to present data, and just for clarification, my comment on using DIV's to recreate a table wasn't a suggestion, but a reference to something said earlier in the thread.

My only point is that tables *are* appropriate sometimes. And in those cases, the use could still be considered as 'layout'. Saying that tables should never be user for layout is to say that tables should never be used at all, and I really think that's a waste of a perfectly valid, semantically relevant tag.

Apart from that, very solid points all round. I just always feel the need to stick up for tables because they always cop a bashing. Not without reason, granted. But I believe there's still a place for tables on the web.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Stryks wrote:I'm not sure if your post was a direct reply to me or to just to the thread in general.
No, my reply was not directed at you, but to the subject of the thread.
Stryks wrote:My only point is that tables *are* appropriate sometimes. And in those cases, the use could still be considered as 'layout'. Saying that tables should never be user for layout is to say that tables should never be used at all, and I really think that's a waste of a perfectly valid, semantically relevant tag
You are absolutely correct. Tables are in the specifications of (X)HTML last time I checked and can and should be used at times.
Stryks wrote:Apart from that, very solid points all round. I just always feel the need to stick up for tables because they always cop a bashing. Not without reason, granted. But I believe there's still a place for tables on the web.
Exactly. That's basicly the same as my point but in different words. It's not about divs or tables. It's about using the correct elements in the right places. Maybe a div to wrap a division of content (div id="maincontent"), sometimes a H1 for a header, a table to present some tabular data, etc etc.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: Why Divs when tables work, in all browsers

Post by onion2k »

swiftouch wrote: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.
The reasons I use CSS rather than tables:
  • It's expected. I don't want anyone to be able to point out things that are "wrong" with my sites. If a rival company can contact my customers and tell them that there's something out of date or inaccessible on their site then I look bad.
  • It's easier to update. Some things are a right pain to add into a table layout. If a customer decides that they want to update the look of their site with a new box in the middle it's a lot more effort to add it into a table layout than a CSS one.
  • It's more accessible. It's possible to build a layout with tables that linearises into a logical order, but it's much easier with CSS.
  • It's better encapsulated. With CSS I can make modular sections of a layout more easily, I can even put them on top of one another or move them around to a specific location with absolute positioning.
Ultimately it doesn't really matter what you use. The web site users don't care. If it works then so what? Right? Not really. I care, I want to make high quality, cutting edge, exciting web software. That means doing things the best possible way.

Put it this way - it's possible to write a website using procedural code rather than object oriented. Both will get the job done. Does it matter which you use? No. Is one better than the other? Hell yes. Same goes for tables versus CSS.
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

Post by Jenk »

jason wrote:
AKA Panama Jack wrote:
jason wrote: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.
Not true... Each browser is different in how it interprets CSS. In some ways CSS is just as much of a problem as Tables when it comes to formatting and display. Some CSS attributes that are supported in one browser may not be supported the same way or at all in another browser. So you can't count on CSS being universal in how it is displayed either.
Huh?

What's not true? That there is no excuse not to use CSS? That tables don't work the same in every browser? That CSS based designs will fail gracefully in browsers it doesn't work in?

It's all true.

What you said really didn't make any sense with what I said.
The last part is not true. A line of div's will not fail gracefully into a line without the CSS display: inline; They will stack, so your rows will become columns.

Tables are still valid for, and are the best option for, tabulated data.
User avatar
panic!
Forum Regular
Posts: 516
Joined: Mon Jul 31, 2006 7:59 am
Location: Brighton, UK

Post by panic! »

No offense but if's taking you ages to make a CSS layout, you just need some more practice or maybe you're not writing good CSS.

Tables are for tabular data..use them for that.

Tables are totally inflexible too.
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post by jason »

Jenk wrote:The last part is not true. A line of div's will not fail gracefully into a line without the CSS display: inline; They will stack, so your rows will become columns.

Tables are still valid for, and are the best option for, tabulated data.
That's the confusion. I'm not talking about DIV's, I'm talking about CSS based designs. You use more than DIV's in CSS. Indeed, there is such a thing as divitis; basically, using too many DIVs is a bad thing and should be avoided.
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

Post by Jenk »

Oh of course, but what else would you use to replicate a table data cell? Span's would compact to one blob of a sentence, p's would behave the same as Div's, etc..
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post by jason »

Um...

I'm not proposing never using tables. Tables are for tabular data. Tables are good, just not for layout and design.
Locked