Div Layout Vs Tables

BizzyC

I was just wondering, what advantage does using div layouts have over tables.

I cant think of any real advantages, yet everyone seems to be using them these days.

Goodshape

To be honest, I don't fully understand the intense hatred of tables that some people have (except that Sir Tim said they were a big mistake, and people tend to agree with Sir Tim).

Although using Div's with CSS does offer a lot more freedom in design. You can actually place a DIV exactly where you want it to be on the page, without the need for empty 'filler' cells or transparent pixel gifs to make up the in between space.

Here is one of the first pages I made using CSS and DIVs. It's not great (note: my first), but try doing that with tables and see how far you get.

BizzyC

But you can still use CSS and tables...

I understand that it can negate the need for filler cells etc, but what real difference does that mean to the functionality of the site?

Serbian

I don't get the explosive reaction when people mention they are using tables, but I do feel that sites are better coded when they are coded in CSS. A good article which explains why CSS is better can be found here. Don't be put off by the title of the article, it's not as preachy as it sounds!

Serbian

BizzyC wrote:

I understand that it can negate the need for filler cells etc, but what real difference does that mean to the functionality of the site?

Just in relation to this: CSS and divs are not really meant as improvements to functionality to a site. You can have a site function any way you want using tables or divs. It may be easier in one or the other, but again that's not the point.

On the third or fourth slide in the link I posted, it says CSS & divs are better because it:

• makes your pages load faster
• lowers your hosting costs
• makes your redesigns more efficient and less expensive
• helps you maintain visual consistency throughout your sites
• gets you better search engine results
• makes your sites more accessible to all viewers and user agents
• and gives you a competitive edge (that is, job security) as more of the world moves to using Web standards.

I think that's a good list of reasons to learn CSS and div layouts.

DonkeyStyle \o/

Serbian wrote:

I think that's a good list of reasons to learn CSS and div layouts.

tbh I think only two of those relate specifically to using div layouts...

• makes your sites more accessible to all viewers and user agents
• and gives you a competitive edge (that is, job security) as more of the world moves to using Web standards.

The others are IMHO benefits that you could get by using CSS with a table layout.

If it's difficult to do, and you get a special (W3C) badge for it... then you can be sure people will do it no matter how little they care about blind people.
But I'd say anyone who depends on web development as their career will want to know how to layout a site without tables, just incase the whole thing kicks off very suddenly and web accessability laws are put in place... I mean they can't risk losing contracts and not being able to eat for a month while they learn div layouts. :eek:

Serbian

Personally I feel they all relate to using CSS layouts. "Helps you maintain visual consistency throughout your sites" is probably stretching it as you can do that with tables easily, but the rest I would agree with. You should try making a simple enough page with tables and CSS, then make the same page with divs and CSS and see the difference in file size.

I'd say the difference would be pretty big, plus the 'presentation' (i.e. CSS) is cached with divs, but the table is part of the 'presentation' so it needs to reload each time. Obviously you are comfortable using CSS and tables and not convinced about the benefits of moving to divs and that's cool, but I do think it's worth reading the article above as I feel it makes a lot of sense and was ultimately what made me cut tables out of my layouts.

BizzyC

Interesting reading, thanks Serbian.

kstanl

Accessibility, universality, future-proofing... that's why they're called Web standards and why they're so important. Other advantages include load times, separation of content from presentation... the list could go on forever. As Nike say: just do it

DonkeyStyle \o/

Serbian wrote:

You should try making a simple enough page with tables and CSS, then make the same page with divs and CSS and see the difference in file size.

Yeah, the html file gets smaller and the css file gets bigger
I find the biggest savings are from replacing those awfull font tags... where as if you're doing a complicated div layout, you can really end up with a massive stylesheet... which, can in effect make your first page take longer to load if the stylesheet includes a lot more definitions than are used on the initial page... it's hit and miss wheather you'll recoup this bandwidth depending on how many other pages each user visits.
Some guy tested this theory aswell, I can't remember the link, but I think dahamsta posted it in a previous tables vs div's rant thread... there were a lot of very good points made against div layouts.

Serbian wrote:

Obviously you are comfortable using CSS and tables and not convinced about the benefits of moving to divs

I've already moved to divs, I just don't buy a lot of the hype surrounding them... they're good, but way overrated.

kstanl

DonkeyStyle \o/ wrote:

Yeah, the html file gets smaller and the css file gets bigger

Yeah, but the CSS gets cached.

DonkeyStyle \o/ wrote:

I've already moved to divs, I just don't buy a lot of the hype surrounding them... they're good, but way overrated.

:eek: Get yourself a copy of this maybe: http://www.zeldman.com/dwws/ It explains the advantages of semantic markup in greater detail.

DonkeyStyle \o/

kstanl wrote:

Yeah, but the CSS gets cached.

Yeah I know.
The example I was reading took that into account... ie. does removing 20 <tr><td>'s from each html page (and adding <div id="blah></div> a few times lets not forget) really ballance out versus the size of an external style sheet that contains div definitions only used in a selection of 50 other pages, when the user only views an average of 3 or 4 pages.

We're talking chump-change here for most sites anyway... how many sites get so many impressions per month that an extra 5kb per visitor is going to make an impression on their hosting costs?

makes your pages load faster: If your page is already pretty heavy, with images and text content, the loading speed gains from using <div> instead of <table> will be imperceptible... so while this may be technically true, you'd get more page-loading-speed gains from increasing the compression on one your jpgs.
(Note this thread is talking about <div> vs <table>, not the use of CSS vs not using it at all.)

I'm not anti-CSS by any means, I just get tired of reading the same overstated (almost alarmist) claims by the fanatics.

lowers your hosting costs: again, may not be true... like if you're on a hosting plan that gives you X bandwidth per month at a fixed price... if you're already using their lowest plan, your hosting won't get any cheaper.

makes your redesigns more efficient and less expensive: for someone who's a CSS-P pro sure, but how many designers spend unneeded time (and hence money) debugging cross-browser issues because of differing CSS interpretations?
Granted this isn't CSS's fault, but it's a problem with using <div>s over (IMHO) less buggy tables.
So again, may or may not be true depending on how well your designer/coder(s) know their CSS hacks.

helps you maintain visual consistency throughout your sites: true for CSS in general, but getting a consistant layout with tables isn't exactly rocket science... especially if your pages are mostly generated by a single server-side script.

gets you better search engine results: another relative term... how much better? one place? two thousand places?
Does this also assume the site was so badly designed beforehand that web bots had a hard time with it?

makes your sites more accessible to all viewers and user agents: this is the only point that I fully agree with... this is the real beauty of pure CSS. (ie. div layout)

As I said, I'm not against CSS or using div's ... it's just the dogma that pisses me off.
I don't think a lot of these CSS fan-boy points really apply to css+div versus css+tables. (apart from the user agent one)

kstanl

I am actually pissing myself laughing here. Someone give me a nappy.

rsynnott

I hadn't realised tables still had a lobby group...

(By the way, my adoring fans will please note that I haven't been gnawed to death by Smeggle's crack legal team, just yet)

P&L

Fair enough Donkeystyle, I think it's just a little bit of misunderstanding here, will try to clear up some things as I'm aware of them.

DonkeyStyle \o/ wrote:

makes your pages load faster: If your page is already pretty heavy, with images and text content, the loading speed gains from using <div> instead of <table> will be imperceptible... so while this may be technically true, you'd get more page-loading-speed gains from increasing the compression on one your jpgs.
(Note this thread is talking about <div> vs <table>, not the use of CSS vs not using it at all.)

I'm not anti-CSS by any means, I just get tired of reading the same overstated (almost alarmist) claims by the fanatics.

The reason a CSS page loads quicker than a table is that the browser needs to complete its reading of the table before it can render any of it. If you take into account that lots of table layouts multi-nest and then add images and a lot of content, this can add up to quite a wait. The comparison here has been proven many times over by simple tests.

lowers your hosting costs: again, may not be true... like if you're on a hosting plan that gives you X bandwidth per month at a fixed price... if you're already using their lowest plan, your hosting won't get any cheaper.

right, but compare that to a successful website, where you are pushing you bandwidth every month. But from a bigger perspective, if the hosting companies Bandwidth costs are getting lower, then that saving can be passed on to you and me through more competitive price options

makes your redesigns more efficient and less expensive: for someone who's a CSS-P pro sure, but how many designers spend unneeded time (and hence money) debugging cross-browser issues because of differing CSS interpretations?
Granted this isn't CSS's fault, but it's a problem with using <div>s over (IMHO) less buggy tables.
So again, may or may not be true depending on how well your designer/coder(s) know their CSS hacks.

CSS - one file - total presentational control

helps you maintain visual consistency throughout your sites: true for CSS in general, but getting a consistant layout with tables isn't exactly rocket science... especially if your pages are mostly generated by a single server-side script.[/b]

Your point here is valid to a certain extent, but comparing SS scripting to CSS - the latter is requires a much higher level of expertise, and IMO much more work and is more difficult to implement.

gets you better search engine results: another relative term... how much better? one place? two thousand places?
Does this also assume the site was so badly designed beforehand that web bots had a hard time with it?

It's all about Semantics, info inside tables is not considered important to a search engine compared to info outside them - it's that simple.

makes your sites more accessible to all viewers and user agents: this is the only point that I fully agree with... this is the real beauty of pure CSS. (ie. div layout)

remember 'user-agents' includes Search Engines! like all of the points above this is directly related, if you research how and why this last statement is true, you'll reach a better understanding of the other advantages too.

Does this help?

DonkeyStyle \o/

P&L wrote:

Fair enough Donkeystyle, I think it's just a little bit of misunderstanding here, will try to clear up some things as I'm aware of them.

Ah good, someone who realises how a discussion works... rsynnott and kstanl, I'll take your well made 'mocking laughter' points onboard when I figure out how they make the above claims non-exaggerated.

The reason a CSS page loads quicker than a table is that the browser needs to complete its reading of the table before it can render any of it.

Shouldn't they say that it begins to render more quickly then?
If you're talking about 'loading', I consider the time it takes to fully download a page and its contents to be 'loaded'.

right, but compare that to a successful website

I've already acknowledged more successfull websites, my example was that this point isn't nesessarily true for everyone... yet it's stated as fact.

But from a bigger perspective, if the hosting companies Bandwidth costs are getting lower, then that saving can be passed on to you and me through more competitive price options

Still, this isn't a direct result that's guarenteed from one person switching to div layouts from tables.

CSS - one file - total presentational control

The same could be said for having one php file that gets included in several other php files, that generates countless thousands of pages.
All I'm saying here, is that maintaining a consistant look and feel throughout a site is something major sites didn't seem to have a problem with in the first place... I never at any stage thought I might have left boards.ie, but wasn't sure because the tables they use make the site seem so different from page to page.

Your point here is valid to a certain extent, but comparing SS scripting to CSS - the latter is requires a much higher level of expertise, and IMO much more work and is more difficult to implement.

I agree with this, although I suspect you meant to say 'former' instead of 'latter'

Does this help?

Yeah, good points made... but as I said in my previous posts, I don't disagree with these being technically true, (and they're more true for some sites than for others)... it's the way the advantages are put accross, stating minor possible improvements as absolute gospel, and guarenteed to stop the earth from imploding.
It reminds me of a bad infomercial sometimes.

I'm going to make a quick exit before this turns into a make-fun-of-the-idiot session... I've seen what happened to smeggle and I don't like where this is going. :eek:

DonkeyStyle \o/

Some very good points made in this post by the way...
http://www.boards.ie/vbulletin/showpost.php?p=2421700&postcount=42
Seems a lot of people have flip-flopped since the last time this issue was bandied about.

P&L

LOL! Donkeystyle, I was actually about to reference that same post aswell!

My point is, I don't think tables are Satan's Spawn (did I jump down your throat? - no). I do know CSS to be better all round method for presenting web pages, but what is the point in me saying that without trying to explain it or back it up? As you said, we're here for discussion.

BTW, I havn't done any flip-flops, read my post in full, I said I "wouldnt be caught dead using tables "

Hey, I hate the preaching too from either side! I think you're the same, and I understand why you have been turned off by CSS layouts. Why would I even bother with this discussion? (that's been had 1000 times already) cos I think you could be enjoying your CSS more, if you understood it a little more - without having it rammed down your throat.

Anyway, this kind of stuff is irrelavant to the thread... let's get back to it.

Re: the Speed of page loading:
What we're really talking about here is having your content display on the visitors site ASAP (i.e. when it takes too long... they might navigate away before they even see anything)

Re: Bandwidth costs:
Less bandwidth used = less bandwidth costs. You are trying really hard here though

Re: Consistent look
The best example really is the zen garden, one HTML page to thousands of completly different presentation styles, sorry I can't see any comparison to this total simplicty with Server Side Scripting.

AND, I meant the latter but then that was and is my opinion, cos I havnt had enough exposure to PHP etc.

One last point, I am taking it up from you that you have simply replaced your tr's and td's with div's, am I getting this right?
If so, this is not the way to make the transition from table-layouts to CSS layouts! and it would be no wonder you don't fully see or have experienced the full benefit of CSS design.

Take a look at my personal homepage (please ignore how ugly it is, I'm not too good at design ) see how many divs I use? notalot and only DEEP into the content for some post metadata (4 actually, one per post and one for the Next and Prev links)

Now that page in tables would be 5 or 6 times the size and MUCH more difficult to manage

BizzyC

It seems that I'm of the same opinion of DonkeyStyle.

I haven't actually used CSS for layout before, but looking into it I thought that the "advantages" of doing away with tables would only make a real difference to big sites with a lot of traffic.
I got a bit confused by the preaching, cause I thought there was some huge difference that I was missing.

It's not something I'll be taking up soon, but I will in the future, when I start designing more.

At the moment I'm happy to use tables, since the only sites I'll be working on will be fairly small, and have low bandwidth costs anyway.

P&L

sorry for getting so bogged down in the details BizzyC...

The reason to go with CSS rather than tables is not really about Bandwidth (that's just a minor advantage), the reason for, as Donkeystyle said, is about Accessibility.

There are two types of Accessibility:
1. human (making you site accessible to everyone that you can)
2. Machine (making your site relevant to Search Engines

The question is, how much do you care about either?
If the answer is "a little bit more than not-at-all" then CSS is the way to go IMO

The other factor that you might or might not care about is if you ever wanted to get a job wotrking for a professional Web firm. I don't think any modern progressive company will take you too seriously these unless you're good with CSS

Here's a great fact about how many people benefit directly from Accessibility

The number of users affected is larger than you think

Roughly one person in ten has a physical impairment that hinders them using a computer. These include many older people (55+) who are inevitably experiencing reduced power of their eyes, ears and fingers. Yet these people make up a large (19%) and growing percentage of the population and are typical users of the Internet, computer applications, mobile phones, bank cash machines, etc

As many as 25% of Irish adults are functionally illiterate, meaning that they have a low level of language understanding and require down-to-earth instructions and information. Up to 8% of people have some form of dyslexia and, for many people, English is not their first language

Add to this the number of people who are in a noisy environment, using poor equipment, have forgotten their glasses, are suffering from a hangover or are just plain stressed out, and it's not hard to realise that most people are impaired some of the time and some people are impaired most of the time.

From ncbi

kstanl

DonkeyStyle \o/ wrote:

rsynnott and kstanl, I'll take your well made 'mocking laughter' points onboard when I figure out how they make the above claims non-exaggerated.

I don't think I'd dignify your response by refuting any of your claims. You just keep doing what you're doing.

BizzyC

P&L wrote:

sorry for getting so bogged down in the details BizzyC...

The reason to go with CSS rather than tables is not really about Bandwidth (that's just a minor advantage), the reason for, as Donkeystyle said, is about Accessibility.

There are two types of Accessibility:
1. human (making you site accessible to everyone that you can)
2. Machine (making your site relevant to Search Engines

The question is, how much do you care about either?
If the answer is "a little bit more than not-at-all" then CSS is the way to go IMO

The other factor that you might or might not care about is if you ever wanted to get a job wotrking for a professional Web firm. I don't think any modern progressive company will take you too seriously these unless you're good with CSS

Well that's the thing,
those are reasons why I plan to learn it.
At the moment though, it's not really worth the time and effort.

DonkeyStyle \o/

P&L wrote:

Hey, I hate the preaching too from either side! I think you're the same,

Bingo.
It just melts my brain to hear people harping on about div layouts like they're Gods gift, without acknowledging the things that make it absolutely head-wrecking... a bit more honesty, a bit more ballance, a bit less fanaticism.

P&L wrote:

and I understand why you have been turned off by CSS layouts.

I'm not turned off by them as such, I've been experiencing the joy of renaming my style sheet and watching the html magically turn to layout-less plain text
Then creating a new style sheet and transforming the layout completely without touching the html at all... its nice to be able to do that after watching it on zen garden for so long.
Like yourself I'd feel dirty using tables now... although I'm not sure if that's because of the advantages of divs, or because the css fan-boy doctrine has guilt-tripped me out of using tables.

kstanl wrote:

I don't think I'd dignify your response by refuting any of your claims.

This is something I've seen happen a lot when the question div's vs tables comes up... people just get ridiculed and laughed off the stage... while only a few have the patience to educate.

Here's that site I was talking about earlier...
http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx
Maybe he's full of shít, but it's interesting none the less.

DonkeyStyle \o/

P&L wrote:

One last point, I am taking it up from you that you have simply replaced your tr's and td's with div's, am I getting this right?

Dear God no! :eek: I only use about 4 or 5 divs for a basic layout.

kstanl

DonkeyStyle \o/ wrote:

This is something I've seen happen a lot when the question div's vs tables comes up... people just get ridiculed and laughed off the stage... while only a few have the patience to educate.

Buy a book.

BizzyC

kstanl wrote:

Buy a book.

I made a thread asking for info, why did you bother posting if you weren't actually going to say anything usefull?

You may have a chip on your shoulder, but take it somewhere else, I was looking for some help.


Thanks for the info and links everyone.
I'll give them a good reading.

kstanl

BizzyC wrote:

I made a thread asking for info, why did you bother posting if you weren't actually going to say anything usefull?

Oh do be silent.

First of all, I wasn't talking to you. Just because you start a thread, doesn't mean the world suddenly revolves around you.

Secondly, my advice was useful. If some of the people are too bloody thick regarding the benefits of web standards, then they should get some relevant reading material, look it up online, go back to college or maybe think about an alternative career.

BizzyC

Actually, I apologise.
I was responding to your last couple of posts, didn't see your first few which were helpful.