CSS v Tables

Discussion in 'HTML Development' started by fidget, Jun 17, 2005.

  1. fidget Vox et praeterea nihil

    I am still an advocate of combining tables and CSS after considering it very carefully and suffering near extreme vilifaction for my belief that CSS alone is not the best solution for design layouts.

    There seems to be a lot of CSS die hards about who absolutely swear blind that layouts should only ever be put together with CSS - because W3C say so. But even after I suggest that CSS has more cross browser quirks than plain old tables with CSS styling, not least because of browser problems (yes, I guess that IE is the top of the wont work well with CSS list).

    I have seen many an article that proves that CSS is not always, if ever, the best solution to layout design. And that CSS does not really offer that much of an improvement on download speed or server load.

    I also see that the very vast majority of open source scripts support (by its use) the theory that layout is best presented with the use of tables and CSS.

    In my own personal opinion, CSS layouts seem to be a bit clunky in design and 'show up' as CSS designs, but hey (before anyone here starts the vilification process) its just my personal opinion. And that CSS layouts are subject to more cross browser quirks than table based layouts.

    However, I am interested in discussing this issue, especially in lieu of the release of IE7 which (given MS's apparent arrogant disregard of the W3C) could well prove to be the death nell for CSS layouts (my personal opinion again because why would it persist if the majority of browsers wont properly support it?).
  2. Ben shmoppy

    yea could not cope with css on its own, for some things.
    download speed or server load are more apparent on very big sites (more so for bandwidth).
    There are loads its damn annoying. mainly IE.
    Well from what iv read it seems IE7 will have improved CSS support, even some support for things Ff and others don't yet, and potently proper png support, i would like to see proper css vertical ailment support on all browsers.
  3. Impel GD Graphic and Web Design

    I understand your frustration with CSS inconsistencies in browsers, but you only seem to be approaching the subject from a design point of view.

    A web page is normally a document, and documents should have structure. Using an ocean of table tags for layout immediately precludes any useful structure.

    Strictly speaking, tables should be used for tabular data, and nothing else. The only reason they were ever used for layout in the first place was that there wasn't any other way of 'designing' at the time. Keeping the presentation of a document's information separate from it's structure is the only way forward.

    I find Why tables for layout is stupid helpful; have a look.

    And there are many superb CSS layouts about; take a look at the Zen Garden for just a few.

    I know only too well there are things which aren't immediately easy to do with CSS, but we all have to learn new things sometimes. I consider myself a CSS novice, but wouldn't dream of creating a document-based site with tables.

    Please note I'm not trying to vilify you (I'm not even entirely sure what that means) - it's just a discussion as you say.

    Edit:

    Some very nice CSS sites are reviewed at Stylegala.

    Accessibility is, of course, another important aspect of a website related to structure.
  4. fidget Vox et praeterea nihil

    Ah Zen Garden, the perfect example of eye candy by CSS indeed.

    But I dunno. CSS layouts - were they really the intention of CSS developers in the first place? - were huge amounts of margin and padding really intended for use in page layouts or rather paragraph, bodies of text and line width? Is it W3C who have really kicked the hornet's nest?

    Why is it that browser producers wont just say, 'hey, this is a good idea, let's fully support it'??

    Mr Impel, I believe you when you say you are not 'vilifying' me, from your posts, you are far too intelligent to do that(are you sure you dunno what it means?). And perhaps I am a tad miffed at being so heavily criticised for believing that one cannot reasonably go without the other, at least for the time being. But aren't we past the phase of a web page being just a document now? Surely its never been more closer to being a media experience than ever?

    Then again, WYSIWYG editors (not to mention browsers) seem to overlook the use of CSS layouts, such as dreamweaver which still professes to be the rolls royce of HTML editors but still wont offer a proper WYSIWYG solution to CSS layouts.

    I see many remarks that CSS layouts are better for page optimisation, but in reality the benefit of lower page weight is fairly minimal.

    This a scratch my head one for sure. It would be great if CSS layouts were IT, but I still just don't see it yet.

    Notably, I cannot yet find an open source script (not that I would rely on one alone) which uses CSS alone for layout, not that that alone is a measure of its purpose, but it is a good example, surely?
  5. Ben shmoppy

    http://www.bit-tech.net/ - is all done in css and they have tried there best to get it to work in all browsers witch they have achieved fairly well, that's about the biggest site i know all done in css.

    Rich (RTT - server person for bit-tech) has been making a blogging scripted that's entirely layed out in css and Xhtml, looked good when last sore it not to shore if he will release it but he was planing to.

    However i agree that to me its far to hard to do somethings in css although I'm trying.
  6. BurningSnowman Moderator

    I'll work through the points in your more recent post, fidget, since it annoyed me more.
    Agreed. Yes. No. No.
    CSS layouts are absolutely what CSS is about. The separation of style from content. Layout is part of the style. With CSS layouts, details of where different page elements are positioned can be changed cross-site with one file edit, and can be cached from an external file, so you need only one load to retrieve layout details for the entire site. Large amounts of margin and padding specification that will work reliably is an option you now have, which you didn't before. If you don't want to specify, browsers will use defaults. Same as before. The W3C have only confirmed what most people with a knowledge of CSS already saw as its ultimate goal. And it's not like it's a new idea that tables shouldn't be used for layout. That was never their purpose, and it should never have happened. We just didn't have an alternative for a while.

    They have. IE blows, and even that makes an attempt to support CSS1. Even IE5 makes some attempt. I'm pretty sure you'll find a larger proportion of browsers out there support CSS in some way than do any one of Java, JavaScript, Active Scripting, Flash or cookies, each of which several sites foolishly rely on. CSS used properly is not something your site relies on, and almost everyone will see the benefit anyway. Those who don't see the benefit are likely to appreciate it for other reasons. A good page structure that doesn't use tables still brings benefit to those using Lynx, and those using screenreaders.

    Nope. Last time I checked, there were no <coolAnimation> HTML tags, and JavaScript for animation was condemned by almost all serious designers. Multimedia is, and always has been, something which can be included in web pages via applets that utilise something like Flash or Java. Web pages are documents. That is how they have been specified, that is how they are interpreted, that is how they remain. Multimedia is a separate issue to web design, layout, and conformance to web standards.

    WYSIWYG sucks. You don't get control over your code, and you get unintelligently produced code from a dumb script. This is where you have some advantage over such programs, because you have a brain. You have the ability to write your code in a way that makes future editing easier and makes your site load faster while still displaying properly. Dreamweaver may be the best, but it's still crap.

    Since when do browsers 'overlook' CSS layouts? Why do you think they exist if browser's aren't doing anything with them?

    If you weigh up the new CSS against the old HTML markup, then yes. Ding! You're right. The difference is that the new CSS should be stored in an external file that's used across the entire site. That new information can be cached, which the old markup couldn't. That means it's not loaded every time like the old stuff was. There's your optimisation. Admittedly, CSS provides greater scope for optimisation in areas other than layout. Optimisation is only one benefit of a CSS layout.

    You've seen CSS Zen Garden?
    And A List Apart?
    And Joshua Ink?
    What can't they do? Maybe you don't see how to do it yet, but the potential is sure there. I agree that there are one or two small aspects of CSS that are currently less than ideal, but there are already workarounds that let you get round them without much trouble. And it really is worth that trouble for the improved performance, ease of editing, logical page structure, reduced file transfer, and improved accessibility.

    And that's notable why? People are lazy, and maybe some of these projects have just been far too caught up making their pages work in really, really old (well under 1% market share sorta thing) browsers. But my money's on the lazy. Or they just haven't looked into it. Many developers are still much too used to doing things with tables. Of course, there is tabular data to consider - some of them have an excuse.
  7. fidget Vox et praeterea nihil

    There's some interesting points here, but just one thing .... Mulitmedia? Never mentioned that. I meant a 'media experience' this involves graphics more than multimedie and I fully agree that those elements can cause much more grief than they are often worth, although there are a great many instances when the target audience will accept nothing or very little less.

    I'll have to properly read all of your very informative reply later, lunch calls right now :)
  8. BurningSnowman Moderator

    I see. Well in that case, the specification for an HTML document fully covers that. Images and image maps are possible elements within an HTML document. That's part of how it's defined. Just because they call it a document, doesn't mean they expect it to be all text. We've had images within web pages for a while now.

    Happy lunching. :)
  9. fidget Vox et praeterea nihil

    reeeeaaaally???? :) Perhaps site visitors' expectations have changed a bit over the years though, eh?

    Actually ..... I just ran off a quick design - one version using tables only and a bit of css styling and the other XHTML and CSS. I have to admit that the CSS version is 20% smaller in weight (total size of files and images - but the overall size is pretty small anyway at around 38kb). But I can see how many are put off going this way, mainly because of the various browser quirks and there are two schools of thought on whether hacks should be used or not in view of forwards compatibility. So, both forward and cross browser compatibility are big issues with CSS. Its easy to see why there is some resistance to going this way.

    Zen Garden has some fantastic designs, but hardly any of them are under 100k. The few really spanking designs I saw were over 200k which are too big to be practical in use I would have thought. Having said this, their book is of far better use to a designer than the web site might be.

    I can see the benefits, and I do actually understand it quite well though, thanks.

    Basic and text only layouts are an absolute doddle in CSS, without a doubt.

    Thanks for your input.
  10. BurningSnowman Moderator

    No problems. I agree that there are still problems which make CSS more tricky, but most of them are with browsers, not the specification. And it really is worth it. A fairly simple design I put together for a full web site recently uses a single CSS file of below 4kb, for all content styling, layout and navigation. Efficiently written and simple CSS is certainly worth it once you've put the time in. And besides, the files can be cached across whole sites, which I'd say makes files up to ~200kb just about acceptable, if they're really pretty. :) After all, people are often happy to wait for an image that size to load, and an image isn't often reused over a whole web site.

    Having said all this, I've recently had a report about Mac IE falling over with that same site I mentioned. They attached a screenshot, and it really ain't pretty. The site's been made perfect for Ff, Opera & IE6, but there are serious CSS issues in at least one particularly horrific browser. So yes, there is more scope for messing up severely bad browsers, but that's not the fault of the spec, and it will fix itself.

    An open question: has the problem of this particular browser fixed itself yet? As in, should I worry about Mac IE, or is it okay to brush this one off? I know Mac users make up no more than 3-4% of likely visitors, but I don't want to brush that percentage off by any means. Do a serious number of Mac users still opt for Mac IE, which MS themselves suggested should be replaced by Safari (while discontinuing it)?
  11. fidget Vox et praeterea nihil

    I think that's know as the 60million dollar question, isn't it?

    I have come across a hack for IE5 MAC troubles, I think its mentioned in the Zen Garden book no least. By someone called Levin Alexander, ring a bell? I guess your concern would be whether any hack is ignored by all other browsers, patched or otherwise?
  12. JohnC < ? />

    Came across a couple of handy rules for when a table is appropriate in a basically css design:
    Can the rows and columns be swapped without losing meaning?
    Likewise, can the order be mixed up?
    (may have been others but I forget...)

    On that basis a restaurant menu is a valid candidate for being put in a table, but what I was wondering here is: is there a nice css way to get the input boxes of a webform lined up?

    Another point on caching of css: here on our own dear HU forums I've always found pages a bit slow to load on my (old) computer considering the content is just a few lines of text and some small images.
    Had a look at the source and found you had to scroll through 336 lines of css then about 400 lines of javascript, navigation etc, etc, till getting to the first post!
    Don't know about the other stuff (do we really need 65 lines of arcade game links on every page?) but shouldn't the css be in a separate file? Wouldn't that speed up jumping around the forum?
  13. BurningSnowman Moderator

    Reasonably. The commonly suggested way to do this is a container div for each input. Within it, you float the input right, leave the label on the left. Alternatively, to have the inputs line up on their left sides, you could also use absolute positioning to put them each X em from the left of their parent. I've used the second method, but I'm not entirely happy with it, mainly because you need to actively decide on a safe number of 'em's, which will vary from form to form.

    Yes, I think so. This has been mentioned on another vBulletin forum I know too. I'm not particularly impressed by vB's HTML output in general, really.
  14. fidget Vox et praeterea nihil

    I found a very interesting poist on sitepoint last night which led to this very useful site ... http://www.pmob.co.uk/

    Stacks of premade css layouts with hacks and explanations of the code.

    Looking around forums on this subject though, I do notice large amounts of trials and tribulations in using css for layouts. Great shame.
  15. JohnC < ? />

    Or maybe use a <label> tag instead of a div to wrap the text label and input box?

    But would a table be such a bad solution to this one? A collection of labels and associated input boxes seems a reasonable candidate...

    Thanks, Fidget, for a great collection of examples.
    (might save you some vilification for a bit :) )
  16. BurningSnowman Moderator

    Looks handy, fidget.

    Yep, a label based approach would probably work too. Long as each row is wrapped in some way or another.

    I don't agree that tables are a suitable way to display such a form. The fact that you 'want it to line up' doesn't necessarily make it tabular data, and I would say that it's not. However, although there are multiple methods to do this with CSS, I still don't think there is a fully suitable one. I'll use a reasonably reliable CSS method wherever possible, but I can see the argument for not bothering yet in this instance.


    Regarding the Mac IE mess, it seems it actually stemmed from a single problem. The same problem also affected a small scattering of other old browsers. This was resolved by specifying a fixed width for a floated navigation menu. The downside of that is minor display issues in some browsers when text is enlarged by the user beyond that width. Mac IE now seems to do fine with the site. IE 5.0 for 'doze has a minor display issue with inline list items for a menu having an extra line created below the link text. Annoying, but not serious. Plausible estimates for IE5.0 usage seem to range from around 1-5%. I think? The menu seems to work for IE5.5.
  17. JohnC < ? />

    Sort of see what you mean- it's hard to claim that an input box is any kind of data at all, but there is a meaningful relationship between the label and the box which goes beyond wanting it to line up for reasons of visual appearance only.
    (maybe visual "lining up" usually implies some kind of semantic relationship...?)
  18. BurningSnowman Moderator

    Yep, that's what <label> is for. Indicating that the text is a label for the field. If, in a not-the-Internet environment, something would be a suitable candidate for a strictly tabular spreadsheet or a 'table' inside a word processor, it's likely to be equally suitable for a <table>. Otherwise, I'd say no.

    Of course, fuller support for CSS2 creeping into common applications in the future will probably make the distinction a little more blurred. Newer versions of the CSS specification introduce 'fake table' elements that will allow authors to mimic certain table behaviour without tables. Admittedly, this may get round some of the problems with using 'real' tables, but I expect quite a few people will use this method to 'replace' table layouts with fake-table layouts, which strikes me as missing much of the point. We shall see.
  19. JohnC < ? />

    Could even be a bit too generous? Aren't wordpro "tables" sometimes used just for visual arrangement?

    How about this criterion:
    If you can put a meaningful label or description on each row and column it's cool as a <table>.
    (so rotating the whole thing 90deg. or changing the order of rows or columns leaves it still making sense)
  20. BurningSnowman Moderator

    Well, I did say suitable candidate. Arguably, that's not what word processors' tables are for either, but nobody really cares about the exact structure of your private text documents.

    I'd agree, though, you should normally be able to add 'labels' on at least one side if it's actually tabular data.

Share This Page