divs vs tables

[glitch1501]

in designing a website, what do you prefer, divs and css or tables and css, my brother is annoying me saying "divs are the way of the future" and "tables were never meant for anything except tabular data" and its really annoying, so what do you think?

[Debitt]

Tables all the way. Divs are nice when you have a more complicated layout, but I've had experiences where they're moved on me and such, so I usually try to stick with tables. ^.~ There ae some tricks you can use to make tables just as effective as div layers, you know.

[Fsiphskilm]

Table of course

[glitch1501]

i will also start to learn more about divs, but im not going to stop using tables like he suggests

[Mithrandir]

I use tables all the time. In my opinion, if it's more complicated than a table to can do with it, you shouldn't be using the web to do it... Then again, I do all my HTML coding by hand, so it's probably just left over from when I first started using HTML back in... Oh sweet mercy! I've been doing HTML for an entire decade. That's depressing...

[Zedian]

I go with tables...my knowledge of divs is sadly kind of thin. I can do tables like there is no tommorrow and make them bend, obtuse, acute, horizontal, vertical but when it comes to divs I don't know a thing. I am not use to Flash programming either; just basic hard coding of html.

Just a question and I wanna really know, in what case would you use divs ?

[inkhana]

Hmm...the way I look at it, there are situations where it's advantageous to use one or the other, so I don't really prefer one too much. Divs can be used for some awfully cool stuff...

[Straylight]

<div> tags for layout, <tables> for display tabular data, is the general rule. I just totally used tables for this site though. However that could change soon.. I found a very nice table-less skin over at http://www.skelm.com, which i might hack up and use instead...

<div> tags have a number of advantages anyway. They integrate a lot better into CSS, which allows you place ALL your property definitions (including width/height) in a seperate file. For a large site this can cut down on bandwidth a lot, especially for lots of generated dynamic content - the user only has to download that one CSS file, and each page thereafter will be significantly smaller, because all the repeated stuff comes out the CSS file. As an example I compared a vBulletin page using the default vB skin (tables) with one that uses no tables and all <div> tags. The <table> page was about 50k in size, whilst the <div> page was only 15k. (plus the one-off CSS file download)

Tables are also a lot more bulky codewise -- once again using div tags will cut down on bandwidth use.

This is all good news for big sites that use lots of dynamic generated pages (eg this one)

I only recently converted to CSS though.

[glitch1501]

i have made a design using divs instead of tables, there is no content on this site yet

heres the link
http://s88333473.onlinehome.us/stuff/newsite/index.htm



straylight, im kinda to lazy to check, does this site use divs?

[Straylight]

CAA uses some <div> tags to grab stuff out the CSS in the header, but doesn't rely on them completely. I'm more on about using pure CSS with dynamic content anyway. Here's an example:

Check out the source code for these two pages:

http://www.christiananime.net/calendar.php?

http://www.skelm.com/forum/calendar.php?

Both of these pages are generated by the same version of vBulletin (forum software).

Notice how the CAA calender source code is a serious case of blah blah blah with regard to table definations. It's also quite a big file to download.

If you check the source code for the other site (skelm), you'll see how the source code for that page is many many times shorter than CAA source code. It also looks really clean! That's because all the property definitions are specified in seperate file, which needs to be downloaded only once.

I really want to learn CSS, because it's a great way of making dynamic pages really efficient...

EDIT: BTW the calender page on the other site doesn't work in IE properly. He'll probably switch it round at some point so that it does.

[glitch1501]

wow, i didnt know we had a calender here, lol

[Zedian]

Straylight your right, that second website's code certainly looks a LOT cleaner then the first one. The first site was a long trip down...the second one the variables were declared -- line after line everything displayed was shown pretty smooth.

Just a question, probably not related to the topic. I've never worked with VB forums, is the code generated as each object is created like the Visual Basic.NET programming language or must you laboriously make each line ?

[shooraijin]

My main problem with <divs> is that CSS support is b0rken in some browser versions which are widely in use (Netscape 4.7-4.8, for one), and the level of support for certain features between Mozilla and IE browsers is still unequal.

Tables, on the other hand, "just work."

[Debitt]

My main problem with <divs> is that CSS support is b0rken in some browser versions which are widely in use (Netscape 4.7-4.8, for one), and the level of support for certain features between Mozilla and IE browsers is still unequal.

Tables, on the other hand, "just work."

=/ that's the exact problem I have with divs. CSS is fun, and it works well, but things can get really screwy in netscape (all the pretty link filters go byebye)

Oh yeah, and before I forget, nice layout you have there glitch! ^^ It's really clean and stylinsh. xD

[Straylight]

Straylight your right, that second website's code certainly looks a LOT cleaner then the first one. The first site was a long trip down...the second one the variables were declared -- line after line everything displayed was shown pretty smooth.

Just a question, probably not related to the topic. I've never worked with VB forums, is the code generated as each object is created like the Visual Basic.NET programming language or must you laboriously make each line ?

vB stands for vBulletin and has nothing to do with visual basic -- it's a forum system based around PHP and MySQL. The PHP generates the pages by pulling info from a MySQL database. If you were using a M$ system you'd probably wind up using ASP.

Shoo is right though, a lot of browsers have serious problems with <div> tags and purer forms of CSS, which is a real shame. IE one of the major culprits. However, there are workarounds for webdevelopers. This project looks extremely promising (attempts to fix IE related CSS issues):

http://dean.edwards.name/IE7/intro/

As far as Netscape goes, I'm really not sure whether it's worth trying to support an obselete version (4.8). The latest version of Netscape is 7.1 and is based around Mozilla's gecko engine. It's IMO that people using netscape 4.8 need to upgrade their browser.

Regardless of these problems, I'm pretty sure that CSS will be the future of webdesign -- it's far more efficient, and is based around a really nice tidy object model.

[Mithrandir]

Some people with old hardware can't readily upgrade to "the new thing" whatever it may be. On the other hand, tables still work. And I can do the site the "pretty way" you saw using tables too - probably a lot easier than it was done with divs, IMO.

It's a question of what one if familiar with...

[glitch1501]

that was one of my arguements to him(some browsers dont support it as well as ie)

[Straylight]

Hmm, I wonder if you can hybridise. Perhaps it's possible to use tables instead and define every attribute of the table tags through CSS...

That way things would display better on older browsers, even if some of the fancy design stuff doesn't appear. The bandwidth advantage would probably stick too.

Guess I need to learn some more CSS..

[Fsiphskilm]

Yea... I've been u go.

[Mithrandir]

o.O

Hard? Ri..........ght....

Anyway, SL... I was under the impression that the tables you are using on CAA ARE defined in CSS... The sheet is included on the pages dynamically, as the are coming out of PHP, but it's deffinately there. That's how you get those elegant class definitions for the thin black line. Which I stole for my PHP based admin screen...

[Straylight]

Anyway, SL... I was under the impression that the tables you are using on CAA ARE defined in CSS... The sheet is included on the pages dynamically, as the are coming out of PHP, but it's deffinately there. That's how you get those elegant class definitions for the thin black line. Which I stole for my PHP based admin screen...

Yup it's there alright.
Can you cut this kind of thing down though?

<table cellpadding="0" cellspacing="0" border="0" class="tborder" width="100%">
That appears multiple times in the skin...
Perhaps I'm just ranting at a brick wall... and the vBulletin team didn't design the skin system as cleanly as they could have done.

I'd love to at least get the CSS definitions out of the header and into a seperate file.

[Fsiphskilm]

What I'm trying to s

[Mithrandir]

Well, here's the code from the previous example...

Code: Select all

<table border=0 cellspacing=1 cellpadding=5 class="tborder" width=100%>
<tr>
 <td class="redbar" align="center">
 <font class="navbar">- Session Tracking and Debug Information -</font>
 </td>
</tr>
<tr>
 <td class="bare">
 <table border=0 cellpadding=0 cellspacing=0 width=100%>
 <tr>
  <td class="bare"><font class="disclaimer">You are currently logged in as root</font></td>
  <td align=right class="bare"><font class="disclaimer">04/15/2004 - 08:33 am - nnn.nnn.nnn.nnn</font></td>
 </tr>
 </table>
 </td>
</tr>
</table>


All the td deffs and font deffs are pulled out of the CSS. I acutally prefer this, since some times I want a piece of this deff and a piece of that deff, without having to define a new div, you know?

I guess it's really a question of whether you want flexibility, or uniformity. I find that with a little extra HTML on the page, I can get the flexibility I need, and the uniformity that comes out of the CSS.