xoops forums

wammes

Not too shy to talk
Posted on: 2004/1/29 10:31
wammes
wammes (Show more)
Not too shy to talk
Posts: 101
Since: 2002/1/3 1
#1

<div> vs. <table>

Got inspired by a news post from StudioC. His/her xoopsfactory site loads very fast (on my machine) and has a very clean design. It uses only div tags, no tables. I never looked at divs this way. Guess I always used tables and didn't look further if there were any more possibilities to make a site layout. On the xoopsfactory site I also found a link to a very intresting site called theimposter. It shows some examples of how to create your site layout using only divs and some css code. It really impressed me, because I think it saves a lot of htmlcode by just using divs instead of very much tables.

Maybe I can get some more opinions on this. If I see the possibilities of the div tags vs. the tables tags, I think you can accomplish almost the same with both, but the div tags do it in a cleaner way. Is this correct? Should I use divs now instead of tables?
Are tables really 'dead'? Is the div taking over these days?

Please give me your 2cents on this. Thanks!

pemen

Not too shy to talk
Posted on: 2004/1/29 15:23
pemen
pemen (Show more)
Not too shy to talk
Posts: 186
Since: 2002/7/8 7
#2

Re: <div> vs. <table>

Another sites about CSS and Div techniques.

Go Here

hsalazar

Just popping in
Posted on: 2004/1/29 16:57
hsalazar
hsalazar (Show more)
Just popping in
Posts: 78
Since: 2003/2/6 1
#3

Re: <div> vs. <table>

wammes:

You've hit one of the most hot topics of these turbulent times: the old tables vs. CSS design debate.

Once upon a time, I tried to build a CSS theme for XOOPS. It almost worked, though I had to add here and there a few tweaks for the theme to work in some browsers.

However, I was unable to do certain things: for instance, if you use DIVs to create your right column, you can do it but not including a background color, because the DIV's height will be dictated by its content. Recently a solution was published in A list apart, using a background image, and this solution is perfect if you always have a right column... but not when you don't have one (you'd need to define a different background image for those cases where the rightcolumn doesn't exist. It's doable but haven't had the time to go after this one.

Back to tue subject, I think that for the moment the sensible approach is the one preached by Jeffrey Zeldman in his book Designing with Web Standards. He says there that as long as browsers support of standards is flaky, an intelligent way of doing business is to go after transitional, hybrid designs, that is, designs that use XHTML and CSS but not defined as strict.

Zeldman argues, and I'm inclined to follow him in this, that there's really no solid reason not to build a site using a table here and there. Of course there will always be a place for tables: the presentation of tabular data, for one thing. But also, if the present state of CSS support doesn't let you build the site you envision, throw away purity and use a table. Your site can still validate if you're careful, and you might avoid many a headache.

As you can see in the default theme supplied with XOOPS, this is the general approach followed here. The theme is built with a few tables, but all the styling of the blocks is done via DIVs. This will become easier and better when XOOPS core gains the capability of importing external stylesheets, and when module and theme designers complement the task by doing their job thinking about a clear separation of structural markup and presentational styling.

Cheers.

sunsnapper

Friend of XOOPS
Posted on: 2004/1/29 17:39
sunsnapper
sunsnapper (Show more)
Friend of XOOPS
Posts: 403
Since: 2002/4/10
#4

Re: <div> vs. <table>

I would go with <div> if you possibly can.

For some inspiration, check out oswd.org where there is a collection of themes (not XOOPS specific).

I recommend themes by Haran, which are <div> based as a starting point. Check out Blue Haze and Purple Haze:
http://www.oswd.org/viewdesign.phtml?id=1152

For more table free inspiration, check out:
http://www.pga.com/openchampionship/2004/

and
http://csszengarden.com/

Also, Zeldman keeps an eye on interesting developments:
http://zeldman.com/

svaha

Just can't stay away
Posted on: 2004/1/29 18:07
svaha
svaha (Show more)
Just can't stay away
Posts: 896
Since: 2003/8/2 2
#5

Re: <div> vs. <table>

column, you can do it but not including a background color, because the DIV's height will be dictated by its content. Recently a solution was published in A list apart, using a background image, and this solution is perfect if you always have a right column... but not when you
End quote Horacio

A question : Why not take an image for the entire background like you can probably see on this site of Jakobo here

Aloha

fatman

Friend of XOOPS
Posted on: 2004/1/29 18:13
fatman
fatman (Show more)
Friend of XOOPS
Posts: 176
Since: 2003/12/13
#6

Re: <div> vs. <table>

Lots good comments so far. I would just echo the statement of use <div> when possible and make the conversion from tables to pure css.

While support across browsers can be tricky, most things can be done.

I find 'A List Apart' to be a great source of css layout tips and tricks.

Here's a good article dealing with background colour for columns.

Faux Columns at A List Apart

svaha

Just can't stay away
Posted on: 2004/1/29 18:30
svaha
svaha (Show more)
Just can't stay away
Posts: 896
Since: 2003/8/2 2
#7

Re: <div> vs. <table>

Hi Sunsnapper,
I noticed that this site is oriented left (in my browser)

For more table free inspiration, check out:
http://www.pga.com/openchampionship/2004/

As was the site of mindhealth I visited.

I saw a solution for this (to get the page centered and text left oriented on this site
It's done :
Quote:
body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}


Ok, just a note before I forget about it, nothing personal

Aloha

Draven

Module Developer
Posted on: 2004/1/29 18:51
Draven
Draven (Show more)
Module Developer
Posts: 337
Since: 2003/5/28
#8

Re: <div> vs. <table>

Well, I've been trying to build my new site in pure CSS and I have to admit the browser differences in rendering CSS has made this near impossible. While simply layouts can easily be done, complex layouts with several colums and nested columns becomes a HUGE pain. I managed to get my layout working in IE, Opera and Mozilla but it totally blows apart in Netscape. FInally fix it for next Netscape and now Opera blows it apart. In the end it was way too much off a headache and I've resorted back to using tables for the structure and div's for the content. I've spent 3 times longer trying to do this in pure CSS then if I would have just used tables to begin with (And for those who don't know me, my design skills and familiarty with CSS is in no way lacking. Just think how long it would take someone who didn't know CSS).In the end, I actually ended up with LESS code then when trying to nest div, inside div, inside div, to make-up for all the different browsers and their "quirks".

Hopefully one day this will be resolved and we will be able to use pure CSS for complex site, but for now, I have to say that pure CSS is good for simply layouts and wrapping content you need to style.

Long Live Tables!