1
wammes
<div> vs. <table>
  • 2004/1/29 10:31

  • wammes

  • Not too shy to talk

  • Posts: 101

  • Since: 2002/1/3 1


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!

2
pemen
Re: <div> vs. <table>
  • 2004/1/29 15:23

  • pemen

  • Not too shy to talk

  • Posts: 186

  • Since: 2002/7/8 7


Another sites about CSS and Div techniques.

Go Here


3
hsalazar
Re: <div> vs. <table>
  • 2004/1/29 16:57

  • hsalazar

  • Just popping in

  • Posts: 78

  • Since: 2003/2/6 1


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.

4
sunsnapper
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/

5
svaha
Re: <div> vs. <table>
  • 2004/1/29 18:07

  • svaha

  • Just can't stay away

  • Posts: 896

  • Since: 2003/8/2 2


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

6
fatman
Re: <div> vs. <table>
  • 2004/1/29 18:13

  • fatman

  • Friend of XOOPS

  • Posts: 176

  • Since: 2003/12/13


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

7
svaha
Re: <div> vs. <table>
  • 2004/1/29 18:30

  • svaha

  • Just can't stay away

  • Posts: 896

  • Since: 2003/8/2 2


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

8
Draven
Re: <div> vs. <table>
  • 2004/1/29 18:51

  • Draven

  • Module Developer

  • Posts: 337

  • Since: 2003/5/28


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!

Login

Who's Online

212 user(s) are online (122 user(s) are browsing Support Forums)


Members: 0


Guests: 212


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits