Tables Vs. CSS - A Fight to the Death

[ArticleBot]

This is a dedicated thread for discussing the SitePoint article 'Tables Vs. CSS - A Fight to the Death'

[Egor]

Hmm. The Article title is pretty misleading, considering you can't compare, or replace tables with css.

[Octal]

But the demands of the various browsers and clients still make the table setup a better option at least in my world.

Just be careful because if you are making websites for clients that provide a service then you could be violating the UK Disability Discrimination Act, US Section 508 Guidelines and/or equivalents. Table based design/layout can render sites inaccessible

[Paul O'B]

Hi,

Originally Posted by anonymous

Someone may have beat me to it but the problem with the layout is that if the content of the Membership section is longer than the News section then the Sighting will be floated to the left. This means that Sightings will be directly beneath the News. The only way to avoid this is to use float: right; on the Sightings section, but that brings back that nasty bug in IE. I would suggest using more containers and separate the footer from the the body of the main content and add extra CSS to style it properly.

This can be simply fixed with less code not more. Just get rid of the float altogether and give the content a margin left to clear like so:

#membership, #sightings {
 width: 415px;
 padding: 0px;
 margin: 0 5px 0 215px;
 }

Couldn't be simpler

I could do that whole layout in about 30 minutes in CSS without using a bg gif either. (It would take me about 2 weeks with tables lol - because I'm useless with tables).

I expect someone fluent with tables could do it just as quick also. I see no right and wrong way - just what's right for the job in hand. Of course the w3c recommends not using tables for layout but you can make tables more accessible with a bit of thought.

My preference is to code in css because thats what I do best but if a client says that he wants the layout to look good in NN4 then I'd either talk him out of it or revert back to a table if there was no other solution.

Some things suit tables and some things suit css, you just have to decide whats best for the job in hand and takeing into account any other issues such as accessibility/usability etc.

I think the article was interesting and raised some interesting points but Id rather get away from the tables versus css standpoint as it only seems to cloud the issue. It's like comparing chalk and cheese

Paul

[Golgotha]

one thing is certain, the future of design/layout is CSS. Like all paradigm shifts, it takes time, some will move faster than others to adopt. But as CSS3 rolls out and browsers streamline others will get on board.

[Anat]

I think it was a great article and basically it makes me even happier with my current choice - mixing tables and CSS. I use CSS where I can to position elements more accurately and save on code and of course for buttons, text etc. However, I do still use tables for layouts, when I want to get greater browser compatibility without having to spend too much time figuring out the different css "hacks". I use one external CSS sheet for every site and I also often use PHP templates that allow me to keep the "design part" seperate from the actual "content". That way, my content pages are very slim and have nothing but content and <h1> and <p> tags etc. If I ever wish to move to a totally CSS based design, I already have content seperate from design.

Why not pure CSS? because I don't have the time and energy to validate it on the various browsers and work out the hacks. I'm used to working with tables for layouts so it's simply faster that way.

[Winged Spider]

I don't like this article too much.

Why didn't he use CSS in the table layout to control padding and rollovers? There is not a stated rule that you CAN'T use CSS when working with a table layout. He's comparing 2000 markup techniques with modern ones. What he should of done was compare CSS with Tables to CSS without tables.

I agree with ow1n's comment too. The author does not try and achive any sort of complicated design with the sites, one of tables strong points. He designed a site that would work well with CSS not something fancy and complicated like wired.com.

[DougBTX]

Originally Posted by Winged Spider

He designed a site that would work well with CSS not something fancy and complicated like wired.com.

Perhpas it would have been better if he had used a real world site which he had made as a source for examples instead of the one listed.

Douglas

[andrin]

Originally Posted by Winged Spider

not something fancy and complicated like wired.com.

Heads up Spider!

Wired.com is: "Look ma, no tables"

[Overcaffeinated]

Ok, I'm late to the fray, since I was unaware of this topic (I thought I was going to get a notice or something). Some answers:

• Anonymous 1: Yes. 4 hours. I was watching "24" at the same time. Sue me.
• mstwntd: Yes, you can. I did. That was the point.
• Another Anonymous: You're right. The sightings section would fall by the wayside if the membership section is too long. I didn't spot that. Paul O'B's solution seems to take care of it nicely.
• Paul O'B: How would you make the layout without a bg gif? Account for the fact that you don't know which of the columns will be longer and the need for them both to go all the way down to the footer.
• vinyl-junkie: You're right about the text-wrap issue with the table around the image. That's an extraneous table that I put there by mistake. I was very rusty with table based design. I spotted the error prior to publication, but in all fairness, didn't mind much, so I didn't correct it. You can, indeed float that by setting " align='right' " on the table properties.
• Another anonymous: "SitePoint has a book to sell..." I am no associated with Sitepoint's book in any way other than I'd like to buy it. I wrote the article from my perspective alone. There's a reason I'm designing with pure CSS now, so the outcome isn't that much of a surprise.
• For the ones clamoring for a hybrid approach: That was not the intent of the article, and I think it would make for a far less interesting read. Using a hybrid approach is, after all, a compromise. I think it's a fairly valid one, actually, but it would make for boring comparisons. There is also a lot to be gained from knowing how to do the designs the "hardcore" way (pure tableless CSS) and then bending the rules to use tables where necessary.
• DougBTX: My site ( http://overcaffeinated.net ) has a fairly complicated layout and is a real world site. I didn't want to tackle something like that precisely because it doesn't lend itself to careful analysis (too many variables and different methods to achieve the effects). The article is subjective enough as it is.
• normaldude: That's ugly. Please don't do that.

I'm glad the article had a warm reception. It is not meant to be an end-all be-all of the whole Tables vs. CSS debacle. It's a case study, and I had a lot of fun writing it.

[normaldude]

You can look at the market leading websites like Amazon, Yahoo, Ebay, Google, etc. What they all have in common..

1) They all use HTML tables.

2) They all look fine in all browsers.. down to even non-CSS browsers like Netscape 3.0.

CSS produces inconsistent results across different platforms and browsers. You can just look at CSS forums around the internet, and you'll see experienced coders struggling with cross-browser issues. With HTML tables, it's easy to make webpages that will look good in virtually ANY browser. You never know what someone might be using.. Opera on Mac, Safari, a PDA on GPRS, proprietary web terminal at an airport/internet cafe, old versions of IE or Netscape, whatever.

It's ok to use CSS for minor effects like removing underlines from some links, or the occassional hover effect. But your website shouldn't "blow up" if CSS fails for the visitor. You shouldn't RELY on CSS.

1997: "Push technology will make browsers obsolete". Nope.
1999: "All websites will be designed in Flash". Nope.
2000: "WAP/WML is the future". Nope.
2004: "Pure-CSS, tableless designs will replace HTML tables". Nope.

Looking at the successful, market leading websites - like Amazon, Yahoo, Ebay, Google - they all have followed a similar strategy of keeping it simple, functional, and making sure their websites look ok to 99.999% of internet users. And with that strategy, they beat their competitors. After all, Boo.com had an exciting, "cutting edge" website, but we all know what happened to them.

Looking at real world results - not idealistic theory - and you'll see HTML tables are the clear winner. If you care about winning, then you should focus on having a simple, functional, HTML table-based website that looks good to 99.999% of internet users.. the strategy used by the billion dollar market leaders like Amazon, Yahoo, Ebay, Google. If you don't care about winning, but want a beautiful cutting edge site, then build something like CSSzengarden.

[Zoef]

<fact>
There's already rather a few 'big' CSS based sites, but it's been dripping rather then pooring.
</fact>

<speculation>
I'm thinking a lot of companies are working behind the scenes on a CSS redesign but are holding of implementation untill they see what Longhorn's browser will be like. I have this feeling that if it is fairly standard compliant the floodgates of CSS will be opened.
</speculation>

That's what I might do if I were a well paid corporate manager scared to screw things up anyhow (*).

Rik

(*) Unfortunately I am not.

[Paul O'B]

Paul O'B: How would you make the layout without a bg gif? Account for the fact that you don't know which of the columns will be longer and the need for them both to go all the way down to the footer.

Solved that ages ago - Like this

http://www.pmob.co.uk/temp/3column_simple_1.htm
http://www.pmob.co.uk/temp/2column_simple_1.htm
http://www.pmob.co.uk/temp/2column_simple_table2.htm

Paul

[KiwiJohn]

One of the major selling points of CSS is the separation of content from layout/design. Based on many people's comments, I understand this to mean that regardless of what is within the <body></body> section, the layout/design can be modified simply by altering the stylesheet rather than going through every file to make the changes.

This is certainly true when it comes to styling. Even without plastering the file with class tags, the cascading nature of CSS can be used to apply styling to the text. The style can then be easily changed simply by changing the stylesheet.

While this is certainly true for fonts, coloring, and even margins and padding, I wonder just how great a change could be rendered in the layout of multicolumn CSS based sites without changing some DIV tags in the body. For example changing from a 2 column to a three column layout with the exact same content, just positioned in different places.

[Zoef]

Originally Posted by KiwiJohn

I wonder just how great a change could be rendered in the layout of multicolumn CSS based sites without changing some DIV tags in the body.

You do have a point and at times that might be needed.

However, if your site has a proper 'semantic' structure which contains a 'number of identified parts' it will be possible to rearrange those 'parts' without touching the html.

Must link to this once more: http://www.csszengarden.com/

Rik

[Egor]

Overcaff,

I was referring to the Title. Tables can be replaced with other elements styled with CSS but not css on it's own. I know I know, I'm too picky

[DougBTX]

Google stats:



No numbers though. Page

Douglas

[IJoeR]

Here is what i am curious about...

I use tables to display data sometimes up to 12 -15 columns.

Would it make sense to use CSS in this case or just stick with the tables?

[Overcaffeinated]

Originally Posted by IJoeR

Here is what i am curious about...

I use tables to display data sometimes up to 12 -15 columns.

Would it make sense to use CSS in this case or just stick with the tables?

Stick with tables. Tables are meant to display such kinds of tabular data. It's using them for layout that is considered incorrect.

[DougBTX]

Originally Posted by Overcaffeinated

Stick with tables. Tables are meant to display such kinds of tabular data. It's using them for layout that is considered incorrect.

Perhaps we need to look at this slightly differently.

The question people are asking is: "Should I use Tables or CSS?"

Superfically it makes sence when you are talking about layout: Should I position things with a table, or should I position them with CSS?

"Tables" are things made of HTML tags, which look like this: <tag attribute="value">

"CSS" are things which look like this: selector { property: value; }

What makes the question above wrong, is that in a "CSS" thing, the selector always selects an "HTML" thing, normally a tag. That means that if you use CSS, you have to have some "HTML" thing to select. CSS can't exist by itself.

That means that the question really is: "What should the CSS select?"

Well, what should it select? What HTML should someone use?

That's the w3c's job: to tell people which tag is the best for which job.

So, when Joe asks "use CSS or tables" we have to look at what we could replace the tables with; in the HTML. We've got lots of tags to pick from. The ones brought up so far would be the unordered list, <ul>, and the division, <div>. Three otions then, because we are wondering whether we should use tables or not.

Here are what the w3c says we should use these tags for:

<div> - the division:

A generic mechanism for adding structure to documents.

<ul> - the unordered list:

A list of one or more list elements.

<table> - the table:

Allows authors to arrange data into rows and columns of cells.

So that is really it. If you don't want your blocks to mean anything, use the generic division. If you want to make a one dimensional list, use a list. If your data is in rows and columns, use a table.

Whichever option you take, you'll probably want to use CSS to style it. The only question after that is: "what do you want to style?"

"Display data in 12 -15 columns?"

Sounds like rows and columns to me, go use a table.

Regards,
Douglas

[Paul O'B]

Good answer Doug

[greg.harvey]

Originally Posted by Anonymous

Unfortunately, IE 5.0 is still a significant audience.

I fail to see the significance...? It would work fine if he spent another couple of hours on it... that's not a problem at all.

Originally Posted by Sergio

This can undoubtedly be fixed, provided another hour of tinkering. I won't do it, though. For the scope of this article, I think this is good enough, but if this was a real client, I wouldn't sacrifice Explorer 5.0 support. That would mean hunting more bugs and playing with the design until it's ready.

On our servers, IE5.0 was about 15% of the stats last month. And that figure gets smaller every month. Not long now!

[megamanXplosion]

<table> - the table:

Allows authors to arrange data into rows and columns of cells.

I think that I should expand on that definition a little bit. By that definition, layouts can be made (rows and columns of cells) with tables while remaining semantically correct. I think a better definition would be...

Allows authors to arrange data into rows and columns of cells where the rows and columns have a logical relationship.

That definition expands on where it is truly appropriate to use tables. For example: If you have a table for employee information, each row is about an employee and each column is about a different aspect of the employee's job (Salary, Attendance, etc.). The cells inside of Steve's row have a logical relationship with the column it is placed in (Salary, Attendance, etc). This would be semantically correct. By my definition, a layout would not be semantically correct because there isn't a logical relationship between the rows and columns of the design, they are simply divisions.


Sorry if I'm being picky, but I thought it was worth mentioning to avoid arguments over bad definitions

[DougBTX]

Originally Posted by megamanXplosion

Sorry if I'm being picky, but I thought it was worth mentioning to avoid arguments over bad definitions

You can say it if you like, but I took the w3c definition: If you're not happy with that perhaps you should complain there

Quoting some more though:

http://www.w3.org/TR/html4/struct/tables.html

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.

... [after a description of table structure] ...

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.

Note. This specification includes more detailed information about tables in sections on table design rationale and implementation issues.

(And that's a "should not" not a "must not"...)

[Paul O'B]

Originally Posted by mstwntd

CSS layouts are much easier to code than table ones.

I agree