Dummy question - why divs over tables?

Seanie M

Yes, a dummy here asking. I know Web 2.0 says divs are the way to go, but why? I'm not looking for opinions, I am looking for answers. So, so many sites still come with tables in their layout (including mine) over divs. My grasp on divs is not the best on the planet, so how about tutorials on them online? Also, does anyone have good resources for self-teaching php-based design?

Thanks in advance,

Seanie.

John_Mc

Seanie M wrote: »

Yes, a dummy here asking. I know Web 2.0 says divs are the way to go, but why? I'm not looking for opinions, I am looking for answers. So, so many sites still come with tables in their layout (including mine) over divs. My grasp on divs is not the best on the planet, so how about tutorials on them online? Also, does anyone have good resources for self-teaching php-based design?

Thanks in advance,

Seanie.

Divs load faster than tables. They are also far far easier to maintain than tables.

I find using Divs with CSS a lot less time consuming than tables, and more powerful in the sense that I can achieve more.

These reasons are reasons enough for me to use divs instead of tables. Not to mention web development standards.

Seanie M

Thanks John, the time-load adaptation was one I did NOT know about. I'm a whizz designing in a tables-based format myself, but I guess that's because I know it so well.

Seanie.

John_Mc

Seanie M wrote: »

Thanks John, the time-load adaptation was one I did NOT know about. I'm a whizz designing in a tables-based format myself, but I guess that's because I know it so well.

Seanie.

No worries Seanie, you'll adjust to using DIVs pretty fast I'd imagine. You'll never look back from it once you have a grasp of it

p

The main reason is that your design is tied too closely to the HTML. If you want to redesign a site, then you need to change a lot of HTML. If you use CSS, then you can generally just change portions of the CSS, without having to go deep into editing every single page. CSS layouts with DIVs aren't perfect. Some things are easier to do with tables, but generally speaking using CSS is much more powerful and flexible. Once you use CSS for awhile, and get over the initial learning curve, then you'll never go back.

Here's a good tutorial on using the float property in CSS. It's a very good intro.
http://css.maxdesign.com.au/floatutorial/

Seanie M

Thanks for the insight p, and the link, much apreciated.

Seanie.

louie

As mentioned DIV's are easier to maintain and load in the browser window.
There are cases (like tabular data) where tables are a must, but otherwise no reason not to use div's.

For PHP tutorials try http://www.php.net/manual/en/ an excellent resource to functions, etc...

Eoin

The main reason is that a table is for displaying data in a tablular format. There is now more emphasis placed on making mark-up more semantically correct - in other words using the meaningful tag for the information you are displaying.

It's like the difference between using <h1> and a <div> styled in the same way. They both look the same, but the h1 denotes that it's the main heading of a page to search engines, text-to-speech browsers etc.

Axwell

www.lynda.com for online video tutorials on pretty much anything you could want and http://www.w3schools.com/ is a good reference

tomED

John_Mc wrote: »

Divs load faster than tables.

Just to clear things up for the OP. That's completely untrue.

The reason in theory a site with DIVs will load faster than one with tables is because there is less code, hence a smaller file.

However, badly constructed DIVs can use just as much code.

Just felt that needed to be cleared up!

John_Mc wrote: »

I find using Divs with CSS a lot less time consuming than tables, and more powerful in the sense that I can achieve more.

Again I'd have to disagree with this. No matter how proficient you are with CSS, if it's a complex design tables are much quicker to knock up.

I do agree that CSS is powerful, but not always as flexible.

John_Mc

tomED wrote: »

Just to clear things up for the OP. That's completely untrue.

The reason in theory a site with DIVs will load faster than one with tables is because there is less code, hence a smaller file.

However, badly constructed DIVs can use just as much code.

Just felt that needed to be cleared up!



Again I'd have to disagree with this. No matter how proficient you are with CSS, if it's a complex design tables are much quicker to knock up.

I do agree that CSS is powerful, but not always as flexible.

Well a smaller file size means that it will be downloaded & parsed faster... so it's no completely untrue is it?

When comparing two different techniques in performance I'd take it that they were both implemented to an equal standard.

Just felt I had to clear that up!

tomED wrote: »

Again I'd have to disagree with this. No matter how proficient you are with CSS, if it's a complex design tables are much quicker to knock up.

I do agree that CSS is powerful, but not always as flexible.

Yeah, to create using tables may be slightly quicker - but it will be far harder to maintain & update further down the road.

Obviously, there are times when using tables are necessary, E.G Forms. But a DIV based layout is by far the best method and I can't understand why you'd want to convince the OP otherwise.

Eoin

Tables don't need to be used for forms - the <dd> tag is probably as, if not more, appropriate. That's splitting hairs a little though.

John_Mc

eoin_s wrote: »

Tables don't need to be used for forms - the <dd> tag is probably as, if not more, appropriate. That's splitting hairs a little though.

I find Tables far easier for this type of thing than Definition description tags.

Seanie M

This is the thing, using some classes for images, and cells in cells in a table layout, I have been able to create quite good looking sites where div's should be used, so I am told. I have also had no problem editing them when I had to if e.g. the layout was to be altered later by request. Personally, my preference is tables - I am quick and proficient with them in creating my sites, but I also want them to be as valid as possible, and this is why divs must come into it, right?

Seanie.

P.S. thanks for the feedback, even if bantering amongst yourselves, it is appreciated.

Seanie M

John_Mc wrote: »

I find Tables far easier for this type of thing than Definition description tags.

My sentiments also.

Eoin

John_Mc wrote: »

I find Tables far easier for this type of thing than Definition description tags.

Totally - me too, but it's back to using tables for layout. I completely suck at CSS layout myself by the way, but trying to change to divs where I can.

This book helped me a little though, if only to recognise when certain tags should be used.

tomED

John_Mc wrote: »

Well a smaller file size means that it will be downloaded & parsed faster... so it's no completely untrue is it?

I only had a problem with your statement ("divs load faster than tables"). Which is completely untrue.

The cleanliness of your CSS file and div structure is o key importance to the parsing, so again I wouldn't say it is parsed faster either. It's all down to how well it's done!

The Mighty Ken

There are no excuses for using tables for anything other than tabular data in this day and age. If you can't mark-up your designs without using tables for layout then either your design or front end development skills are lacking - or both.

Malice

I never learnt how to use tables to lay out page designs so I can't relate when people say it's easier. I find laying out DIVs with appropriate floats, widths, heights and margins set in a stylesheet is intuitive and straightforward (but can be a whore when dealing with IE6 and it's unique way of dealing with some things). With that said, I do use tables when required to display tabular data as they were intended.

The Mighty Ken wrote: »

There are no excuses for using tables for anything other than tabular data in this day and age. If you can't mark-up your designs without using tables for layout then either your design or front end development skills are lacking - or both.

A few months ago I would have said that was harsh but I've had the dubious pleasure of doing some maintenance work on a few existing websites recently and I have to say that there seems to be a lot of terrible website designers out there. Each and every site I dealt with was a royal pain. Extra <tr> and <td> tags without the files being indented properly, use of spacer.gif over and over again, font details specified per paragraph and per cell. Aargh!

tomED

The Mighty Ken wrote: »

There are no excuses for using tables for anything other than tabular data in this day and age. If you can't mark-up your designs without using tables for layout then either your design or front end development skills are lacking - or both.

There are plenty of excuses. Not to mention the many hacks out there to get your CSS working cross browser. We could list the pros and cons here until the cows come home and I don't think everyone would ever fully agree.

There's a lot of bull surrounding the reasons why you should design CSS based websites.

The bottom line is, the web is moving this way. For anyone starting out I would recomend they spend time learning how to develop a CSS based website.

p

Seanie M wrote: »

This is the thing, using some classes for images, and cells in cells in a table layout, I have been able to create quite good looking sites where div's should be used, so I am told. I have also had no problem editing them when I had to if e.g. the layout was to be altered later by request. Personally, my preference is tables - I am quick and proficient with them in creating my sites, but I also want them to be as valid as possible, and this is why divs must come into it, right?

If you ever want to make a living out of web design, then you need to know how to use CSS & DIVs for layout. Using tables is fine for amateurs or hobbiests but doesn't result in sites that are best practice. Also, as I said before, once you actually learn CSS properly, you'll find that 99% of times, CSS is much better than tables. Unless you're a professional, I wouldn't worry about it.

Here's another good tutorial on the basics of CSS layout:
http://www.maxdesign.com.au/presentation/process/

Malice

tomED wrote: »

There are plenty of excuses.

tomED wrote:

There's a lot of bull surrounding the reasons why you should design CSS based websites.

Can you back up either of these statements? I'm not trying to start an argument, I'm genuinely interested anything web-design orientated that I have read generally suggests the opposite.

tomED wrote:

Not to mention the many hacks out there to get your CSS working cross browser.

They aren't specific to table-based or CSS-based designs.

tomED wrote:

We could list the pros and cons here until the cows come home and I don't think everyone would ever fully agree.

This is probably quite true .

tomED

malice_ wrote: »

Can you back up either of these statements? I'm not trying to start an argument, I'm genuinely interested anything web-design orientated that I have read generally suggests the opposite.

They aren't specific to table-based or CSS-based designs.
This is probably quite true .

Yes sure. But as I said, we could sit here all day and debate these issues! Also where to start is the problem!

I'll start with one issue that I'm sure people here have come across. Potentially someone might even have a nice easy, cross browser hack to use (and this would make this thread highly useful!).

Expanding table width replication. I haven't seen anything other than hacks that do this automatically. And these hacks aren't very cross browser compatible.

On other non-specific issues, I'm currently writing an article on my blog that I hope to have finished soon that will cover the major issues surrounding the latest coding standards.

harlemangel

Having come from the 'pre-div' era where most sites I built were table based, I find that I could never go back to table based layouts, for the simple reason that pure CSS controlled pages are so much easier to maintain, and are also much less heavy in terms of bandwidth.

CSS allows to a certain extent, seperation of code from content. Which means that changes that need to be made to structure of pages can be done through the stylesheets.

I know the debate is whether to use 'divs' or 'tables' (<tr>,<td> etc..), but consider a very simple scenario (purely as an example) where a client wants the menu on the right instead of the left. To do this would normally mean editing the html and copying the <td> column from one place to another. On a site with multiple pages, this could be very time consuming. With divs, a simple float would take care of that, across all pages at once.

Again, I am from an era where tables were king, but I can see the limitations that I had to endure back then, and I woudnt go back. The only drawback however is the cross browser issue. But IE7 & FF seem to be getting closer with each release. IE6 vs IE7 in some cases just bewilders me!

mewso

John_Mc wrote: »

I find Tables far easier for this type of thing than Definition description tags.

Most examples of forms will use a fieldset these days. I'm not sure where the definition list idea comes from at all. To me thats not semantically correct. It's like saying the input field is the definition description of the definition term (label) "username" for example. Using a fieldset a label and an input is a fairly good starting point imo.

<fieldset>
    <legend>Login</legend>
    <label for="username"></label>
    <input id="username" name="username" type="text" />
</fieldset>

It doesn't take alot of css to markup that form making the labels display in block format, giving them a width, floating them left, clearing both and floating the inputs left too etc. Pretty straightforward. Somtimes to get some extra control you might introduce a wrapping tag around each label/input pairing.

Might not have looked clearly here but one of the key arguments for css layout is accessibility. Screen readers can have issues reading through a table but a properly ordered layout using divs can be easier to follow. One of the things we should do with our sites is disable css to see if the site still makes sense. The above form is very accessible friendly too using the label's for attribute to point a screen reader to the relevant input. If you google css forms you'll find lots of good examples that cover almost any need you might have for forms.

Semantics is a bigger and bigger issue and this applies to the "css off" idea too. Even using divs it's important to give them id values that make sense semantically. Excellent discussion on sitepoint here.

The other thing is when you use tables correctly (i.e. for tabular layout) it's important to use all the helpful tags and attributes so that the tables can be read properly by all - http://www.usability.com.au/resources/tables.cfm

I would encourage everyone to pay a visit to the Sitepoint forums on a regular basis as there some excellent discussions on these kinds of things. In particular the HTML/XHTML and CSS forums.

Seanie M

Thanks for the all the input fellow posters! Much appreciated.

In hindsight, I think I should have added that I am savy with CSS (styles template and so on), my quandry is more to do with replacing tables with divs. Some of the links given above are half relevant, some are very basic (for my needs) regarding CSS.

Seanie.

P.S. Funny thing, the w3schools link doesn't feature divs actually (at a good glance through anyway).

p

Both of these books would be quite good for you. They're aimed at people who are comptent with web stuff, but maybe not for CSS for layout and web standards:
http://www.zeldman.com/dwws/
http://simplebits.com/publications/solutions/

p

Both of these books would be quite good for you. They're aimed at people who are comptent with web stuff, but maybe not for CSS for layout and web standards:
http://www.zeldman.com/dwws/
http://simplebits.com/publications/solutions/

Liam Byrne

Was wondering when someone would mention the auld "label" tag......

Apart from the chronic repositioning and re-layout if to resize or merge cells, there's one other factor;

CSS usually results in less markup; it's true that this results in faster page loads due to smaller filesize, but it also does something else - the proportion of content to markup skews in your favour and Google doesn't have to do anywhere near as much work to make sense of your content, resulting in the potential for better search results positioning (caveat : all else being equal).

charybdis

The real question isn't why divs are superior to tables, but why well thought out, correct, semantic markup is superior to tables. One could argue that using divs in replacement for table cells is little better than using tables.

Using correct content/presentation separation is demonstrably better in all regards, but the idea of table based layout persists as a result of the efforts of unenlightened folk who depend on this way of thinking for quick-n-dirty layout techniques. Frankly I'm astonished by the amount of people suggesting tables are sufficient or better, I sincerely hope they are not paid or trusted with their knowledge in this regard.

http://www.webstandards.org/learn/faq/ would be a good place to start learning about the "why" instead of the "how".

The Mighty Ken

tomED wrote: »

There are plenty of excuses.

I don't believe there are. Not valid excuses anyway. Everyone should be designing with the future in mind. Backwards compatability for broken browsers (e.g. IE) should be a foot note and catered for with unobtrusive enhancements using UJS, etc.

Liam Byrne

Maybe that's what tomED was getting at ? He didn't use the word "reasons" - he used the word "excuses".

tomED

Liam Byrne wrote: »

Maybe that's what tomED was getting at ? He didn't use the word "reasons" - he used the word "excuses".

Thanks Liam - yes I did mean excuses! however....

The Mighty Ken wrote: »

Everyone should be designing with the future in mind. Backwards compatability for broken browsers (e.g. IE) should be a foot note and catered for with unobtrusive enhancements using UJS, etc.

.... I don't agree with this. And my reasons are based around accessibility.

Accessibility is about access for all.

Which is why my personal preference would be to build sites that usable in all browsers not just modern "working" ones as the mighty ken puts it.

I personally feel backwards compatibility is as important if not more, than being standards compliant.

Sending people with activity limitations to another "door" by using altervative pages is also against the whole principle of Accessibility. So by claiming your site is accessible because it's coded to the latest standards but has a "foot note" for people with older browsers is just a complete farce.

The Mighty Ken

tomED wrote: »

Thanks Liam - yes I did mean excuses! however....



.... I don't agree with this. And my reasons are based around accessibility.

Accessibility is about access for all.

Which is why my personal preference would be to build sites that usable in all browsers not just modern "working" ones as the mighty ken puts it.

I personally feel backwards compatibility is as important if not more, than being standards compliant.

Sending people with activity limitations to another "door" by using altervative pages is also against the whole principle of Accessibility. So by claiming your site is accessible because it's coded to the latest standards but has a "foot note" for people with older browsers is just a complete farce.

Well it's a catch 22 situation really. You're supporting technologies that are hindering accessibility for the sake of accessibility.

My sites will always be accessibile to those with special requirements and those who need it most. Stubborn IT departments who refuse to support anything other than outdated browsers like IE6 don't get the same special treatment unfortunately. I'm a firm believer in moving forward.

tomED

The Mighty Ken wrote: »

Well it's a catch 22 situation really. You're supporting technologies that are hindering accessibility for the sake of accessibility.

Yes - accessibility should be more important than the latest coding standards.

The Mighty Ken wrote: »

My sites will always be accessibile to those with special requirements and those who need it most. Stubborn IT departments who refuse to support anything other than outdated browsers like IE6 don't get the same special treatment unfortunately. I'm a firm believer in moving forward.

Firstly, you are completely missing the point with your "stubborn IT departments" comment. The web isn't only used by people who have IT departments.

Plus you are forgetting the fact that it might not be possible for someone to update their browser.

So how you can say your sites are accessible is beyond me. Let me guess, they've passed WCAG 1.0? This is generally what your typical webmaster means when he/she says their website is accessible.

Well it's time to wake up and smell the coffee, WCAG are only guidelines, they don't make your website accessible whether it has a triple A rating or not.

Your response is a prime example of many webmasters - in fact, it can be likened to the old "sure no-one uses mozilla anyway" argument in the past.

Oh and - it's not catch 22. You can build an accessible site that will work in all browsers and pass the WCAG guidelines, only problem is it will have to be HTML as opposed to xHTML.

The Mighty Ken

tomED wrote: »

Yes - accessibility should be more important than the latest coding standards.

Actually they should go hand in hand. That was the point I was trying to make.

tomED wrote: »

Firstly, you are completely missing the point with your "stubborn IT departments" comment. The web isn't only used by people who have IT departments.

I think you're completely missing my point but not to worry. The vast majority of people who will still be using outdated browsers (such as IE6) in the near future will be larger corporates and government depts who refuse to update their browsers for security reasons. I won't be catering for their broken technologies.

Having said this, every site I build is accessible to the nth degree. I generally use unobtrusive fall-backs for older browsers but I refuse to use hacks and intrusive workarounds for non-compliant browsers. For the record, all of my (standards-compliant) sites will display cross-browser, including text-based browsers such as Lynx as well as screen readers and other assistive technologies.

In my last job I got calls from people still using IE4 and quite a few still using IE5. Do you still support these browsers, tomED? If not, why not? Where do you draw the line?

tomED wrote: »

Plus you are forgetting the fact that it might not be possible for someone to update their browser.

Like who? Aside from the examples I gave above, who refuse to upgrade their browsers.

tomED wrote: »

So how you can say your sites are accessible is beyond me. Let me guess, they've passed WCAG 1.0? This is generally what your typical webmaster means when he/she says their website is accessible.

No need to attack my integrity. FWIW, I've been building fully accessible sites for a very long time and I know what I'm talking about. But I'm not here to defend myself...

tomED wrote: »

Well it's time to wake up and smell the coffee, WCAG are only guidelines, they don't make your website accessible whether it has a triple A rating or not.

I never said anything about WCAG. You're having a masturbatory conversation with yourself. All hot air.

tomED wrote: »

Your response is a prime example of many webmasters - in fact, it can be likened to the old "sure no-one uses mozilla anyway" argument in the past.

No it's not. It's a prime example of many of the leading webmasters on the planet who are advocating standards and best practice in the delivery of world class Web design. Folk such as Zeldman, Clear Left... Andy Clarke is a particular advocate of accellerating the push in standards. I suppose everyone's wrong except you though, eh?

tomED wrote: »

Oh and - it's not catch 22. You can build an accessible site that will work in all browsers and pass the WCAG guidelines, only problem is it will have to be HTML as opposed to xHTML.

Eh.... WHAT?

tomED

The Mighty Ken wrote: »

Actually they should go hand in hand. That was the point I was trying to make.

I agree they should go hand in hand. But if someone can't view/use a site because it's all over the place in an browser, the site is not accessible.

The Mighty Ken wrote: »

I think you're completely missing my point but not to worry. The vast majority of people who will still be using outdated browsers (such as IE6) in the near future will be larger corporates and government depts who refuse to update their browsers for security reasons.

What a ridiculous and naive statement. The last people to upgrade are those who can't afford to buy a new computer or don't have a high speed internet connection where they can download the browser for free.

The Mighty Ken wrote: »

I won't be catering for their broken technologies.

Another ridiculous and naive statement. Shows that you really don't care about accessibility.

The Mighty Ken wrote: »

Having said this, every site I build is accessible to the nth degree. I generally use unobtrusive fall-backs for older browsers but I refuse to use hacks and intrusive workarounds for non-compliant browsers. For the record, all of my (standards-compliant) sites will display cross-browser, including text-based browsers such as Lynx as well as screen readers and other assistive technologies.

In my last job I got calls from people still using IE4 and quite a few still using IE5. Do you still support these browsers, tomED? If not, why not? Where do you draw the line?.

I'm still guessing you are confusing accessibility guidelines with accessibility. Two different things... entirely.

I give our clients information on the pros and cons on both options and let them decide. The trend lately has been to be standards compliant, but for a long time it was the complete opposite.

I personally would aim to make my sites work in IE4 yes. Our main site still has visits from people using IE2.0 - god love them....

The Mighty Ken wrote: »

Like who? Aside from the examples I gave above, who refuse to upgrade their browsers.

As per my example above.

The Mighty Ken wrote: »

No need to attack my integrity. FWIW, I've been building fully accessible sites for a very long time and I know what I'm talking about. But I'm not here to defend myself....

I never attacked you or your integrity. No-one can say they have built proper accessible sites unless they've actually worked with people with activity limitations. Plus, know what they actual meani of accessibility is.

The Mighty Ken wrote: »

I never said anything about WCAG. You're having a masturbatory conversation with yourself. All hot air....

A little immature, but none the less... You are not striking me as someone who knows what they are talking about when they will only support "work browsers" as you call it.

The Mighty Ken wrote: »

No it's not. It's a prime example of many of the leading webmasters on the planet who are advocating standards and best practice in the delivery of world class Web design. Folk such as Zeldman, Clear Left... Andy Clarke is a particular advocate of accellerating the push in standards. I suppose everyone's wrong except you though, eh?

Again you completely missed the point. If you read back you will see I'm all for standards compliant websites, but not at the cost of accessibility.

The Mighty Ken wrote: »

Eh.... WHAT?

Do i really need to repeat myself?

The Mighty Ken

You can build an accessible site that will work in all browsers and pass the WCAG guidelines, only problem is it will have to be HTML as opposed to xHTML.

Listen, I won't get dragged into an argument with you. You'll just bring me down to your level of ignorance and then beat me with experience. Besides, we're miles off topic...

tomED

The Mighty Ken wrote: »

Listen, I won't get dragged into an argument with you. You'll just bring me down to your level of ignorance and then beat me with experience. Besides, we're miles off topic...

Argument?? Ingorance??? LOL...

I think you need to look closer to home, I'm not the one beng ignorant and I'm certainly not arguing. You don't want to see the fact that your websites are only accessible in the guidelines set out by W3C and not by the true definitions of accessibility.

I agree though we are off topic - maybe this is for another day. Or maybe, you can PM with your problem on my statement and we can continue the discussion??

Eoin

Wow, the last time I saw this much handbags was when my wife made me go shopping with her in New York.

tomED

eoin_s wrote: »

Wow, the last time I saw this much handbags was when my wife made me go shopping with her in New York.

hahahahaha

Seanie M

eoin_s wrote: »

This book helped me a little though, if only to recognise when certain tags should be used.

Arrived yesterday, thanks for the tip. I began reading it last night. I must say, even to a beginner in (css) design, it is worth getting. It is helping me out as an intermediate just fine. Thanks for the input Eoin.

As to the other posts, all much appreciated. I like the debate ensuing in the last few posts too. Some good arguments, some of which I agree with, and some which make me raise more questions.

For instance, out of hair splitting, per capita of those that surf the web, what would be the number of those accessing the web with disabilities? Tables et all work fine, but just not as sharply for accessible browsing like those that div's allow. Kind of reminds me of the whole (old) debate about IE being the most widely used browser and most sites catering for it specifically, neglecting Netscape and the then-growing-in-popularity Firefox. Some competitors still make sites with only IE in mind in this day and age. Now THAT is not playing ball, whatever about accessibility...

Seanie.

Eoin

Seanie M wrote: »

Arrived yesterday, thanks for the tip. I began reading it last night. I must say, even to a beginner in (css) design, it is worth getting. It is helping me out as an intermediate just fine. Thanks for the input Eoin.

No probs - hope you find it useful. I like it because it explains why certain tags should be used as they make more sense for the data you are displaying, rather than the totalitarian approach that a lot of the standards storm-troopers take.

harlemangel

Hey Seanie_M
Bet you didnt think a simple question like yours would cause World War III?!
Handbags indeed!
H

Seanie M

harlemangel wrote: »

Hey Seanie_M
Bet you didnt think a simple question like yours would cause World War III?!
Handbags indeed!
H

Nope, I sure didn't, but you gotta love the whole freedom of speech ammendment here!