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.