Question on <div> vs <table>
 

So I'm working on a website and I've noticed that some webpages don't use tables at all to structure their site. They rather use div instead... is that where the industry is heading? Is the use of <table> for site layout becoming deprecated? Some insight would be nice since I don't want my website to be out of date when I create it! :D

Thanks!

Layout by <table> is considered an abuse of the element. Tables are supposed to be used for data best displayed in tabular form. Otherwise, it's recommended that you use CSS. Not all browsers support CSS, though.

Hi -

Yes, you should absolutely be learning to use CSS instead of tables, and HTML "div" ("division") tags are often used in conjunction with CSS styles to do precisely that.

Strong book recommendation:
"HTML and CSS in 24 Hours, 7th Edition", Dick Oliver and Michael Morrison

The author, Michael Morrison, does a GREAT job of teaching you the fundamentals of XHTML coding and design. It's very informative, and very practical.

'Hope that helps .. PSM

Thanks for the replies guys!

Sounds like <div> is the way to go. I've been using css for awhile now, just not much experience using it with the div tags. It was just easier to get everything lined up with tables than it was to get it all lined up with div tags.

But I'll look into that book!

Thanks!

Hi all,

I really don't want to draw back the discussion, but have to tell my mostly bad experience with div tags for layouting.
CSS works well, but div's have their drawbacks. I never got a complex layout (satisfyingly) working with div's and CSS.
Those attempts are hard to code (four columned text, content centered, columns justified, e.g.) and tend to collapse into thrash, if the user changes the browser window size.
I have to admint, that I went back to violate tables more than one time, just to get the site working. After hours of try and error with div tags. ;)

Maybe that I just didn't figure out the magic behind CSS until now. But I realize, that allmost all sites I find online and having complex designs are build upon tables. And CSS.

Please correct me, if I am wrong.
Greets,
Clemens

You're not drawing back the discussion at all! That's the whole reason why I asked. :D I thought that the more complex websites used tables AND CSS but I wasn't sure which direction I should go in.

I thought it was just my lack of CSS and div experience...

The sites I create use divs, but not w/o lots of headaches. Trying to get a decent layout w/ divs is somewhat hard. Trying to do it so the content comes up first is harder. Trying to do it so it looks the same in most common browsers is much harder. Tables are WAY more standard across browsers. This will hopefully change soon, but until it does, using tables for layouts will still be pretty common. I'd say give divs a try, but don't feel bad if you have to resort to using tables, you can always change it later, right?

Not that I've designed a lot of sites myself, but I've always used tables for the layout. What I want to know is why this is abuse of the element? What have I missed?

Yeah, I have the same question as to why using tables is an abuse of the tag...

Also, is there any good web tutorials that can help me use CSS and div more efficiently? That book sounds really good but I'm looking for a more.. free approach =P

The more I read at google et. al., the more I believe that the whole "damn the table" discussion is a discussion between philosophy and economy...

The two main oppinions, as far as I see, are
1) table: easier to implement, more standardized behaviour across the browsers (economy) and
2) divs: doing better job in separating content from design (philosophy).

That divs are easier to render, or that consequent use of divs speed up loading time significant seem to be myths.

What I cannot understand is how div tags do better seperation between content and design.
1) A table defines fields in structured way. Content can be places within these fields. CSS can be used to alter dimensions, colors, fonts, ...
2) What I do with divs is to define boxes. Within these boxes, I can place content. With CSS, I can change dimensions, colors, fonts, ...

Why is the latter design better in seperating content from design?

Three of my own thoughts:
Divs can be placed more accurate. Tables are ways more predictable. As soon as div + CSS are as predictable and standardized as tables, programmers will take the benefit of accurate pjositioning - and the discussion will become quiet...

Towards the violation.. Tables are an element for getting things structured. Where is the line, that seperates things from things? Is it not "structured organizing of elements" if I keep a Navigation, a header and some content in order?

And finally: The best seperation is - imho - done with consequent use of programming languages like perl, php or java...

Greets,
Clemens

To be more practical: Two web resources that give examples for layouting with divs:
http://www.w3schools.com/css/css_examples.asp
http://www.w3schools.com/css/css_examples.asp
http://www.w3.org/Style/Examples/007/
http://annevankesteren.nl/2004/07/fixed-positioning
http://www.css4you.de/wslayout1/index.html
The latter one is written in german. Links 1 to 10 there lead to examples and their code.

Clemente -

With all due respect, dismissing "<table>" vs "<div>" as "economy vs philosophy" is ... well, it's flat out wrong.

The real problem all this time has largely been "Stupid Nonconformant IE6 vs the rest of the world". And despite IE7's many (other!) problems, I believe:

a) IE7 should better support CSS standards
... and, if so ...
b) it should encourage more web developers to use CSS, whenever/wherever practical

Abomb -

Just because Clemente hasn't had success with "<div>" DOESN'T mean that it can't be done. It doesn't even necessarily mean it's HARD to do.

You really owe it to yourself to try learning page layouts with CSS. It's more than just "div" tags, and it CAN be done "portably" (yes, even portable to IE6!). One of the benefits of the Morrison book is that he shows you not only how to do it, but he gives you lots of tips for dealing with "the real world", when necessary:
IMHO .. PSM

PS:
I think Clemente, too, is encouraging you to learn CSS. In this, I completely agree with him!

paulsm,

I know. But from my personal experience tables just seem easier to move, maybe I'm already a bit old fashioned but div just seems harder to manage. I'll definitely try the div tags because it seems like that's the way the industry is heading. I can see div being a problem though, since not all browsers conform to CSS standards.

Hi PSM, hi all,

I completely agree in your opinion towards CSS and the problems with CSS over different browsers. Namely IE6.
I do not understand the unbreakable link between CSS and <div> tags. CSS is applicable to almost all html tags including <table>, <tr>, <td> and so on.

What I tried to point out in my last poston was:
Why should I categorically prefer <div>/CSS prior to <table>/CSS?
From the pragmatically point of view: Tables behave very similar in different browsers. Including command line browsers like links.
The (software)design - if calling html pages software ;) - doesn't really suffer: Main benefit of <div> should be the better seperation between content and design. I don't see, why <div> tags do this job better than <tables>.

So what are the grippy arguments for this categorical "down the tables"?
To point it out: What I consider to be wrong is this 100% or nothing. That was reason for my first posting - to give counterbalance for tables.

I know you can do nice things with <div> tags. And I know, that some (in my case lot of) layouts are nearly impossible with <div> tags. Both do complement but exclude themselve.

My advice for anyone would be: Play with tables, play with divs and learn all CSS related techniques. If done, always use the tools that work best for the job.

Clemente

Clemente -
Very well said - I couldn't agree more!

Humbly your .. PSM