If not tables...

[Gatorajc]

I have read this issue enough times that I finally have to ask.

Some people have said not to use tables to structure your page. Instead use span or div. Can some one explain why?
Also what the change would look like.

This might be a little hard to understand but here it goes. Take a 3x3 table for example with an image in the top right corner and a menu on the left middle side and a footer image across the bottom three.

How would I make something like that using only div and span seems like it would be a lot harder look the way you want it.



AJ


If at first you do not succeed, cheat!

 

[TheConeHead]

espn.com has gone the way of layers (div's/span's). Their reasoning I think inpart was for the cross-portability for PDA's.... I am currently developing a site using such a technique and it really is alot easier since you do not have to worry about being constrained by the structure of tables.... simply place the divs where you want them...

 

[MrBelfry]

There a couple of ways you could do this depending on if you wanted pixel perfect control and how you wanted the page to look without the style being applied.

Heres a nice, quick way of doing it (which I'm doing from memory so some tweaking might be needed in a production situation).
Styles would look like this:

.banner { width: 100%
.third { width: 33%; float: left; }

You would then do the HTML like this:

<div class=&quot;banner&quot;>
<img src=&quot;abc.gif&quot;>
</div>
<div class=&quot;third&quot;>
Menu goes here
</div>
<div class=&quot;third&quot;>
Content goes here
</div>
<div class=&quot;third&quot;>
Whatever you want goes here
</div>
<div class=&quot;banner&quot;>
footer goes here
</div>



MrBelfry

 

[Gatorajc]

I have done some research and it looks a lot harder and time consuming but I will try it. The only problem I see is what browsers support what is there a site that tells you this.

AJ


If at first you do not succeed, cheat!

 

[MrBelfry]

Whoops just notice I got the wrong closing bracket so the style goes like this.

.banner { width: 100%;}
.third { width: 33%; float: left; }


and of course this is a very simple design.

I asked a similar question in thread215-598229 and that has some nice links.

MrBelfry

 

[TheConeHead]

yeah- cross-browser performance would be the biggest issue... the site I am working on only has the requirement to be developed for IE6/PC so that makes my life a lot easier... let me know what you find out...

 

[MrBelfry]

The biggest problem I've come across is that those browsers that do support it does the maths differently so 25% + 25% + 25% + 25% doesn't always equal 100%. This is all to do with how the browsers implement the CSS box model -> some include the margins and paddings and some don't.

There are some hacks and templates available at the links included in Thread215-598229.

Then we've got old browsers that don't support css positioning at all. Unfortunately standards need to be adopted and applied at some point and it's not particular hard to download a browser or buy a magazine with a cover cd.

MrBelfry

 

[ChrisHunt]

The rule of thumb for old browsers is &quot;can the page still be used with the old browser, even if it's uglier?&quot; (well that's my rule anyway). Anybody visiting MrBelfry's page with a style-unaware browser will see the banner, then a menu, then the content, then some more content, then another browser. Not how it's supposed to look maybe, but still usable.

That said, I'm still using tables for layout. I'll change them one day, but there are still things I've got to figure out...
[ul]
[li]How do I build a menu column that is, say, 200px wide but will resize if the user increases the text size?[/li]
[li]How do I put a piece of text at the bottom of this menu column (i.e. the bottom of the document, not the screen)?[/li]
[/ul]
Both these are straightforward with tables but seem more complex with CSS. I don't think a simple table layout is any less accessible than CSS, nor is putting your content in a particular arrangement of <td>s any more a mixture of content and presentation than a particular arrangement of <div>s.

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!