Done properly not using tables for layout will indeed make the site more friendly to use for just about everyone that bothers to visit it.
Quote:
If so why are divs so impossible to use, and why is no body using divs over tables?
Divs are not impossible to use you just have to re-learn the way to do things. Think back to learing to use tables, THEY WERE NOT EASY EITHER. The whole use of tables for layout was one large complicated nonsensicle hack. It's just now you know how to do it and thus the pain of learning something new seems all the more worse.
And I'm affraid to say there there are plenty of people not using tables anymore for layout reasons.
I expect I could have found more, but I only looked for 10 seconds.
Change takes a while to happen, its probably unlikely an organisation will change a working table based layout unless they are redoing their website for other reasons.
Also take a look at this presentation, skip to the end and check out the sites conversions and the predicted bandwidth savings made by moving to CSS.
Well, as a beginner to css, I've struggled with the table issue too. I understand that structure and style should be separated (I've seen numerous benefits so far within my own pages already). However, when it comes to ditching tables (a structure element) and trying to format the same content with css, I've had trouble. It is almost as if the css specs have purposely left out tools that would make that formatting easier. I've yet to find an elegant way to replace the <BR> tag (deprecated since it effects style and doesn't belong in html) with a css property. When trying to just add a new line using css, I'm told to use a float or div's wrapped in more div's. Floats add other unwanted effects, and div's within div's adds more to the structure than it saves by removing the <BR>.
Now, I don't disagree with ditching tables... I'm doing that to my pages. I actually just need help in figuring out a clean way to switch over. Here's a simple example... I'll attach an image of what I'd like to see in my page.
The real problem here is in enforcing horizontal row integrity. This is something that tables do inherently. However, as soon as we start floating stuff that has the potential to resize or wrap we can get into difficulties. The way to ensure proper horizontal integrity is to wrap each label input pair in a clearing div. The problem is you than find you have created almost as much markup as with a table-based design. It would be nice to have a css block property enclose-floats:yes; or something equivalent.
nice to see a lot of replies to this one, and not every one has a knee jerk reaction to praising css styled divs over the table.
I know a lot can be done with css, such as this site and the lloyds tsb site mentioned earlier (the apple site uses tables by the way!!!) However when it comes to graphically rich sites such as kids site etc it is very hard to position fluid designs with divs. Take a look at the star wars site - that would be pretty difficult to do in divs especially as it is centrally aligned and takes into consideration smaller browsers.
One other thing i've found difficult is when you have a design for an 800 by 600 display with 2 columns, the heights of these columns are determined by the content within each column which the client creates thru a content system. To try and get both columns to resize to equal heights can only be achieved by javascript which i think is a bit backwards.
I know the history of the table and that it was never intended to be used for layout purposes - but i've found it does a very very good job at it. When i design a web page i generally do a mock up in fireworks or photoshop and then work out how to turn it into html. I'm want to switch to divs and am doing so but i'm finding i'm having to compromise the design to fit within the limitations of css and i don't think that's right!! Or like a table, was the internet never conceived for good design?
In terms of the question posed earlier by Darren regarding how to style some form elements take a look at:
http://www.nmisecurity.com/contact.htm
i had some success styling the form elements through an external css.
Darren, I don't think the br tag is deprecated it's quite valid to use in xhtml if closed.
It's just a replaced element that conveys no semantic or styling value and just instructs the page to render a line break.
The error seen is for it to be used where a correct semantic paragraph should have been used or an element margined for spacing requirements, not a whole heap of br tags used to force spacing.
cannon303 wrote:
and not every one has a knee jerk reaction to praising css styled divs over the table.
charming
I actually quite like the table group of elements and think they're rather nicely implemented especially when one makes use of the more obscure element detail, but used as a layout device well that's never going to supported I'm afraid, this is not to say that CSS and the div tag fully replace it's ease of use as they don't and it should be remembered that the float property was never actually conceived as a method of laying out and positioning divs.
Hugo.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Change is difficult. especially when you're changing to something that isn't perfect, and although it does many things better, there are some areas that it seems tables beats css/divs.
But it's all about a different way of thinking. when you're designing in photoshop or on paper, one needs to think about the limitations of css and browsers, and the areas you can push with xhtml and css. after all there are limitations to tables, but you know them and design around them, even if it's unconsciously.
we've all been designing with tables because there was nothing better out there. there was no real alternative. now there is. it's time to embrace the future and push css.
at the end of the day it is easier to design with tables as that is what most of us know. but it's not right, and it's not the future. it's in your interest as a developer to use css.
Ah ok, some pages do, some don't. It seems my quick look at a couple of pages, picked out the ones that don't. LloydsTsb seem to have gone overboard with the divs too, not sure I would recommend that as an example for any one to follow
It seems to me, once you get a handle on CSS, in particular when and where to use floats, absolute and relative positioning, there isn't much you can't accomplish. Sure, if you, think in terms of table based design, your design is likely to better suited or more easily implemented in tables. However, if you approach your design from a non-table perpective ... Its a square pegs and round hole sort of thing.
Take, for example, the footer at the bottom of the page thing. Put together a design that doesn't require a footer at the bottom of the page and all of a sudden the problem will go away.
Well thanks for everyones input - i am genuinely using divs to great effect but originally posted this item to see if anyone else was having anywhere near the same frustrations i was having whilst implementing them.
Although I have been in web design for some time now my original approach to it was from a design perspective and i still dont think that the client's identity or presence should be compromised or restricted by the vehicle that is being used... what if the client wants a footer???
But thanks again for everyones postings, its all valuable stuff and i think i have leared to love divs maybe just a little bit more.
They can have one. They can even have one at the bottom of the viewport. They can even have red and green flashing websites if they really really want.
Does anyone know when css3 will be implimented? and what happens after that - will new browsers come out to support it? how does that work cos i heard that Microsoft wasn't bringing out any more versions of IE and netscape seems to be dead which leaves only mozilla as a viable option on pc. Unless there are others..... (opera?)
Do not be fooled into thinking that a new version of that wretched browser will make the slightest bit of difference to the state of play, it wont, getting slightly tired of hearing people talk about it's imminent release.
Up until about sept of last year MS were stating that they had no intention of following the standards any longer and whilst there would be certain concessions made to things they acknowledge as problems such as PNG support full CSS support was not really on their minds any longer .
It also still seems unclear as to whether IE7 will be available as a separate upgrade, standalone, or whether it will only be available along with a new OS.
Regardless of any updated support for CSS, and I seriously doubt whether that will cover much if any of CSS3, IE6 will be around for a very long time and will require us to go on jumping through hoops to accommodate it.
Just to further stir things up MS have declared an interest in developing a propriatory standard of their own, which will really help things along, believe me they still want to break the back of the standards movement they will never be happy until the world bows to their way of thinking.
Hugo.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Posts: 10
Joined: 2005-05-19 Location: rochester, ny
DEBATE: divs vs tables
Posted: Fri, 2005-05-27 01:20
cannon-
Footers are still totally possible using CSS. If you're really interested in designing with CSS, you should check out Dan Cederholm's book Web Standards Solutions which really opened my eyes up to possibilities using CSS and standards-based markup. I recently redesigned a client site from a full-on table layout to CSS. I used techniques outlined in his book and cut down my lines of markup by like 65% and the design is exactly the same. Plus, logically dividing up the page, I was able to position the content portion closer to the top of the markup. Now when the Googlebot comes, he sees the most relevant content right away. In the few short weeks since I made the update, their rankings at Google have increased. Anyhow, those are just some of the benefits of CSS.
Up until about sept of last year MS were stating that they had no intention of following the standards any longer
I'm getting more and more convinced that the reasoning behind that is if you have to code to IE, then you have to follow their rules. If you follow their rules, you may want to buy their tools, and OS, and everything else.
If everyone followed the published standard then there is no reason you have to buy MS. So, take back the web or you'll have to buy your tools from them. Go Firefox!
"go firefox"? hmm... yea i agree. and firefox rules and all... but can anybody comment on the latest netscape? It's good that we all take into consideration all the potential standard compliant browsers. i believe it can compete with firefox too... or i can be wrong coz i havent really tried that, i just have read quite alot of positive feedbacks about it...
Correct me if I'm wrong but as far as I know (from reading the W3C Recommendations ) it's not a matter of not using tables anymore and replace them with CSS, it's a matter of using the tables to mark up tabular data and leave CSS for layout and giving styles to those tables.
I totally agree with the "Go FireFox" thing, I'm fed up of Microsoft's disrespect for international standards! "Leave the darkness! Get FireFox!"
Elder
Posts: 1075
Joined: 2004-02-16
Location: London
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 13:56
Done properly not using tables for layout will indeed make the site more friendly to use for just about everyone that bothers to visit it.
Divs are not impossible to use you just have to re-learn the way to do things. Think back to learing to use tables, THEY WERE NOT EASY EITHER. The whole use of tables for layout was one large complicated nonsensicle hack. It's just now you know how to do it and thus the pain of learning something new seems all the more worse.
And I'm affraid to say there there are plenty of people not using tables anymore for layout reasons.
Moderator
Posts: 11958
Joined: 2004-06-06
Location: London
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 14:37
Ah divs are impossible to use, this is where I've been going wrong then.
Really ? have a look at the underlying code for this site
Rest of copy removed due to labouring under a misconception regarding table history and disseminating inaccurate information
Hugo.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Moderator
Posts: 5577
Joined: 2005-02-22
Re: DEBATE: divs vs tables
Posted: Wed, 2005-05-25 14:58
Take a look at these two sites
www.apple.com (forgive them their tab menu at the top
)
www.lloydstsb.com
I expect I could have found more, but I only looked for 10 seconds.
Change takes a while to happen, its probably unlikely an organisation will change a working table based layout unless they are redoing their website for other reasons.
Also take a look at this presentation, skip to the end and check out the sites conversions and the predicted bandwidth savings made by moving to CSS.
On Having Layout | The One True Layout | menus by listamatic
Guru
Posts: 2679
Joined: 2004-09-01
Location: MA, USA
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 15:38
also have a look at:
www.cssvault.com
www.cssbeauty.com (these two showcase sites using CSS for layout/styling)
www.csszengarden.com (all the pages are the same html - just styled differently)
Some other big names:
www.yahoo.com
www.wired.com
www.espn.com
Here's an excellent read:
http://stopdesign.com/articles/throwing_tables/
Leader
Posts: 832
Joined: 2004-03-22
Location: Halifax, Canada
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 16:04
Also in that series is another presentation that shows how to break down a design into component parts and how to treat it with CSS:
http://stopdesign.com/present/2004/sydney/limits/?no=1
DE
David Elliott
Before you ask
LearnXHTML|CSS
ValidateHTML|CSS
Regular
Posts: 25
Joined: 2005-03-16
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 18:08
Well, as a beginner to css, I've struggled with the table issue too. I understand that structure and style should be separated (I've seen numerous benefits so far within my own pages already). However, when it comes to ditching tables (a structure element) and trying to format the same content with css, I've had trouble. It is almost as if the css specs have purposely left out tools that would make that formatting easier. I've yet to find an elegant way to replace the <BR> tag (deprecated since it effects style and doesn't belong in html) with a css property. When trying to just add a new line using css, I'm told to use a float or div's wrapped in more div's. Floats add other unwanted effects, and div's within div's adds more to the structure than it saves by removing the <BR>.
Now, I don't disagree with ditching tables... I'm doing that to my pages. I actually just need help in figuring out a clean way to switch over. Here's a simple example... I'll attach an image of what I'd like to see in my page.
What's a clean way to generate that?
Darren
[/img]
Moderator
Posts: 9190
Joined: 2004-06-30
Location: Milton Keynes
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 18:13
Read up on forms and labels - I'm no expert but I believe the <label> tag could be floated left and the <input> tag floated right.
These tags are semantic, should be used, and can be styled, removing the need for spans and divs.
Learn of the skillful; for he that teaches himself has a fool for his master - Benjamin Franklin
Elder
Posts: 1038
Joined: 2004-01-31
Location: Rock Springs, WY
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 18:23
Darren;
Have a look here http://dutchcelt.nl/test/formtest.html
<a href="http://www.powerbitwebdesign.com">Powerbit your custom web design company</a>
Leader
Posts: 832
Joined: 2004-03-22
Location: Halifax, Canada
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 18:43
The real problem here is in enforcing horizontal row integrity. This is something that tables do inherently. However, as soon as we start floating stuff that has the potential to resize or wrap we can get into difficulties. The way to ensure proper horizontal integrity is to wrap each label input pair in a clearing div. The problem is you than find you have created almost as much markup as with a table-based design. It would be nice to have a css block property enclose-floats:yes; or something equivalent.
DE
David Elliott
Before you ask
LearnXHTML|CSS
ValidateHTML|CSS
Regular
Posts: 21
Joined: 2005-01-31
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 19:47
nice to see a lot of replies to this one, and not every one has a knee jerk reaction to praising css styled divs over the table.
I know a lot can be done with css, such as this site and the lloyds tsb site mentioned earlier (the apple site uses tables by the way!!!) However when it comes to graphically rich sites such as kids site etc it is very hard to position fluid designs with divs. Take a look at the star wars site - that would be pretty difficult to do in divs especially as it is centrally aligned and takes into consideration smaller browsers.
One other thing i've found difficult is when you have a design for an 800 by 600 display with 2 columns, the heights of these columns are determined by the content within each column which the client creates thru a content system. To try and get both columns to resize to equal heights can only be achieved by javascript which i think is a bit backwards.
I know the history of the table and that it was never intended to be used for layout purposes - but i've found it does a very very good job at it. When i design a web page i generally do a mock up in fireworks or photoshop and then work out how to turn it into html. I'm want to switch to divs and am doing so but i'm finding i'm having to compromise the design to fit within the limitations of css and i don't think that's right!! Or like a table, was the internet never conceived for good design?
In terms of the question posed earlier by Darren regarding how to style some form elements take a look at:
http://www.nmisecurity.com/contact.htmi had some success styling the form elements through an external css.
Any other comments?
Moderator
Posts: 11958
Joined: 2004-06-06
Location: London
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 20:05
Darren, I don't think the br tag is deprecated it's quite valid to use in xhtml if closed.
It's just a replaced element that conveys no semantic or styling value and just instructs the page to render a line break.
The error seen is for it to be used where a correct semantic paragraph should have been used or an element margined for spacing requirements, not a whole heap of br tags used to force spacing.
charming
I actually quite like the table group of elements and think they're rather nicely implemented especially when one makes use of the more obscure element detail, but used as a layout device well that's never going to supported I'm afraid, this is not to say that CSS and the div tag fully replace it's ease of use as they don't and it should be remembered that the float property was never actually conceived as a method of laying out and positioning divs.
Hugo.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Elder
Posts: 1062
Joined: 2005-01-25
Location: London
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 21:16
Change is difficult. especially when you're changing to something that isn't perfect, and although it does many things better, there are some areas that it seems tables beats css/divs.
But it's all about a different way of thinking. when you're designing in photoshop or on paper, one needs to think about the limitations of css and browsers, and the areas you can push with xhtml and css. after all there are limitations to tables, but you know them and design around them, even if it's unconsciously.
we've all been designing with tables because there was nothing better out there. there was no real alternative. now there is. it's time to embrace the future and push css.
at the end of the day it is easier to design with tables as that is what most of us know. but it's not right, and it's not the future. it's in your interest as a developer to use css.
just my thoughts...
but what do I know
larmyia
Moderator
Posts: 5577
Joined: 2005-02-22
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 21:16
Ah ok, some pages do, some don't. It seems my quick look at a couple of pages, picked out the ones that don't. LloydsTsb seem to have gone overboard with the divs too, not sure I would recommend that as an example for any one to follow
It seems to me, once you get a handle on CSS, in particular when and where to use floats, absolute and relative positioning, there isn't much you can't accomplish. Sure, if you, think in terms of table based design, your design is likely to better suited or more easily implemented in tables. However, if you approach your design from a non-table perpective ... Its a square pegs and round hole sort of thing.
Take, for example, the footer at the bottom of the page thing. Put together a design that doesn't require a footer at the bottom of the page and all of a sudden the problem will go away.
On Having Layout | The One True Layout | menus by listamatic
Regular
Posts: 21
Joined: 2005-01-31
DEBATE: divs vs tables
Posted: Wed, 2005-05-25 22:32
Well thanks for everyones input - i am genuinely using divs to great effect but originally posted this item to see if anyone else was having anywhere near the same frustrations i was having whilst implementing them.
Although I have been in web design for some time now my original approach to it was from a design perspective and i still dont think that the client's identity or presence should be compromised or restricted by the vehicle that is being used... what if the client wants a footer???
But thanks again for everyones postings, its all valuable stuff and i think i have leared to love divs maybe just a little bit more.
Moderator
Posts: 5577
Joined: 2005-02-22
DEBATE: divs vs tables
Posted: Thu, 2005-05-26 00:21
They can have one. They can even have one at the bottom of the viewport. They can even have red and green flashing websites if they really really want.
On Having Layout | The One True Layout | menus by listamatic
Moderator
Posts: 5061
Joined: 2005-02-03
Location: Pennsyltucky, USA
DEBATE: divs vs tables
Posted: Thu, 2005-05-26 01:27
Moderator
Posts: 5645
Joined: 2004-06-25
Location: Dallas
DEBATE: divs vs tables
Posted: Thu, 2005-05-26 05:35
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Elder
Posts: 1062
Joined: 2005-01-25
Location: London
DEBATE: divs vs tables
Posted: Thu, 2005-05-26 07:53
I assure you that I have many daily frustrations!
you are not alone...
Regular
Posts: 21
Joined: 2005-01-31
DEBATE: divs vs tables
Posted: Thu, 2005-05-26 21:29
wow.. any more for any more?
Does anyone know when css3 will be implimented? and what happens after that - will new browsers come out to support it? how does that work cos i heard that Microsoft wasn't bringing out any more versions of IE and netscape seems to be dead which leaves only mozilla as a viable option on pc. Unless there are others..... (opera?)
Moderator
Posts: 5577
Joined: 2005-02-22
DEBATE: divs vs tables
Posted: Thu, 2005-05-26 21:37
IE7 is due in the summer. Gecko browsers seem to have taken enough market share to spur the behemoth into action.
On Having Layout | The One True Layout | menus by listamatic
Moderator
Posts: 11958
Joined: 2004-06-06
Location: London
DEBATE: divs vs tables
Posted: Thu, 2005-05-26 23:50
Do not be fooled into thinking that a new version of that wretched browser will make the slightest bit of difference to the state of play, it wont, getting slightly tired of hearing people talk about it's imminent release.
Up until about sept of last year MS were stating that they had no intention of following the standards any longer and whilst there would be certain concessions made to things they acknowledge as problems such as PNG support full CSS support was not really on their minds any longer .
It also still seems unclear as to whether IE7 will be available as a separate upgrade, standalone, or whether it will only be available along with a new OS.
Regardless of any updated support for CSS, and I seriously doubt whether that will cover much if any of CSS3, IE6 will be around for a very long time and will require us to go on jumping through hoops to accommodate it.
Just to further stir things up MS have declared an interest in developing a propriatory standard of their own, which will really help things along, believe me they still want to break the back of the standards movement they will never be happy until the world bows to their way of thinking.
Hugo.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Moderator
Posts: 5577
Joined: 2005-02-22
DEBATE: divs vs tables
Posted: Thu, 2005-05-26 23:52
Just make sure every time you visit an MS website you do it with Firefox!!!
On Having Layout | The One True Layout | menus by listamatic
newbie
Posts: 10
Joined: 2005-05-19
Location: rochester, ny
DEBATE: divs vs tables
Posted: Fri, 2005-05-27 01:20
cannon-
Footers are still totally possible using CSS. If you're really interested in designing with CSS, you should check out Dan Cederholm's book Web Standards Solutions which really opened my eyes up to possibilities using CSS and standards-based markup. I recently redesigned a client site from a full-on table layout to CSS. I used techniques outlined in his book and cut down my lines of markup by like 65% and the design is exactly the same. Plus, logically dividing up the page, I was able to position the content portion closer to the top of the markup. Now when the Googlebot comes, he sees the most relevant content right away. In the few short weeks since I made the update, their rankings at Google have increased. Anyhow, those are just some of the benefits of CSS.
-mike
http://www.letsgomurphys.com/
michael murphy
Professional Web Development
http//www.letsgomurphys.com/
Guru
Posts: 2679
Joined: 2004-09-01
Location: MA, USA
DEBATE: divs vs tables
Posted: Fri, 2005-05-27 03:01
I just thought of another site worth visiting:
www.weeklystandards.com
by FortyMedia, showcasing corporate sites that have launched (or rebuilt) with CSS and standards-based development.
Leader
Posts: 770
Joined: 2005-05-21
DEBATE: divs vs tables
Posted: Fri, 2005-05-27 04:10
I'm getting more and more convinced that the reasoning behind that is if you have to code to IE, then you have to follow their rules. If you follow their rules, you may want to buy their tools, and OS, and everything else.
If everyone followed the published standard then there is no reason you have to buy MS. So, take back the web or you'll have to buy your tools from them. Go Firefox!
IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott
Enthusiast
Posts: 71
Joined: 2005-03-03
DEBATE: divs vs tables
Posted: Fri, 2005-05-27 07:00
"go firefox"? hmm... yea i agree. and firefox rules and all... but can anybody comment on the latest netscape? It's good that we all take into consideration all the potential standard compliant browsers. i believe it can compete with firefox too... or i can be wrong coz i havent really tried that, i just have read quite alot of positive feedbacks about it...
and about IE... sigh...
newbie
Posts: 6
Joined: 2005-06-28
DEBATE: divs vs tables
Posted: Thu, 2005-06-30 00:56
Correct me if I'm wrong but as far as I know (from reading the W3C Recommendations
) it's not a matter of not using tables anymore and replace them with CSS, it's a matter of using the tables to mark up tabular data and leave CSS for layout and giving styles to those tables.
I totally agree with the "Go FireFox" thing, I'm fed up of Microsoft's disrespect for international standards! "Leave the darkness! Get FireFox!"
Moderator
Posts: 5577
Joined: 2005-02-22
DEBATE: divs vs tables
Posted: Thu, 2005-06-30 01:13
you're not wrong.
tables for tabular data
css for all your presentation needs
firefox for all your browsing needs
On Having Layout | The One True Layout | menus by listamatic
Moderator
Posts: 9190
Joined: 2004-06-30
Location: Milton Keynes
DEBATE: divs vs tables
Posted: Thu, 2005-06-30 07:56
Let me quote an older post:
Learn of the skillful; for he that teaches himself has a fool for his master - Benjamin Franklin