29 replies [Last post]
cannon303
Offline
Regular
Last seen: 7 years 35 weeks ago
Joined: 2005-01-31
Posts: 21
Points: 0

In terms of making your site accessible, are tables considered incorrect when using them to position graphics?

If so why are divs so impossible to use, and why is no body using divs over tables?

anyone any comments??

briski
briski's picture
Offline
Elder
London
Last seen: 1 year 44 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

DEBATE: divs vs tables

Laughing out loud Laughing out loud Laughing out loud Laughing out loud

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. Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 2 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

DEBATE: divs vs tables

Ah divs are impossible to use, this is where I've been going wrong then.

Quote:
why is no body using divs over tables?


Really ? have a look at the underlying code for this site Smile

Rest of copy removed due to labouring under a misconception regarding table history and disseminating inaccurate information

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: DEBATE: divs vs tables

cannon303 wrote:
If so why are divs so impossible to use, and why is no body using divs over tables?

Take a look at these two sites

www.apple.com (forgive them their tab menu at the top Smile)
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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 weeks 6 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

DEBATE: divs vs tables

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/

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 22 weeks 2 days ago
Halifax, Canada
Timezone: GMT-4
Joined: 2004-03-22
Posts: 828
Points: 0

DEBATE: divs vs tables

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

Darren
Darren's picture
Offline
Regular
Last seen: 6 years 11 weeks ago
Timezone: GMT-8
Joined: 2005-03-16
Posts: 25
Points: 0

DEBATE: divs vs tables

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]

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 14 weeks 6 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

DEBATE: divs vs tables

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.

Verschwindende wrote:
  • CSS doesn't make pies

rmfred
Offline
Elder
Rock Springs, WY
Last seen: 1 year 25 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

DEBATE: divs vs tables

Darren;
Have a look here http://dutchcelt.nl/test/formtest.html

www.powerbitwebdesign.com Powerbit your custom web design company

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 22 weeks 2 days ago
Halifax, Canada
Timezone: GMT-4
Joined: 2004-03-22
Posts: 828
Points: 0

DEBATE: divs vs tables

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

cannon303
Offline
Regular
Last seen: 7 years 35 weeks ago
Joined: 2005-01-31
Posts: 21
Points: 0

DEBATE: divs vs tables

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.

Any other comments? Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 2 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

DEBATE: divs vs tables

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 Smile

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 5 years 30 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

DEBATE: divs vs tables

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 Wink

larmyia

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DEBATE: divs vs tables

cannon303 wrote:
(the apple site uses tables by the way!!!)

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.

cannon303
Offline
Regular
Last seen: 7 years 35 weeks ago
Joined: 2005-01-31
Posts: 21
Points: 0

DEBATE: divs vs tables

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DEBATE: divs vs tables

cannon303 wrote:
what if the client wants a footer???.

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.

Tongue

Anonymous
Anonymous's picture
Guru

DEBATE: divs vs tables

cannon303 wrote:
(the apple site uses tables by the way!!!)
You think that's bad? You should see the junk code their "Pages" app spews out. Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 58 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9052
Points: 3021

DEBATE: divs vs tables

Hugo wrote:
Tables are not and were never intended as a layout device they were designed to hold tabulated data, and was conceived as a means for scientists to convey their data in a meaningful structure bearing in mind that it was they that essentially gave rise to what we use today the web/http, we usurped it from them and twisted it to our own uses and originally saw that the table element could be manipulated into providing a layout framework to hold designs, but it remained an incorrect use of the element,
and
cannon303 wrote:
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?


I'm afraid that's a common misconception. The table was introduced in html3.2. Here is from that Reference Specification;
    HTML 3.2 includes a widely deployed subset of the specification given in RFC 1942 and can be used to markup tabular material or for layout purposes. Note that the latter role typically causes problems when rending to speech or to text only user agents.
Emphasis added. --g
To the second part of cannon303's post, The problem is not in the css method, but rather that you use a planning method common to print oriented graphics designer and table steeped coders. CSS does not work well in a grid based, paste things on to a layout board kind of approach. You'll be learning a new way to plan the work. With well structured, semantic html + css, you look for groups and how they fit into the flow. It's a different paradigm. Once you adopt it, life will become sweeter.

Darren wrote:
Here's a simple example... I'll attach an image of what I'd like to see in my page. (image not brought forward)

Look at this simple html;
  
     <label for="fname"><span class="req">First  
      Name:</span><input type="text"  
             id="fname"  
             value="" /></label>
Now look at how it is rendered. That code is semantic and well structured. It will render well in all browsers or assistive technologies.

Continuing, cannon303 wrote:
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.

Actually, css provides the means, but the major browser is nearly nine years behind the curve, so we're all sca-rewed. There are other ways. Essentially, equi-length columns are illusion. Google 'faux columns'. You can also look at my 2 column demo. Equal length columns, being a bit of sleight of hand, are like sincerity—once you can fake it, you've got it made. Wink

[edit] It occurs to me you might be talking about flowed columns, much as can be done in DTP/word processing. That is a print artifact, and completely inappropriate for web use. That said, I believe the column property is in the css3 draft and has that ability. I, myself, would hesitate a long time before using flowed columns in a web page. Consider scrolling down to the bottom of one column only to have to scroll back up to find your place to continue reading. A bad idea. [/edit]

Finding still more energy, cannon303 wrote:
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???
Tables are friendly to the print (graphic) oriented designer. The web is not print. CSS is friendly to the web oriented designer. Believe me when I say that css will make design work easier. I doubt I could even begin to code a nontrivial design using tables. On the other hand, I haven't run into a design that can't be done with css. (I will confess to using a single celled table when vertical centering is required—but only because IE is so stupid. Modern browsers handle it just fine.)

Oh, if you want a footer at the page bottom? My footer demo is one of several methods.

cheers,

gary

[/]

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

larmyia
Offline
Elder
London
Last seen: 5 years 30 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

DEBATE: divs vs tables

cannon303 wrote:
but originally posted this item to see if anyone else was having anywhere near the same frustrations i was having whilst implementing them.

I assure you that I have many daily frustrations!

Smile

you are not alone...

cannon303
Offline
Regular
Last seen: 7 years 35 weeks ago
Joined: 2005-01-31
Posts: 21
Points: 0

DEBATE: divs vs tables

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?)

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DEBATE: divs vs tables

cannon303 wrote:
...cos i heard that Microsoft wasn't bringing out any more versions of IE...

IE7 is due in the summer. Gecko browsers seem to have taken enough market share to spur the behemoth into action.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 2 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

DEBATE: divs vs tables

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DEBATE: divs vs tables

Just make sure every time you visit an MS website you do it with Firefox!!!

zen_warrior
zen_warrior's picture
Offline
newbie
rochester, ny
Last seen: 8 years 48 weeks ago
rochester, ny
Joined: 2005-05-19
Posts: 10
Points: 0

DEBATE: divs vs tables

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/

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 weeks 6 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

DEBATE: divs vs tables

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.

drhowarddrfine
Offline
Leader
Last seen: 4 years 19 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

DEBATE: divs vs tables

Quote:
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!

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

euio
Offline
Enthusiast
Last seen: 9 years 6 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

DEBATE: divs vs tables

"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...

NightWalker
Offline
newbie
Last seen: 8 years 42 weeks ago
Joined: 2005-06-28
Posts: 6
Points: 0

DEBATE: divs vs tables

Correct me if I'm wrong but as far as I know (from reading the W3C Recommendations Laughing out loud) 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!" Laughing out loud

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DEBATE: divs vs tables

you're not wrong.

tables for tabular data
css for all your presentation needs
firefox for all your browsing needs

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 14 weeks 6 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

DEBATE: divs vs tables

Laughing out loud

Let me quote an older post:

thepineapplehead (doctype nazi) wrote:
Quote:
Tables are still valid HTML.

I didn't say that, I said tables are stupid for layout.

Quote:
If your site is built using templates, then you just change the template, and voila, your site is changed.

Erm, you can't just 'change the template' - you'd have to reinsert all the pages into the new template.

Example - a three row table layout:

<table>
<tr> row 1 </tr>
<tr> row 2 </tr>
<tr> row 3 </tr>
</table>

(I know it's not valid, I don't care Laughing out loud)

This is the header (row 1), navigation (row 2) and content (row3).

You decide you want to have the navigation in a left column and the content in a right column.

No problem, just split row 2 into two columns.

Then you have the problem of moving the content from row 3 OF EVERY PAGE into the 2nd column of row 2.

Done with divs, you'd have

<div id="header"> </div>
<div id="navigation"> </div>
<div id="content"> </div>

Want the navigation under the header? It's already there. Want it in a left hand column? Simply float it left.

I don't see how tables are at all good for layouts Laughing out loud

thepineapplehead wrote:
To return to my orginal code snippet:

<table>
<tr> row 1 </tr>
<tr> row 2 </tr>
<tr> row 3 </tr>
</table>

This is the header (row 1), navigation (row 2) and content (row3).

<div id="header"> </div>
<div id="navigation"> </div>
<div id="content"> </div> 

Now being completely honest, which of these layouts is going to make more sense to a junior programmer who knows nothing about HTML or CSS?

Verschwindende wrote:
  • CSS doesn't make pies