/    Sign up×
Community /Pin to ProfileBookmark

CSS vs. Tables

I am sure this discussion has been rehashed over and over again.

But, when dealing with layout, is the only reason NOT to completely use CSS for the page because of backwards compatability with older browsers?

When I first took a basic HTML/design class about 3 – 4 years ago, tables were the “only” way to layout a page.

Forward to now. I have graphic design experience, mostly geared towards print. Anyway, I see tons of potential using CSS, and am starting to get the feeling that CSS and Flash are the _only_ way to go now to basically create modern websites geared towards folks with high speed internet connections, and the most up to date browsers.

Please, let me know all of your thoughts on this subject. ?

to post a comment
CSS

40 Comments(s)

Copy linkTweet thisAlerts:
@David_HarrisonMay 11.2005 — There's no real reason not to use CSS now. If an old browser doesn't support CSS then the page will simply be delivered without styles, all of the content will will be accessible to the user, it just won't look as pretty. As long as the content is still delivered to those users then that's all that counts. The percentage of users out there who surf with a browser that doesn't support at least some CSS is absolutely tiny.

Unless the Flash animation IS the content, such as a cartoon, then it should only be used to add fluff to a page. Using it for site navigation for example would not be suitable, because then users who do not have the Flash plugin would not be able to navigate.
Copy linkTweet thisAlerts:
@GJPG5authorMay 11.2005 — yeah, well, the audience I would be targeting with my site, would have the flash plugin. I was thinking that I could achieve what I wanted to do with my portfolio using flash.
Copy linkTweet thisAlerts:
@SiddanMay 11.2005 — one thing css really lack of ... the simplicity to align something to the bottom

tables for container and css for control is the most compatible way, I think,,, and much faster to code and get it right instantly
Copy linkTweet thisAlerts:
@GJPG5authorMay 11.2005 — one thing css really lack of ... the simplicity to align something to the bottom

tables for container and css for control is the most compatible way, I think,,, and much faster to code and get it right instantly[/QUOTE]


formatting text in CSS does seem to be a bit tricky, but a moderator, Jona, posted a link to the CSS directory, and I learned a few things in a matter of 15 minutes on that site regarding text. I am sure there's a way of doing that without having the text spill out of the box.

Plus, I think being persistant and nailing down CSS will prevent me from ever thinking in terms of tables again.
Copy linkTweet thisAlerts:
@David_HarrisonMay 11.2005 — One of the bad things about tables for layout is that you are forced to think in terms of a grid layout with no flexibility. Then when it comes to converting to a CSS based layout it's hard to let go of that way of thinking.

Check out www.csszengarden.com to see some awesome designs and all with the same markup, CSS can take a page and apply a million and one different designs without altering the markup at all.
Copy linkTweet thisAlerts:
@GJPG5authorMay 11.2005 —  CSS can take a page and apply a million and one different designs without altering the markup at all.[/QUOTE]

Yeah, one of the main things that I like about CSS is its versatility and potential. I'll reiterate this again a few more times, but having a very brief background working in tables, I definitely see why CSS > Tables.

I still think there's room for thinking in grid based terms, coming from a graphic design standpoint, but using css and working from grid based thinking allows for alot.
Copy linkTweet thisAlerts:
@Stephen_PhilbinMay 12.2005 — One thing I hate about CSS is the inability to make nicely laid out liquid forms to go with the rest of the nice and liquid page. >_<

For everything else, it's great. ?
Copy linkTweet thisAlerts:
@JPnycMay 12.2005 — Well I feel like I have a good grasp of CSS, and yet i still find tables easier to deal with, particularly where cross-browser compatability is concerned, and ESPECIALLY if you're in a hurry. I really use both.
Copy linkTweet thisAlerts:
@SiddanMay 12.2005 — thhhheeeeereee we goo... a post from someone experienced

I agree with you totally JPnyc
Copy linkTweet thisAlerts:
@BonRougeMay 12.2005 — Tables are a pain in the arse.
Copy linkTweet thisAlerts:
@JDM71488May 12.2005 — boy did i love tables 2 years ago... i believe it was a review from this site to which someone told me i should steer away from them... yes, it was a difficult path to learn (CSS layouts) but now i love them. honestly, the completion of a desired layout without tables makes me feel good. especially when most of my web2 still uses them and frames...

about a year ago i realized how much more i like CSS, but really you do have to like it... if someone likes to use tables, then use tables... a lot of good graphical sites use tables, and it would be horrible to try and code their sites with CSS...

i like simplicity and the effect of content over how my site looks i guess... so i like simple CSS and div layouts...

as far as cross-browser compatability... you just have to learn the hacks... there is not that many... doing something harder to acheive the result correctly (using CSS > tables) looks a lot better to me.

practically anyone can use tables you know... but it takes skill to manipulate CSS to achieve the same thing...

believe me, i'm not dogging tables at all for they are my ex wife, but i felt like i wanted to voice my opinion on the matter...
Copy linkTweet thisAlerts:
@MstrBobMay 12.2005 — Well I feel like I have a good grasp of CSS, and yet i still find tables easier to deal with, particularly where cross-browser compatability is concerned, and ESPECIALLY if you're in a hurry. I really use both.[/QUOTE]

See now me, on the other hand, I find it takes longer if I were to use presentational markup and tables. People tend to have the following arguments against CSS:

1) Tables are easier

2) Impossible/Very difficult to have cross-browser designs

3) Can't do what I want

Really now, for these arguments, simply spending the time to learn the technology properly tends to solve all three. Tables will be easier when you're used to using them rather than CSS. But if you work with CSS long enough, I think it's overall more efficient. In terms of achieving what you can do with tables, CSS is very capable of going cross-browser. It's with the newer aspects of CSS, parts of CSS 2.1, that aren't supported by all the major browsers.
Copy linkTweet thisAlerts:
@JPnycMay 12.2005 — Well I find that many people who use tables, don't know how to use tables either. They write nested table upon nested table, when fairly often it could be done with one table, properly configured. Or they use tables when a ul would suffice. I really use all of it. I use tables when I feel they work best, and I use divs, spans, etc. also. And I seldom put any styling inside a tag, unless it's really a one-shot deal for the site.
Copy linkTweet thisAlerts:
@BonRougeMay 12.2005 — Tables are not for layout.
Copy linkTweet thisAlerts:
@SnitchcatMay 12.2005 — Yep, there's another thread about this -- it was a long one, I think.

Anyhow, I like tables; always have. They're easy enough to manipulate, but they're a pain to code (I can't be bothered to install Dreamweaver, etc., on my comp) -- any formatting I need for individual cells, particularly fonts, has to be added to each cell. I tried a global <font> and it wouldn't take.

As for CSS, it's a pain to learn. LOL! Good thing is, I can now happily manipulate my pages anyway I please without having to go in and alter every single individual page. Heh. And it also keeps my page weights down -- I don't want to pay for extra bandwidth because my pages are overloaded with code. And I like search engine accessibility. ?

Seriously, IMO, once you're accustomed to the logic and presentation, CSS is actually very understandable. (^_^)

Take care,

Snitch.
Copy linkTweet thisAlerts:
@JPnycMay 12.2005 — You can style a td or tr or table tag with CSS same as you can any other. Doesn't have to be done per cell. You can assign classes for those that differ.
Copy linkTweet thisAlerts:
@BonRougeMay 12.2005 — Tables are for things like timetables and sales figures.
Copy linkTweet thisAlerts:
@MstrBobMay 12.2005 — Here, I'm going to embarrass myself and dig this up:

http://www.webdeveloper.com/forum/showthread.php?s=&threadid=34991
Copy linkTweet thisAlerts:
@JPnycMay 12.2005 — But there's a lot of good points made in that thread. The embarrassment aspect escaped me ?
Copy linkTweet thisAlerts:
@SnitchcatMay 12.2005 — You can style a td or tr or table tag with CSS same as you can any other. Doesn't have to be done per cell. You can assign classes for those that differ.[/QUOTE]


Yes, I know. But before learning CSS, I had to set each cell. Cumbersome, non? Hence a reason I looked why I investigated CSS in more detail. (^_^)
Copy linkTweet thisAlerts:
@BeachSideMay 12.2005 — Tables are not for layout.[/QUOTE]

Yes they are...

Tables are for things like timetables and sales figures.[/QUOTE]

They are just not for the main layout.

I am with JPnyc I use whatever is necessary to get the job done (properly) there are sometimes when CSS is just not efficent time wise. I am not going to spend hours trying to get one DIV to act right when I can achieve the effect I need with a table.

In a perfect world we would all use CSS, HTML/XHTML, and Tables the way they are meant to be used. Unfortunatly money talks and I am not in business to go broke.

Do not misunderstand me though I make the best possible effort to conform to W3C standards, etc... It is just not always feasible. ?
Copy linkTweet thisAlerts:
@BonRougeMay 12.2005 — Yes they are...
[/QUOTE]

Err.... no, they're not. :rolleyes:

http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE

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.[/QUOTE]
Copy linkTweet thisAlerts:
@scragarMay 12.2005 — Err.... no, they're not. :rolleyes:

http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE[/QUOTE]

tables are for tabular information, not layout, but on the other hand it lays-out the info effectivly.
Copy linkTweet thisAlerts:
@BonRougeMay 12.2005 — That's true. If that's what was meant by BeachSide, then fair enough... tables are for effectively presenting (or 'laying out') tabular data. But of course, that's not what the discussion's really about, is it?

Look, some people use spans and break tags to present menus, some people use div tags to present headings, others use font tags to change the size or colour of their text... and then some people use tables to lay out their pages. Everyone's free to do what they like and if you feel that any of these practices help you present a good page, then you can go ahead and do that and no-one's going to stop you - all I'm saying is that these things (including using tables for layout) are wrong.
Copy linkTweet thisAlerts:
@scragarMay 12.2005 — what about using a basic table layout, and inside of that having absolute position objects, they break the pages flow and are as a result not shown inside of the table(infact the tables now empty and refuses to display, how about that?). If the user doesn't have css enabled then they get the tables layout, worse, but it works.
Copy linkTweet thisAlerts:
@NogDogMay 12.2005 — This all reminds me of the days when the arguments in the programming world were about the use of GOTO statements. Everyone used to use them, then some started pointing out why this was not an optimal coding technique. Many programmers continued to use them, because it worked and they didn't want to be bothered with learning other methods that demanded more structure and planning in their code. Now, after many years, no self-respecting programmer would use GOTO (assuming he can actually find a modern programming language that has a GOTO-type statement).
Copy linkTweet thisAlerts:
@BonRougeMay 12.2005 — It's funny, becuse I was think something very similar myself. It seems like the old-guard hanging onto something they always thought was right. Although they've finally found out that there's something better, they can't quite let go of the past.
Copy linkTweet thisAlerts:
@BeachSideMay 12.2005 — That's true. If that's what was meant by BeachSide, then fair enough... tables are for effectively presenting (or 'laying out') tabular data. But of course, that's not what the discussion's really about, is it? [/QUOTE]
Exactly ? One just should not simply say tables are not for layout.


But of course, that's not what the discussion's really about, is it?[/QUOTE]

No not really ?


What really irritates me is the lack of consistantcy across browsers and platforms. I mean how many browsers do we need to test for when we develop a site? 5? 6? and they ALL present stuff different. That is ridiculous! This is like building a stove and saying hey you can only use this type of frying pan to cook with. Some people can modify their frying pan to be used on our stove but we don't support that so if you get burned your fault ?
Copy linkTweet thisAlerts:
@David_HarrisonMay 12.2005 — What really irritates me is the lack of consistantcy across browsers and platforms. I mean how many browsers do we need to test for when we develop a site? 5? 6?[/QUOTE]While I'm coding away I test in one, Forefox 1.0. When I'm done I'll test in Opera 8.0, usually it works pretty much the same in Opera as it does in Firefox. Then I'll view it in IE 5.0, 5.5 & 6 and no doubt apply many fixes. Then when I've got it working in these 5 I usually leave it, unless it's a really important site, in whch case I'll try it on NN6 & 7, Mozilla 1.3 & 1.7, Opera 6, 7 & 8 and Firefox 1. I don't have access to any Mac browsers but usually I can find someone with a Mac to have a look for me.
Copy linkTweet thisAlerts:
@SiddanMay 12.2005 — MstrBob.. that link to the other thread you posted was a well read., but ended a bit abbtruply.....

I feel sorry for PeOfEo, really. Almost everyone say tables are bad, css is the real deal... sounds like hypnotized zombies to me. He so tried to explain that a hybrid page css/table does work with minimal of work... it never came through clearly obviously. And for those who really knows css, well congrats to you and I envy you very much, I really do. I am really trying to make a page tableless.

But the fact is:

Hybrid css/table page does work, no matter how much you say tables are bad bla bla bla. Seems like you think when it regards tables it is strictly tables and nothing else

>I don´t know how many times PeOfEo have had to repeat himself but I would go crazy for sure hehe. I support every sentence he has written. (was a bit irritating though when I saw pixils everytime :p )
Copy linkTweet thisAlerts:
@JPnycMay 12.2005 — People can become very zealous when defending what they espouse, even if it's only fashion.
Copy linkTweet thisAlerts:
@MstrBobMay 13.2005 — Believe me now, I've been all over the spectrum. I started out thinking that the <marquee> element was the coolest thing since sliced bread. Tables were awesome, and I could achieve so much with <font> tags. <abbr>, <acronym>, proper headings, semantic markup in general was voodoo. What was the point? Javascript could do much, everyone has it! Sure, I can make my navigation JS dependant.

When I got into CSS, I saw how powerful it was. I got overzealous with that, instead of headings I used <span class="heading">Heading</span> with appropriate styling. Semantics and accessibility? Well, I'm using CSS, isn't that enough?

Then I got into XHTML. And I started using Firefox. Now this was radical, IE isn't the only browser! And it doesn't render everything the same as other browsers! Then I was all XHTML, CSS, no javascript, and cross-browser friendly! I refused to touch tables, even for tabular data.

Now, I try to keep my markup semantic and valid, first and foremost. This, and some additional markup to aid accessibility are my first concern. Then I come and I do the styling, adding an extra <div> or <span> if neccessary. Maybe I'll sprinkle in some Javascript to enhance the site, but not rely on it. I like to view a website as in layers. I probably explain it better in an article of mine. [URL=http://wdhaven.com/article/13/website-theory-three-layer-cake]Webiste Theory: Three Layer Cake[/URL]

The point is, when you separate markup and visual appearance, you're better off in the long run. We want to remember here, sight is only but one medium through which to access the information on the internet. Tables should be used appropriately, to markup tabular data. And you should make sure to use proper table headings and to assosciate data with headings. That's the purpose. Visuals, like layout, can be accomplished with CSS. CSS is particularly hard to learn. It's not like I'm saying 'You have to know the C++ Windows API in and out' Now that's hard. If you take the time to learn CSS and learn what the browser is doing, and few pecularities of some browsers, you can quickly produce what you want. Normally I can adjust for IE. Sometimes I have to use a trick or two for it, but if your CSS is filled with hacks than something has gone wrong.
Copy linkTweet thisAlerts:
@BonRougeMay 13.2005 — I have to agree with everything Mstrbob said. I had more or less the same experience and I think I look at it all in the same way. Have you ever used a screen reader? It's amazing what rubbish you hear when you listen to a page that's laid out with tables as the main layout (I have to add those last four words to keep people like BeachSide happy...)
Copy linkTweet thisAlerts:
@JPnycMay 13.2005 — I can certainly see the point in not shutting out those who [I]cannot [/I] use JS, but for those who choose to disable it, they should have to live with the consequences of that choice, just we all do in every other facet of life. I've built sites that use JS functions to display pics from thumbnails. Now obviously the pics won't matter to users of braille browsers, so that leaves those who disable JS. They do without.
Copy linkTweet thisAlerts:
@David_HarrisonMay 13.2005 — I've built sites that use JS functions to display pics from thumbnails. Now obviously the pics won't matter to users of braille browsers, so that leaves those who disable JS. They do without.[/QUOTE]It would be easy to get such a script to work for users with JavaScript disabled, why disallow access to some content when it would be so easy to include everyone?
Copy linkTweet thisAlerts:
@BeachSideMay 13.2005 — I have to agree with everything Mstrbob said. I had more or less the same experience and I think I look it it all in the same way. Have you ever used a screen reader? It's amazing what rubbish you hear when you listen to a page that's laid out with tables as the main layout (I have to add those last four words to keep people like BeachSide happy...)[/QUOTE]

I was just messin with you lol :p
Copy linkTweet thisAlerts:
@wamboidMay 13.2005 — Mstrbob's story is a familiar one to many of us. Proper technique should be used. Unfortunately, many, in fact most web developers don't for one reason or another. Those professionals who simply refuse to learn will either eventually learn or get left behind. I meet many professionals who don't have the slightest idea what I'm talking about.

Notice I keep saying professionals. The only thing I don't like about this site is how rude some people are when it comes to their zealous defense of css vs tables. This may get me blackballed by some, but I can think of several instances where I have no problem with someone using tables.

One such instance would be a long time professional who just discovered the error of his ways, but his boss wants the website updated within the hour. If this professional has just read enough of this forum to be convinced of the proper way to create a page, he would still need to do it the old way, or probably be fired. He should still learn the proper way and eventually fix things, but, in the meantime, a paycheck is more important. I see many people coming here like that who have a simple question that many just answer with "tables for layout is bad, fix your code then we'll talk."

That was just one example, I'll save further rant for later.
Copy linkTweet thisAlerts:
@scragarMay 13.2005 — I'm guilty of that, but only in cases where a persons code didn't appear to make sense(and they wanted me to add it in for them)
Copy linkTweet thisAlerts:
@wamboidMay 13.2005 — I'm constantly making posts such as this one:
???? is right, although the vast majority of the web does use tables for layout, you really do need to learn css. A good place to start is the "sticky" at the website review forum.

Meanwhile, a quick fix to your problem would be to change the table width from 100% to whatever pixel width you think would be the perfect size. For example, width="800" rather than width="100%"

(I edited the name out as well as my own poor grammar and spelling.)[/QUOTE]

The post previous to mine was just a quote of a paragraph from the spec about not using tables for layout. That was actually one of the nicer ways to not answer a persons actual question, some people get quite rude.

Actually, I think it is kind of hypocritical to post such zealous responses on a site that uses tables for layout! I hear they plan on correcting this, but if it is so totally evil, then why support it by using the site. (Note, I love this site and don't encourage anyone to leave.)
Copy linkTweet thisAlerts:
@jmaresca2005May 25.2005 — Well I feel like I have a good grasp of CSS, and yet i still find tables easier to deal with, particularly where cross-browser compatability is concerned, and ESPECIALLY if you're in a hurry. I really use both.[/QUOTE]


i agree
×

Success!

Help @GJPG5 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...