TABLES vs. DIV Debate (again)

[AJKock]

Gee, you people write a lot. I had to lay down first after reading through all of this. I have always wondered about the validity of certain developments, when we still have to fix our table layout designs for certain browsers AND still have to fix our CSS layout design for different browsers. Have we grown?

It brings me to the point which I think is the real and simple reason why the trend has moved to CSS and that is simply to SEPERATE content and design, and nothing else. Why? I am not 100% sure. Maybe someone can enlighten us.

Regarding the WYSIWIG vs hard coders debate. Saying if you use WYSIWYG your are amatuer, I have to ask you what part of WEB DESIGNER you don't understand? Don't confuse WEB DEVELOPER/PROGRAMMER with WEB DESIGNER. One is not better than the other. They do similar but different things.

[I87]

I try to avoid tables as much as possible
but when it comes to something like forums, I'd rather go with tables
even though I feel dirty when I use them

[MrLeN]

"even though I feel dirty when I use them"

I rest my case.

MrLeN

[BonRouge]

"even though I feel dirty when I use them"

I rest my case.

MrLeN

What on earth is that supposed to mean?

[AutisticCuckoo]

Don't look a gift horse in the mouth!

If MrLeN is resting his case, he won't be posting any defensive, reactionary rants about the greatness of layout tables. Maybe he'll even find time to read some 21st century articles about interesting topics like semantics and accessibility?

[BonRouge]

Good point, Tommy. Forgive me. Best to let this thread sleep peacefully, eh?

[gnarly]

Doing such things with divs causes nothing but grief, and they will NEVER improve because to omplement such functionality into divs would make them .. "tables".

That's the whole point of CSS2's display: table; functionality. It enables you to use nice semantic (non-presentational) markup, that displays as if it were a table. Good stuff. If only more browsers supported it, eh?

I take your point that using simple tables for layout can be easier in some circumstances, and to be honest I can understand why you'd want to work like that. It's not for me (anymore) though. When I look back on it, I find that complex table layouts had me jumping through more hoops than CSS ever has (once I'd got my head around it).

Besides, to me the three 100% tall columns thing is dull as dishwater. Is that all the web is ever going to be? Semantic HTML+CSS layouts (they're not exclusively div layouts) enable me to "break out of the box" as it were and explore some of the more advanced grid layouts. It's good fun and the marketing dept. love it. You're right, there's things that are hard to do without tables, but I relish the challenge of making them happen with pure semantic mark-up.

I'm sure I had a point to begin with but I seem to have wandered

[gnarly]

but when it comes to something like forums, I'd rather go with tables even though I feel dirty when I use them

That's arguably a perfectly valid use for them - up to a point.

[Blue Sky]

I have used tables for 5 years. This year I concentrated on CSS to enable me to separate content from layout. I have greatly enjoyed the challenge and will now always try and use CSS to totally control layout. Tables have their place imho but for me I would rather use div's.

[gnarly]

Bluesky - it's not just divs! Use whatever markup is best for the job!

[Blue Sky]

soz, time this thread ended methinks?

[.Rich.]

Who do you work for in chelt gnarly?

[MrLeN]

Baaaaah' Baaaaaa'

MrLeN

[MrLeN]

I SO love being RIGHT!

I Know, I know.. I am the MASTER!

I know I am years ahead.. I know I am brilliant.

But I am humble. I will accept your praise one at a time. Not all at once please. I really want to spend the time to give each CSS LAYOUT pundit a nice big hug so that you know everything is going to be OK!

http://www.youtube.com/watch?v=FSFYSzbDEKE

Yes yes, I know.. I am great. I know.

I know I am brilliant. No need to grovel in covetous bewilderment. I wont make you do that.

Ok, well, just a little bit. Make a line please..

Muahahahahah!!

Edit

Mrlen, I personally like your template and think it is a very nice table layout that should work and look good in almost any browser. as a mater of fact i think it's a master piece of work! given the fact it's a valid Xhtml document.

Awww.. old times. I feel all warm and fuzzy. A "masterpeice of work".. it will be nice when the rest of the world catchess up with my brilliant and superior coding abilities

By the way, I am having a fantastic day and I am in a great mood

Would anyone like an autograph or something? I can send personally signed and framed A4 sized CSS code for $29.95

edit (again)

It amazes me how many people loosely call a css/div template a "css template". The template above "is" a CSS template. Except, for practical reasons I have used a combination of tables and div's.

It's hard being brilliant, but someone has to do it.

[oddz]

…

I'm tempted to buy that book and read what this fuss in all about. However, another part of me is thinking wtf – tables for layout. What happened to semantics?…

[MrLeN]

…

I'm tempted to buy that book and read what this fuss in all about. However, another part of me is thinking wtf – tables for layout. What happened to semantics?…

roflmao.. aaaahhh...

Some days are just fantastic

[JonShannow]

This thread is sooooooo old. Have you changed you tune MRLEN or still do thing the old way? If you havn't moved on yet you will be pushed out of the way soon, no doubt, MR 'Ive had yadayada X years programing..." NO ONE CARES!

[oddz]

Actually, That book does not support your point. Tables are not being used for layout. Table layout properties are applied to semantic elements. That is the basis behind the technique, not using table mark-up for non tabular data. Actually… its quit interesting, the promotion is a bit misleading into thinking table tags are being used – which isn't the case. I only gave it a quick skim, but from 15 minutes of reading its relatively obvious that the techniques discussed within as revolutionary are in fact semantic.

[MrLeN]

Actually, That book does not support your point. Tables are not being used for layout. Table layout properties are applied to semantic elements. That is the basis behind the technique, not using table mark-up for non tabular data. Actually… its quit interesting, the promotion is a bit misleading into thinking table tags are being used – which isn't the case. I only gave it a quick skim, but from 15 minutes of reading its relatively obvious that the techniques discussed within as revolutionary are in fact semantic.

I never once said, anywhere at any place or at any time in my entire life (or any other life I may or may not have had), in any realm of existence, past present or future that Tables should be used for layout, or are layout.

I've been trying to say all along that "CSS Layout" does not imply only DIV/CSS but it implies DIV/CSS/Tables.. also, not once did I ever say that table markup nees to be used; as I do not use table markup, I use only CSS and tables, just as I use CSS and Div's.

I haven't got the book, but I know I don't need it. I was aware of what the book is trying to point out years ago, and I've been trying to explain that to people. However, people are like sheep. They listen to W3C and see them as an authority. I see W3C as a hindrance to development and a huge pain in the ***; and I've alwasy maintained that tables are not only for "tabular data"; which is ridiculous.

Further, I am not going on about the same old thing. It's just that sitepoint tself has vindicated every post I ever made about Tables and CSS with this book. It makes me all warm and fuzzy inside

[MrLeN]

This thread is sooooooo old. Have you changed you tune MRLEN or still do thing the old way? If you havn't moved on yet you will be pushed out of the way soon, no doubt, MR 'Ive had yadayada X years programing..." NO ONE CARES!

lol, I was trying to tell everyone what this book is telling everyone years ago; when you were in sitepoint nappies. haha.

[felgall]

CSS is for layout and so where browsers support CSS tables you can use that along with your semantic HTML. The problem is that IE7 and earlier do not support tables for layout but still have too big a market share to use it with HTML. There has been no reason not to use it with XHTML for quite a few years now because all the browsers that support XHTML also support CSS tables.

[MrLeN]

CSS is for layout and so where browsers support CSS tables you can use that along with your semantic HTML. The problem is that IE7 and earlier do not support tables for layout but still have too big a market share to use it with HTML. There has been no reason not to use it with XHTML for quite a few years now because all the browsers that support XHTML also support CSS tables.

I have been using CSS with tables on the old versions of IE for years.

For example, if I want a 3 column layout I simply create:

<table cellpadding="0" cellspacing="0" border="0" class="boo">

This basically acts just like a <div class="boo">

Then, you can add columns with <td></td>

Divs simply can't do this. They weren't designed for it.

The only downside is that you have to have cellpadding="0" cellspacing="0" border="0" because you can't control that with CSS. (You need border="0" because the old versions of IE will put an ugly border, but you can put the border BACK with CSS).

However, that's how I have been building websites for as long as I can remember. I basically use DIV's entirely, and I use tables in the fashion I explained above when I need a column. It works on old versions of IE.

That's the only real reason you need a table; for when you need a column. It saves SO much grief. I have been perplexed for YEARS; not about people who want to use CSS exclusively (I don't see why they would want to; never could, still can't), but because people THINK "CSS Layout" implies only CSS and DIV's. This has always boggled my brain. This is because of W3C.

I have never been able to understand why SO many people think that way. I have argued blue in the face that the use of tables does NOT mean that you're mixing layout with design. Not at all.

I honestly think that there was a generation during the last 10 years, that couldn't figure out tables, because they started learning while W3C was on this stupid semantics/div/design indoctrination (I know, those TD's are a real killer *sarcasm*), and got straight on the DIV bandwagon. I know this because the SAME OLD TIRED rebuttal is always made. I can see that a very large percentage of people THINK that "CSS Layout" implies DIV/CSS, and I've been slapping people across the back of the head for years saying: "So are tables!"; because I KNOW (by how they talk) that they were never around when people used to use tables. I WAS!

Then when people see that I (STILL) used a table in my design (tables that they don't get), they get all upset because they think that it means I can't code. I know how to code with DIV's/CSS only. I could write a book on it MYSELF. I am Mr-DIV/CSS-LeN, but I have always argued that the use of tables does NOT imply that you're mixing content with design. All of my websites are created with DIV's (except where I want a column).

The use of tables is NOT mixing content with design.

WHY????

Want to know {{{WHY}}}???

Because I table is JUST A FRICKIN' CONTAINER!


There IS {{{NO DESIGN}}} implementation in the table.

You add a class or an ID (or both, if that's what floats your boat) AND WHAT YOU HAVE IS A COLUMN ENABLED CONTAINER. In other words, a "columnable DIV". Yeah, I made that word up

I have battled to get people to understand this for many years. People just don't get it and I blame W3C! Now, I know tables aren't going anywhere. I knew this years ago. Tables are here to stay and soon the term "CSS Layout" {{{WILL}}} include the use of tables. Soon, when people see a table in the code of a website, they wont start flapping their arms around like a chook with its head cut off.

If anyone says (sarcastic voice) "Oh, but you used a table, it's not a CSS layout", I am going to STRANGLE someone.

edit

And something else. Someone needs to contact W3C and inform them of a "new standard". It comes something like this:

cellpadding: 0;
cellspacing: 0;

Border already works

Then, for all practical purposes, we'll be able to use:

<table class="boo">
<tr>
</td>
</td>
</tr>
</table>

..but when you tell W3C, be very careful because they might throw a keyboard or start crying or something. Those poor little "hindsight" creatures, making up "standards" years after cutting edge technology creates a way for something to be done out of NECESSITY don't like it when they don't get to write the rule book. They don't like it when functionality is created without them being in control of it. Even when perfectly useful functionality is created, W3C would rather rewrite it for how THEY think it should have been done in hindsight, and pi$$ off TENS OF THOUSANDS OF WEBMASTERS in the process!

If W3C would stop being so frickin' controlling, I wouldn't have a problem with them - but what you have over there is a bunch of old geeks who wrote some code back when the dinosaurs roamed and they still think they get a say on how the development of code progresses.

They don't like the fact that a HEAP of functionality was plugged into tables and they've been working their BACKSIDES off to try to find a "hindsight" solution. But you know what? They failed.

FAIL

{{{F - A - I - L}}} spells FAIL!

HAHAHAH

Go Tables!

Suck it W3C!

Go and do something useful instead of trying to dictate the way technology progresses. If you want to make standards, then work with companies that have to create them "on the fly". You might want to adopt these standards as they are created, instead of making up new ones in hindsight, because this costs the Internet hundreds of millions of dollars, pi$$ses a HEAP of people off and wastes billions of man hours, all because you can't get your snotty little way.

THE INTERNET HAS EVOLVED W3C - BUILD A BRIDGE!

*Get over it!

[JonShannow]

lol, I was trying to tell everyone what this book is telling everyone years ago; when you were in sitepoint nappies. haha.

Yeah, well I was in sitepoint all those years ago, as well - fell out of the internet world for a few years, became a warehouse manger (never do this if have a choice by the way) and have only tried recently to re-establish my self.

I remember doing my first site back in the mid 90's about T.V themes of all things.

Anyway I am now getting back into design and development of sites, and having a ball. This time I am doing for money!

I was grumpy before so I hope you forgive me P.S I'm from Melbourne

[Paul O'B]

Because I table is JUST A FRICKIN' CONTAINER!

A table isn't just "another container" its a container for data that is organised in columns and rows and has a logical relationship between row and column. This can never be true when tables are used for layout only and really ends this argument before it begins. It may be true that "some" layouts are easier when using tables but that's a separate issue altogether and I have no problems with tables being used for layouts that are hard to achieve in css but "only for the time being".

I suggest you listen to Kevin's broadcast again as you seem to have missed the point somewhere.

He clearly explains why abusing the html table element for layout is bad especially for accessibility reasons but also lists other valid reasons.

Kevin isn't advocating using tables at all he is simply advocating using the css feature display:table to produce all the layouts that table designers love but without all the disadvantages. Surely that is a good thing?

You can have your rows and columns and equalising table behaviour without actually using a table at all. This avoids all the accessibility issues without abusing a table for layout. The table element explicitly defines a semantic relationship between the content and when this content is not data then semantics and accessibility go out of the window.

A div on the other hand is just a generic container and does no have the accessiblity and semantic issues that tables explicitly define as mentioned in Kevin's broadcast.

Use a table for tabular data and CSS for layout.

However, if the layout you want can't be done in CSS (or is much more work) then for the "time being" use a table. But as Kevin points out is the "time being" not applicable anymore and should we use display:table "right now"? IE8 is going to be out very soon and supports all the CSS we need and we should be making a start sooner than later.

I'm not sure whether "the time is now" but the future does look brighter and soon and once and for all the silly table vs CSS debate will not even be necessary.

[felgall]

I have been using CSS with tables on the old versions of IE for years.

For example, if I want a 3 column layout I simply create:

<table cellpadding="0" cellspacing="0" border="0" class="boo">

I didn't say CSS with tables I said CSS tables - table commands in CSS. You have not been using CSS tables at all if that is what you are using since that is HTML and not CSS. It is an HTML table.

CSS tables use such properties as display:table, display:table-row, and display:table-cell in the CSS to style <div> tags and semantic HTML elements - there is no table tag in the HTML when you use CSS tables.

Here's an example of a CSS table.

<style type="text/css">
body, html {height: 100&#37;;text-align:center;}
#tbl {margin:0 auto;width:200px;text-align:left;}
#tbl[id] {display: table; height: 100%;}
#cell[id] {display: table-cell; vertical-align: middle;}
</style>

and

<div id="tbl"><div id="cell">
content dead centre of the page using a CSS table for layout
</div></div>

Works in Firefox, Opera, Safari, Chrome, Mozilla, Konqueror, IE8 etc but not in IE7 or IE6.

ps. I can get IE6 to create the equivalent layout using negative percentage offsets but can't figure out how to get IE7 to behave the same way as the -50% takes it back half the page height rather than half the element height - does anyone have a solution that will fix it for IE7?

<!--[if lte IE 6]><style type="text/css">
#tbl {position: absolute; top: 50%;}
#cell {position: relative; top: -50%;left: -50%;}
</style><![endif]-->