The tables vs. CSS debate (split)

Here's a site with some CSS templates to play with:

http://www.ssi-developer.net/main/templates/

So all of my sites (and other people who code with tables) are hack jobs? Cheers THAT'S the dumbest thing i've read

Well, yeah, using tables for layout is a hack job because that's not what they were meant to be used for. At the time there were no other options so we had to make do with what we had. Messing around with tables to make them work as a layout tool (which they're not).

To be clear - I think there are some cases where using tables for layout is okay. The problem is when people try to insist that it's valid and proper use of the code, and that people who say otherwise just don't know what they're doing.

Edit - and I did not say that PEOPLE using these methods were hack jobs. I said the technique is a hack job. Just to be clear. There are a lot of hacks used in CSS design so we're not immune from it either. It's just on a smaller scale - more about browser support than the fundamentals of the technique.

Yeah i've never claimed it's valid, cos i hate how relevant people try to make that out to be - you can go on about it till you're blue in the face if you want but it bores me really.

"OMG YOUR CODE IS CRAP, YOU HAVE 2 XHTML ERRORS, YOU TOTAL NOOB!!!"

hahaha

But fair enough, i'll let you concentrate on all that aspect of the business, i like the way i do things now so that's enough for me

I tend to agree, Davey. I think some people get so hung up on the code that they ignore more important design problems.

That's alright then

Yup, so read my post again and let peace and healing begin...

Megan wrote: I tend to agree, Davey. I think some people get so hung up on the code that they ignore more important design problems.

There speaks a lady who's had to listen to me banging on about specs once too often, although forgiving when it comes to other peoples code, I am incredibly anal about my own. Anal to the extent that a single tab in the wrong place will evoke emotion, but then one of the biggest kicks I get is looking at some beatifully formed, semantic markup.

Mmmmm, semantic markup.

Way to much to reply to, and as mentioned can talk into we're blue in the face it wont matter. Nice that you admit tables are ok Megan You did however put yourself in an awkward spot by saying "just because something validates doesn't mean it's properly done." tables validate to XHTML Strict and beyond, I have proven that, the validater can tell if an image is being used in a table cell or even if the table is nested and if it was wrong it would fail it. Is the validater that bad or maybe, just maybe tables are ok

Jeeves, quoting the people who I suggest can't do the old stuff is pointless, of course they are going to do an about face.

For the books. HTML had how many versions before XHTML ? and tables changed how many times since creation?
So lets see, tables weren't wiped out even though some claim they were used wrong, they weren't degraded at all instead they were enhanced/ added to.
You guys are closed minded, but if you have any spare time and/or are interested, find out what tbody etc were meant to be used for.

Do you know what semantic means, Busy? Quite obviously not.

I'm done arguing with you about this. I just can't be bothered. It's like arguing with a brick wall. I've got better things to do.

Jeeves (or anyone else for that matter), you can carry on

I thought you and Busy were friends actually!

just noticed the thing under Busy says MODRATER, is it meant to be spelt like that? lol

Busy wrote: tables validate to XHTML Strict and beyond, I have proven that, the validater can tell if an image is being used in a table cell or even if the table is nested and if it was wrong it would fail it.

Well of course they validate, this isn't about getting rid of tables totally, do that and you'd be left with nothing to hold tabular data.

Busy wrote: the validater can tell if an image is being used in a table cell or even if the table is nested and if it was wrong it would fail it.

Well again, there's nothing wrong with tables for tabular data and by your reckoning this would be invalid as it's a strict document with a table containing images! Well it's not invalid, it's tabular data!

Next we have the description of the Strict doctype from the W3C:

W3C wrote: XHTML 1.0 Strict - Use this when you want really clean structural mark-up, free of any markup associated with layout. Use this together with W3C's Cascading Style Sheet language (CSS) to get the font, color, and layout effects you want.

(from: http://www.w3.org/MarkUp/)

In particular, take note of the the bit that states "free of any markup associated with layout." Tables - when used improperly - are markup associated with layout, so should not be used for layout, only to contain tabular data.

As for your hiding behind the validator remember that validation and conformance are different:

W3C wrote:
Markup languages are defined in technical specifications, which generally include a formal grammar. A document is valid when it is correctly written in accordance to the formal grammar, whereas conformance relates to the specification itself. The two might be equivalent, but in most cases, some conformance requirements can not be expressed in the grammar, making validity only a part of the conformance.

(from: http://validator.w3.org/docs/help.html#validandconform)

So although the validator can check the validity (well formed-ness, whether the tags/attribute you're using are in the DTD, you haven't put a block level element within an inline element etc.) it cannot give you conformance. Only understanding what the specification means will allow you to achieve this, if you think using tables for layout conforms to XHTML 1.0 Strict, then you don't understand the specification.

Finally, the word "semantic:"

Compact Oxford English Dictionary wrote:
Adjective relating to meaning in language or logic.

(from: http://www.askoxford.com/concise_oed/semantic?view=uk)

This is a big part of XHTML, the use of semantic DTD modules and markup to construct pages. So markup should relate to meaning instead of formatting (that being the responsibility of CSS), a table implies tabular data (statistics, a list with aggregation etc), whereas a div a generic container. Apply a meaningful name to that div by adding an id and you have a generic container with a meaningful name, far more semantically correct for items like "header," "main," and "content" than a table.

These facts are incontrovertable, moreover Timmy agrees.

DaveyBoy wrote: just noticed the thing under Busy says MODRATER, is it meant to be spelt like that? lol

Yeah, we're being mean about his legendary terrible spelling.

We love him really!

Busy wrote: Tables if used correctly (not nested to the hilt) are perfectly exceptable, is just all the css nazis saying they not because they can't understand tables.

"Godwin's Law (also Godwin's Rule of Nazi Analogies) is an adage in Internet culture originated by Mike Godwin on Usenet in 1990 that states:

As an online discussion grows longer, the probability of a comparison involving Nazis or Hitler approaches 1.

There is a tradition of protocol in many Usenet newsgroups that once such a comparison is made, the thread in which the comment was posted is over and whoever mentioned the Nazis has automatically lost whatever debate was in progress."

http://en.wikipedia.org/wiki/Godwin's_law

See, the argument was over before it even started!

Great, so I wasted my entire evening replying in an argument that was over anyway?

Bugger.

DaveyBoy wrote: "OMG YOUR CODE IS CRAP, YOU HAVE 2 XHTML ERRORS, YOU TOTAL NOOB!!!"

Lol, what about a W3C l33t validator that insults you like a hardcore World of Warcraft player every time you get an error?

"A11 y0ur s1t3s ar3 b3|0ng t0 u5!"

Busy wrote: 12 34 is valid because is contains "tabular data" is it not

That shouldn't be in a table, it should be in a list. The reason for this being: It's a list, not tabular data.

Busy wrote: imageimage imagecontent

Simple: I thought when I first read your post that this was tabular data, like financial figures, or product pictures with their order codes. The mere fact you used a table denotes tabular data (ergo semantic confusion).

Busy wrote: So again, please explain the difference between "tabular data" and layout. This is my issue, when is "tabular data" not "tabular data"

But I've already done this, it's self-evident! Tabular data is always tabular data, layout tables are used to format a page (not just to display tabular data). As for your conspiracy theory about gurus, I would expect that you've never heard of most of the people that actually set the standards for XHTML (neither have I), yet they're the ones driving this process, not Jeffrey Zeldman, Cameron Moll et al - they're just responsible for making it popular. Also, as discussed Zeldman is agreeing with us, he might waffle too much but clearly identifies he thinks Web 2.0 is becoming a pointless buzzword.

Using tables for layout is like using a spreadsheet package to write a letter. Wrong.

whos Godwin? what tables? LOL!

JeevesBond, the 1 2 3 4 was a cut down version, didn't want to fill the page, in your mind add another 27 numbers, thus making a calendar (tabular data NOT a list), now for tabular data it would be very common to use rowspan/colpan as it could be labled by month, by sector, by person ... So we agree THIS is tabular data?

**hopefully you do**
If you do carry on, if not stop and enjoy some scones
now the four cells of the table using 3 graphs and 1 content cell of a table is not tabular data by your standard yet it uses no rowpan, colspan or anything is just a boring old 2x2 cell table. I bet if this table was only 200 wide and placed in the middle of a page it could be seen as tabular data as it's displaying data, yet if it's expanded to 100% it becomes a layout. Yet a forum, db query like paypal history, googles payment ... which IS tabular data is over 3/4 of a page and set to width of the layout. If the logo etc where in a caption this would still be tabular data or layout?
"layout tables" (your word) are not tabular data tables? yet you CAN control every aspect of the table (size, color, width ...) to display tabular data. I think you're tripping yourself up here.
You say your example which is tabular data is not valid Strict because it contains images, thats just plain stupid. tabular data can contain images such as graphs as tabular data is basically findings or results is it not?
You also quote a lot of the new guys, remember tables are old (devloped by netscape) and it seems every tom **** and henry has added their 2 cents on them. the new CSS 'gurus' talk them down, because they can't use them, don't know how or maybe their mums said they couldn't, who knows. I do believe they make half this anti table stuff up to talk themselves up ... CSS is for display, layouts down to tiny alterations but there is nothing wrong with tables for layout (which this thread was orginally about). They continue to work even with XHTML 1.1 and if they were for numbers only they wouldn't allow images etc to be placed in them, they have the control and the means but wont because they know it's fine.

Megan the word nazi is slang, is a family show and can't use swear words, is nothing to do with hilter. cleanest translation is idiot.
Anyway

Quote: Richard Sexton maintains that Godwin's Law is a formalization of his October 16, 1989, post [2]:

You can tell when a USENET discussion is getting old when one of the participents [sic] drags out Hitler and the Nazis.

Strictly speaking, however, Godwin's Law is different from Sexton's statement, since it does not claim that such a reference or comparison makes a discussion "old" or, for that matter, that such a reference or comparison means that a discussion is over.

from http://en.wikipedia.org/wiki/Godwin's_law
Also the thead,tbody etc you saw it but didn't connect, w3c has the techincal version but if you read into it (and w3c shows this), was meant to be used with css for control but not everyone picked up on it

Just thought I'd add this as w3c seems to be quoted a lot w3c on tables namely

Quote: The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.

which is first paragraph. And according to your reckoning Jeevesbond anything other than text is not tabular data. Another one further down the page

Quote: Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

which is because of the abuse in the past, no where does it say your an idiot or low life if you use them.
Here is another from Netscape 1.1 on tables remember they created them and another from w3c there are heaps more but this last one is working CSS2 into tables so makes the second quote null as it shows how to render to non-visual media and the netscape one is one of the first ones.
more css Sorry but I just had to quote this bit, is funny

Quote: This makes it practical to create the markup for HTML tables with everyday text editors and reduces the learning curve for getting started. This feature has been very important to the success of HTML to date.

(there is more to that paragraph).

Close minded people will follow the trends like sheep, do as i say cause i am the one ... the open minded people realise there is more than one way to skin a cat. I haven't much time at the moment but am looking back in the old Netscape archives for where it states tables to be only for tabular data or when the first mention of this is, my guess is when XHTML finally got picked up on, remember that came out in '02.

End of the day you see what you want to see, close minded people walk with their eyes shut and it's their way or no way (like all these so called gurus).
Tables or CSS, whatever works for you, keep it valid, keep it clean. Use what works for you, don't be afraid to try new things but don't get sucked into trends because someone says it's right.

Busy wrote: Close minded people will follow the trends like sheep, do as i say cause i am the one

So why, when someone asked how to do a 2 column layout in CSS, did you start - yet another argument about tables?

Do as who says?

No, Busy, you did start the argument:

Busy wrote: Tables if used correctly (not nested to the hilt) are perfectly exceptable, is just all the css nazis saying they not because they can't understand tables.

You can't insult people and make wild accusations and expect them not to respond. Accusing people of being sheep and just following trends and gurus doesn't help either.

However, I will admit that when I read that it made me too angry to really give credence to your other arugments. You did raise some interesting points about how tables can be used for layout successfully. I'm not ready to say that this is the most *correct* method of layout but I won't say that it's totally incorrect either. Both methods have their pros and cons. And really, this is not a religion. As I said back on page 2, its not the most important problem we face in web design - by far!

I do think we need to listen to each other rather than just reacting to perceived accusations. I'm guilty of that too

I've done some digging around on the W3C site and came up with some interesting links.

Summary

To summarize (for those who don't want to read all this), the W3C feels that CSS is the preferred way of doing visual layout. This goes back to 1998(!). However, at the time the specs were written (up to 2001), support for CSS wasn't good enough so they acknowledged the use of tables as an alternate way to lay out web pages. The W3C specification that Jeeves quoted earlier makes it quite clear that layout should be done with CSS in xHTML strict (NOT in transitional). So, tables are okay for layout in xHTML transitional, but not Strict.

References

W3C Articles and Documentation

From the WAG (accessibility guidelines):
http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment

Basically, CSS is preferred for layout, tables can be used as long as the table makes sense when linearized.

How to do a tableless layout - http://www.w3.org/2002/03/csslayout-howto

This is the documentation for the redesign of the W3 site in 2002. The opening paragraph states clearly that tables shouldn't be used for layout (note: shouldn't, not can't). They go on to outline the reasons why in the next section.

W3C documentation on the CSS2 table properties: http://www.w3.org/TR/REC-CSS2/tables.html

Quote: Tables represent relationships between data.

Busy referred to some CSS properites that were meant to be used with tables. Yes, because you need to be able to format tables with CSS in the same way you would with an excel spreadsheet, for example. The W3 can be confusing in this way because they do use the term "layout" in the context of formatting tabular data.

Now, he also seems to believe that a layout IS tabular data which I think is pretty far fetched. If you can argue that a layout is tabular data, I think you could just as easily argue that a layout is a list Of course it's not!

W3 Discussion Lists

This is where things get interesting. There was some discussion amongst the W3C team about how to handle tables for layout. This is going on from 1998 through 2001. Even they got fed up with it. Throughout these discussions it is clear that the W3 philosophically prefers CSS for layout. It is also very clear that they consider using tables for layout to be a hack. However, they do acknowledge that at the time (2001) there was a need for a quick and easy alternative for doing page layout because of the low level of CSS support.

Note that this is a group discussion and I'm not clear on the political hierarchy or anything - i.e. some peoples' opinions may have more weight than others in the decision making process but I"m not sure whose.

1998 discussion: http://lists.w3.org/Archives/Public/w3c-wai-gl/1998JulSep/0055

Quote: This message addresses the importance of transitioning the WWW to using CSS for complex visual layout rather than continuing down the current hack of abusing tables.

In 1998!! Note who is copied on the message

1999 - http://lists.w3.org/Archives/Public/w3c-wai-gl/1999AprJun/0016
Simple tables are okay from accessibility perspective:

Quote: Perhaps it is appropriate to encourage people to avoid tables for layout, but this should be done in a "Note" rather than in a checkpoint, perhaps on the model of the note regarding avoiding "alternative pages" located at the end of guideline 11. A page or a site should be able to use tables for layout and still obtain a double-A or triple-A conformance rating..

http://lists.w3.org/Archives/Public/w3c-wai-gl/2001JanMar/0463.html

Quote: I know of course that this is slightly heretical: there's a philosophical position that CSS should be used for all layout. But the argument there is that layout violates the intended "purpose" of table. Once we make layout an intended purpose, that objection vanishes by definition. Also, that philisophical argument is flawed anyway, since even data tables confound content and layout, so we don't have a clean separation to maintain.

This person also suggests a "purpose" attribute for tables that could be assigned to "data" or "layout". Obviously, this never happened. This language does make it clear that they do make a distinction between tables used for layout and tables used for data. And that data should be the default use of the table mark-up.

http://lists.w3.org/Archives/Public/w3c-wai-gl/2001JanMar/0523

Quote: Layout tables are a handy technique for rapid construction of document structure. Until we have a replacement handy technique for rapid construction of document structure to offer authors, I am reluctant to simply remove this facility from the medium. Charles is keen to give them the axe.

This is a quite lengthy discussion about how to handle the use of tables for layout. There was one person in there who seemed to suggest that layout tables are another flavour of data tables although that does not seem to be a commonly held opinion within this group. There was another post, by someone who seemed to have some authority, that once xHTML 2.0 came along this would be a moot point because CSS support would be good enough to make layout tables obsolute. This is the case now (although we are still working under xHTML 1.0...)

http://lists.w3.org/Archives/Public/www-html/2003Jul/0079.html
2003 discussion on including a class="layout" attribute for tables. They seem to be getting more annoyed with the use of tables for layout.

Quote: I don't think any such code meaning "this table is for layout" should be introduced, as it only legitimises the use of tables for layout, which is a semantic nightmare.

http://lists.w3.org/Archives/Public/www-html/2003Jul/0082.html

Quote: The whole direction of XHTML is away from presentational markup. Hijacking the semantics of existing attributes to create hacky workarounds so you can use table layouts with a "clear" conscience is not a good idea.

Conclusion

Now, all of the discussions about tables being a suitable way of laying out pages are in the context of poor support for CSS at the time. Five years later, CSS is supported well enough to make CSS layouts viable for the experienced web designer. Does that mean tables are flat-out wrong and shouldn't be used for layout at all? Not really - the W3 acknowledges that as-of 2001 they were a quick and easy way to create pages layouts. For the average creator of web pages that is still true.

Supporting the W3C

My opnion is that the W3C made the web what it is today. We have standards. We have reasonable cross-browser support for standards. We need to support their efforts so we don't slide back into the late-90s tag soup era. To me, supporting the W3C means following their preferred method of laying out pages, which is CSS.

This does not mean that tables are WRONG and your are stupid or incompetent if you use them. It just means that CSS is good and if you're serious about web design you should think about using it.

About the (so-called) Gurus

Busy seems to think that the "gurus" (aka 'nazis') just don't understand tables. I don't thnk this is true. It may be that at one time they did create sites with "tag soup" type mark-up. Everyone did at the time, really. But they saw the benefit of new ways - much sooner than others - and got on-side with the W3C to advocate CSS as the preferred way of marking up web pages.

I do think that some of these people tend to be out of touch with the average web page creator. While tables may not be an appropraite method for a high level professional, I think they are acceptable for average web page creators - a group that is expanding more and more these days. They're quick, easy, and they work.

But really who are you (or I) to challenge the position of someone who has written a book on the subject. I think if these people were so wrong about it someone would have pointed it out by now. There isn't even any debate among the experts about the use of tables for layout - and the documentation above from the W3C makes it clear that they are correct.

There was a thread going around the blogs awhile back proposing that people who use tag-soup methods of mark-up should not be considered "professionals". They do not mean that you are an idiot or a moron or incompetent if you use tables for layout. Only in the context of selling high level web design. I don't think they necessarily mean small-time web designers - they mean the big leagues, because that is their context. I agree with this - if you're charging people a lot of money for a product or service you had better be using top of the line methodology. In any field. But for small-time, low cost products I'm not sure it matters as much. Clients should realize that you get what you pay for, and as designers we need to be providing a good product for the price we're charging.

ETA: so when they say "incompetent" they do not mean you personally, just as when you say "css-nazi" you do not mean me.

.... and this might just be the longest post ever

My thoughts on the subject:

CSS generally saves file-space
This may or may not be a big deal to you, some people (like myself) are very anal about file-size. generally takes up alot less space than .

CSS is more future friendly
Generall CSS is seen as the way forward for layout and HTML should be kept seperate. Most browsers (not including IE) are edging towards this idea and very slowly agreeing with WC3.

Tables are more popular
Tables have been used for layout for as long as I can remember and are by far the dominant method. Although this doesn't mean they're any better, it shows that there is no right or wrong way to do things.

Tables are generally easier
As a user of both CSS and tables for layout, I find tables are usually quicker to set up and style. As more people are familuar with HTML than are familuar with both HTML and CSS, it's easier to stick with what they know than learn something new for what essentially makes no difference (to appearance).

Tables are "incorrect" or "wrong"
I see this arguement alot, that tables are for tabular data only and CSS is for layout. Yes, that may be true in the eyes of the WC3, but tables are still the dominant choice.
It's like the IE vs FF/Opera arguement. Most people know that I.E. is horribly non-compliant but since it's the dominant browser most people will lean towards designing for it. This doesn't mean it's right or wrong. It just is.

The only thing that is certain is that the internet is ever changing, tomorrow CSS may dissapear completely, so might tables.
I'm aware that the WC3 would prefer that I chose tables only when displaying tabular data, but then there are a billion trillian examples of HTML being used in ways which the WC3 would consider incorrect and sometimes these create wonderful unique new ideas and inspiration. Other times they are an utter disaster and begin horrible trends.

The conclusion of this interesting debate is a very simply one: At the end of the day it really doesn't matter.

Megan wrote: .... and this might just be the longest post ever

TWF Post Length Leaderboard

'
I made a table! Anyway, sorry Megan your post length doesn't even get into the top 10.

Your post length:

'

In your defence, none of the longest posts have much content - they're all code snippets, so maybe you have the longest content post ever. The title of the last one's quite funny since it's in the top 10 longest posts leaderboard.

I agree to a point with your - very well structured and researched - arguments Megan, and those discussion lists do make interesting reading. I concede that sites designed in the past should never be rubbished for doing what was right then, also there's nothing essentially wrong with designing to HTML 4.01 Transitional or XHTML 1.0 Transitional now. It's a bit daft when the rest of the world is moving forward, but it's the individuals choice if they wish to fall behind.

However designing a site using tables for layout, then labelling it as XHTML 1.0 Strict is wrong (which I believe is what Busy is advocating?). This seems plainly obvious to myself and the W3C, and that is my critisism: The W3C have assumed that we'd all know that tables shouldn't be used in XHTML 1.0 Strict, but nowhere do they actually explicitly state this in the recommendations.

Instead arguments such as the one on this forum happen, and Megan has to spend hours digging around in W3C Discussion Lists to find what they really mean.

Summary: Policy and guidance regarding tables and their usage (layout vs. tabular data) should be provided by the W3C.

And that's the last I have to say on the matter (I hope...)

if i use tables, and it validates as xhtml 1.0 transitional, am i allowed to jump up and down and get drunk?

DaveyBoy wrote: am i allowed to jump up and down and get drunk?

Yes, but make sure you don't try doing both at the same time, could lead to spillage.

Too late

Anybody interested in a soiled logitech?

I'm not going to reply as I said I wouldn't, Megan you have a slight boo boo in your summary, trans and strict around the wrong way (not that I agree with it).

Also writing a book means nothing (this isn't tabled related ), I have written a couple of books (children's books) and anyone, and I mean anyone can get published. Just because you write a book does not mean you are good, right or political correct, perfect example would be "Dr Death", the Australian doctor who is written several youinasia books (yeah can't spell it but you should be able to figure it out) yet he is barred in many countries around the world. He IS a professional, has written many books yet the govt. can ban him from entering countries and talking about it. (He's trying to set up in NZ at the moment).

Ok will comment on one small thing: Hijacking the semantics of existing attributes to create hacky workarounds so you can use table layouts with a "clear" conscience is not a good idea. Yet CSS has to be 'hacked' (such a stupid term) for browser compatibility, tables using XHTML trans needs very little if any 'hacking' to be valid. The CSS used on/in tables is standard CSS stuff. CSS is abused everyday, using CSS to display width and height on images is abuse, yet text alignment, colours, borders and margins are wrong? go figure.

Quote: However, the W3C specification that Jeeves quoted earlier makes it quite clear that layout should be done with CSS in xHTML strict (NOT in transitional). So, tables are okay for layout in xHTML transitional, but not Strict.

How is this incorrect? The "NOT in transitional" is slightly inaccurate because in a transitional document you should be moving towards strict xHTML methods. So to say that layout *should be* done with tables in transitional is not quite right. It can be, not should be.

And I'd agree that CSS is hacked around a fair bit by many, I'm not saying that all people always use it correctly. That's beyond the scope of this discussion

Well I'm losing interest in the subject as we're going around in circles. All the arguments are on the table and I think we can happily agree to disagree.

There have been multiple threads and posts on the subject and - for me - it's been discussed enough, the rest of you feel free to continue the banter, I'll get involved again if someone with a new viewpoint appears.

Here was the first historical argument, read through it incase you need to make peace with the topic...

http://webmaster-forums.net/showthread.php?t=29495

oh and Busy, it is spelled euthanasia... the act of mercy killing...