Hi, all.
I am just wonder if table formatting overcomes CSS things.
My friend told me that she use table rather than CSS to place things like how she wants.
Cuz using table is hard to code ( a lot of table can be made) but can be sure how htm file will look like even using all old browser. Even she told me that she got a lot of error using border of table things. I actually had a lot of problem of border of table as well. Sometimes did not appear......
I was pretty sure about using CSS but cannot explain even I might agree some of the point she told me.........
Well, in conclusion, I want to ask one thing...
Do you make two html like one for old browser using table to formate page and another for newer browser using CSS? Help!
I used to belong to the "table layout" school, but I finaly forced myself to learn and use CSS.
Tables are for holding things.
CSS is for layout.
I highly recommend Zeldman's new book, "Designing with Web Standards" as well as Eric Meyer's book, "Eric Meyer on CSS".
You also have an excellent resource at the Guru's Network.
Spending a lot of time and effort coding for old browsers is just a waste of your time. The version 4 browsers are less than one percent of the audience now and it's time they cut the cord.
Take the plunge. You won't regret it.
Few problems in life can't be solved by chocolate
[This message has been edited by rickindy (edited 10-01-2003).]
I understand the CSS advocates, but the CSS compliance of the browsers is not uniform.
Doing an N columns layout with each column having the height of the bigger one requires 3x more efforts than it's worth it.
Add to that that CSS related sites often mix pixels and percentages which may bring some ugly misalignments.
That's why I stick to tables for basic columns / tabular layout and use CSS for what I find it really usefull : stylizing the content and layout.
To clarify my point, I'd say that CSS related sites like the CSS Zen garden does an excellent job at showing what's possible with CSS but there's a gap between the possibilities / support of the technology and the actual client's needs.
Hiroki: It all depends on your brief and your plans. If you have to make a site that looks the same in as many browsers as possible then you should probably be looking at using tables but if you are looking to make a lighter more flexible and accessible site then some kind of table-free design would seem a good idea. Strictly speaking CSS/XHTML standards compliant designs can still contain tables - it is the next step to table-free/semantically correct designs where the big leap takes place.
rickindy:
quote:Tables are for holding things.
Well technically tables are for tabular data.
poi:
quote:Doing an N columns layout with each column having the height of the bigger one requires 3x more efforts than it's worth it.
Clearly if you are attempting to adapt a table-based design like that to a table-free design then you will run into problems. However, we only have those designs because we used tables as a hack anyway and a hack to give us what are essentially print-based designs (and lets be honestwe then had to hack tables to get things like 'guttering' - site slike WebWonk really helped in that regard). To successfully use table-free designs requires a change in the way you think about designing web pages and start designing for the web - see discussion here: http://development.gurusnetwork.com/discussion/thread/1899/
Emperor: First, let me precise I'm a both a coder and a graphist. To me content == datas. Thus I have a highly structurated conception of layout and I'm not shocked to see a mean to display tabular datas being used to display plain content. But I'm also keen on innovative and pretty designs.
So far, I've mainly worked on portals and portals-like, that kind of sites feature a lot of content and a clear categorization. Their layout reflects the categorization of the contents. The portals I did use the HTML + XML + XSL + CSS combo. HTML ( including some tables ) gave the basic layout, XML the storage, XSL the presentation of the contents and finally CSS brought the smallest granularity of stylization. It's not idealistic but it gave us, the whole development and designers team, enough control to meet any requirements of the clients. The latest site I worked on was for "le MEDEF". Many people were involved in it and you can recognize my style to the utterly long variable names and the right aligned comments
There's some interresting points in the GN thread. I consider the television is liquid too. IMO, and to sum up, the web is the gathering of every previous medias pushed to the extreme.
Take the example, you gave at GN, of the BBCI. I like its design. It's simple, not worth jumping in the air but it gives informations and still look rather nice. Unfortunately it'll be a real pain to make that layout without tables. It's even more sad that the BBCI is the perfect example of a web site that has to be accessible in several forms and platforms ( desktop, laptop, handheld devices ... ) and thus would benefit of pure CSS layout. I'd be glad if you can help me change my mind and explain / show me an effective way to present that much content without tables.
I hope you can share your own conception of web design because I clearly see the advantages of CSS but can't figure how to use it to lay down mine.
Best regards,
Mathieu "POÏ" HENRI
[This message has been edited by poi (edited 10-02-2003).]
ozphactor: Thank you for mentionning those sites. I only knew about WIRED.
I regret that ESPN suffers from the misalignement and glitches I pointed ealier and that in both IE6.0 and Fb0.6.1
PGA with its 17 ( nested ) tables is not exactly what I would call a good CSS layout advocate.
Nonetheless WIRED and especially MACROMEDIA are pretty good candidates.
quote:I'd be glad if you can help me change my mind and explain / show me an effective way to present that much content without tables.
I hope you can share your own conception of web design because I clearly see the advantages of CSS but can't figure how to use it to lay down mine.
I'm afraid this is going to sound a bit vague but as ozphactor has show it is perfectly possible to have table-free designs with high information content. My point is that this may indeed by a true paradigm shift in that it changes your way of thinking about problems - questions like 'How do I get the bottoms of my columns to line up?' or more generally 'How do I make this table-based design without tables?' are from a tabled way of thinking. Quite a few of those 'conventions' are purely the product of using tables as a layout hack. It would be perfectly possible to build a page that displays the amount of content the Beeb's site does but you'd be making unnecesary problems for yourself by trying to make it look the same way as it does now.
As I say this is a little vague but possibly the only way to really understand it is to do it - for a while you tend to try and make table-free designs look like like table-based designs but after a while of busting your balls trying to get everything to line up like that or sit exactly there you start asking yourself question about why you want it that way. The answer is you are trying do do it that way because you think that is the way it should be done when that needn't be the case.
You said:
quote:to sum up, the web is the gathering of every previous medias pushed to the extreme.
No its not - it is different one with different strengths and limitations. It may draw influence and ideas from other media but they all cross polinate each other so.......
However, as I said above getting rid of tables also depends on your brief which is defined by what your clients want, what your visitor profile is like, etc.
quote:No its not - it is different one with different strengths and limitations. It may draw influence and ideas from other media but they all cross polinate each other so.......
That's why I said "To sum up ..."
ESPN looks ok, but several points annoys me:
Ok I may have some high standards, but my "graphist myself" wouldn't have let those glitches going public.
One thing that puzzles me is that I perceive your reasoning of design shift more as a graphical aspect than as a code wise and portability aspect. Obviously I may have missed some parts of your point. My head is all the more about to blow that the sites ozphactor mentionned display a lot of content via tabular layouts ( even if they are free of table tags ). In fact, my conception is so influenced by print design and my "coder myself" that I can't figure how to visually present a lot of content out of tabular layouts. If someone achieves to show a sketch of not tabular layout of Wired, it would really shift my mind. Aahhh f####g paradigms.
To me, the real strentgh of CSS is in the separation of the design and the content and the portability it brings. A great way to use CSS should be to keep the urls the same and only use subdomain name to define the type of support ( normal, wireless, light ... ) and thus of appropriate stylesheet. As you said earlier, the choice to rely on CSS only layout is highly dependant of the client and its audience.
I especially like Macromedia's site. It's clean, pretty and rather dense, but though the code doesn't have table tags it has a tabular layout inspired by print design. I haven't found a sort of "mobile" or "pda" version of the site so I see their CSS compliance and table free layout more as an exercice of style and a "search" of legitimaty ( since they actually make applications to create / design websites ) than as a real need in regard of the density and targets of their site.
Cheers,
Mathieu "POÏ" HENRI
[edit]to make sure the thread appear updated though I only updated the picture[/edit]
[This message has been edited by poi (edited 10-03-2003).]
That "change in shades" is part of the background. Look at the top of the page, just to the right of the banner ad. The harsh ending, it would appear, is due to the fact that the MSN footer is placed automatically on the bottom of the page and it simply doesn't have a border applied to its top. This isn't a limitation of CSS but a decision made by the designer. (This is mostly assumed.) The "black gutter" doesn't fall behind the grey panel for me.
quote:One thing that puzzles me is that I perceive your reasoning of design shift more as a graphical aspect than as a code wise and portability aspect.
Well I addressed that aspect because:
1. You brought it up.
2. The advanatges for accessibility, page size, flexibility, SEO, etc. are more widely known but it seems to be the visual aspects that are often the conceptual stumbling (e.g. "OK I know it is good for accessibility but how do I do this without tables?").
3. I felt like kicking around a few thoughts on the topic - I can't claim to have all (any?) the answers and doing away with tables doesn't mean you have to do away with columns or anything just that you don't need to design a CSS site to look like a table site.
You said:
quote:To me, the real strentgh of CSS is in the separation of the design and the content and the portability it brings.
To me the important thing is the separation of the structure and the presentation - the (X)HTML tells you what it is and the CSS tells it where it should be and what it should look like.
I see your issues with ESPN and I'd put it down to:
1. Design problems that could easily occur in any design.
2. Attempting to get the table-free design to resemble one with tables - you end up falling between the two stools and the results can be less than desirable
I think everyone else is using the term "tabular" to refer to things you would put in a chart -- columns of similar items, with column and possibly row headings, dividing lines, and so forth. The concept of a column of text, as in an overall website or printed-page layout, is much more general.
My opinion is that if you would like to use tables, why not do it? They're never going to just quit working. The only reason I avoid them -- and a flimsy reason at that -- is that if I make an HTML page without any layout-related markup at all, I can completely change every aspect of the site's appearance by changing the CSS.
But realistically, even an HTML file devoid of presentational markup will at least have an order of elements dictated somewhat by the CSS tricks I use... thus limiting my options when I come to redo the CSS.
Emperor: Replace 'design' by 'presentation' and 'content' by 'structure' in my sentence and we've said basically the same thing At one moment I thought your were against tabular, graphically speaking, layouts.
I should really make the 'effort' to test some CSS layouts and see by myself if it's the nightmare I fear it is or not to push tons of content on the screen. As Perfect Thunder said, I expect to see some CSS tricks parasiting the XHTML. Experience will tell if that's the evidence that I'm making my life worst than it is.
ozphactor: Thank you. The 85th PGA Championship's site is definitely a good candidate. I'm a little sad that one "still" have to rely to Flash to make the kind of menu and crossfading images they did. At least we can do it with CSS + DHTML but it may have limited the audience to IE5+ and MZ users. Nonetheless Flash brings antialiasing and smooths the compatibility problems. One thing that is quite interresting about this site is that it has a lot of content but, contrary to Macromedia, few of them are shown on the home which gives the impression that the task of using only CSS was somewhat easier. The fact that this site is based on an event obviously influences the categorization of the contents. Despite the number of content it doesn't look like a portal. I see in that a very well done CSS site. Add to that that it looks good and seems to have interresting infos for those who are into golf.
Perfect Thunder: You're right : 'tabular' == chart like. The way we present content comes from the codes of print-design.
Mathieu "POÏ" HENRI
[This message has been edited by poi (edited 10-03-2003).]
I think there is a whol elot of confusion here as to terms and purpose.
Tabular means just that - information displayed/contained in a table (yes, also referred to as a chart in some cases).
Non-tabular layout does not in any way mean that you don't use columns or rows. It means you don't use tables.
And if you follow Emperor's advice, it means - just as importantly - that you don't approach the design from the standpoint of "ok, with a table I would do 'this' so, how do I do 'this' with CSS?"
It means learning and using the tools that CSS and XHTML make available for you to achieve a layout. It means changing your focus from what you *already* know about HTML and page layout to the things that you need to *learn* about the subject.
Time doesn't stop, and technology evolves. Especially in this arena. If you can't adapt to the changing environment, and change your mindset on the issues at hand, you will be left behind...
This is *not* print.
This is *not* film.
This is the web, and it is not a summation of previous media, it is it's own completely seperate beast.
It needs to be treated that way.
DL-44: Yep, there's been a lot of confusion between code wise and graphic wise terms. I use(d) the term 'table' to talk about code and 'tabular' to talk about graphism.
Regarding what is the web, I agree that it's not exactly a gathering ( again, that's why I said "to sum up ... " ) of the previous medias. But I keep saying that the graphical codes we comply to to present information come from the long term experience in print-design ( ~5.000years ) and short term experience of film-design ( ~100years ). The means evolves faster than the graphical codes to present information. Macromedia, PGA, Wired, ESPN... comply to these codes and present their content in a tabular way.
I'm, already, convinced that using CSS is a good thing for all the reasons we mentionned ( accessibility, seo, page file size, ... ).
Honestly, when I'm doing some page layout sketches I don't ask myself how I will code it, but if it looks good and give informations in an effective way. Unfortunately CSS seems to lack something since people have to use some hacks to get N columns layout and such. Or maybe that's my lack of experience with CSS layouts that is speaking in my name
quote:Nonetheless WIRED and especially MACROMEDIA are pretty good candidates.
Ugh, but looking at Macromedia's CSS files, there are MASSIVE amount of compatibility hacks to make the site viewable in CSS-glitched or older browsers. If I can do something with tables in a few lines that would take half a page in CSS to ensure it renders properly, which is the "cleaner" solution? Unfortunately, the old one
Working with commercial sites, you generally can't afford to turn away ANY customers (especially for a small-medium business) just because their browser is older, and even for non-commercial site, you shouldn't be turning away "just that few percent" when you have an alternative design option that would make your site accessable to them. Otherwise, forget visually-impared, and all special-access browsers, they're a minority too.
Sorry to rant, just tearing my hair out with frustration at how standard CSS isn't. Blame the browser authors, I suppose. Much as I would like to use pure CSS, I'm going to have to mix it with lots of tables on my next site, because it's just so much less hassle for me at the end of the day.
quote:If I can do something with tables in a few lines that would take half a page in CSS to ensure it renders properly, which is the "cleaner" solution? Unfortunately, the old one
I fear that you did not understood the concept and advantages of separation the content and the presentation layers. Separating these layers is "cleaner", and safer.
If you go for a bloated table based layout, the file size of ALL your pages will be way bigger. It will increase your bandwidth fees, the search engines will have a hard time picking the relevant infos to rank your site...
On the other hand, if you go for XHTML+CSS, your pages will be slim and ONLY the CSS file will be big ( but it'll be cached quickly ). And all the cons of the table based layout vanishes.
Oh, and since you talk about accessibility. With XHTML+CSS, you no longer have to maintain several versions of the same site. All you have to do is to provide the appropriate stylesheet to the user. Disabled people, blinds and visually impared, etc... will be able to access your site smoothly and with NO added costs for you and the client. To make sure your site is accessible, validates it with Bobby or Cynthia, and try to browse it with Lynx. If all this works, you're done, and can be proud of yourself for doing some good job.
I know, in my previous posts I sounded a bit less confident with CSS, but since then I've practiced and now I don't even know how I could have made some web site with some zillions of TABLEs.
quote:Blame the browser authors, I suppose.
Yes, and the web design tool makers and web developers/designer for not promoting the standards early and therefore not encouraging the browser authors to go straight in the wall.
From: Den Haag: The Royal Residence Insane since: Jul 2000
posted 01-18-2005 01:08
Just butting in whitout a good reading.
There is three big problems with table designs:
1) When nested it's very hard to check when something goes wrong.
2) Loading Times: A table only loads when it has loaded all his contents, if you have nested tables the outer tables has to wait until the inner tables are loaded. Which on their turn have to wait until they have loaded all the content.
3) Scalability: table designs are pretty damn good when used for an fixed size design but could be really horrorfic when it comes to fluid or liquid designs. Just try scaling an table site down and you know what i mean.
You might say that with today's high-speed dsl lines, 3GHz processors, and tons of RAM memory loading times are less importand. Tru.. You could say that with todays 17" and bigger scalabilty is less important too. Also true. But in todays world my father in law gets an little PDA from his boss which, when connected by bluetooth with his cellphone, gives him acces to the whole internet. Now suddenly loading times and scalability are yet important again.
I tried designing a long time for an specific browser, on an specific platform. I was not very good at it and i migh not ever be. So instead of putting together the most detailistic designs, and worry about little freaking (fixed) details, i try to get the info in the most comfortable way on the users screen. Whitout line breaks, or info that falls off the screen or margins too close to the border of the screen. Without headings that take up all the screen space but which can recognized as headings , whitout horizontal scrolling. Etc. Realy i don't want to care about the the users browser, or the system it runs on. Testing on multilpe browser should not be needed any more. Which browser is used should not matter any more getting the message across should.
All this is just not possible with table layouts. Not for me whitout breaking my head.
It must be said that tables do have their use and some people are quite handy with them.
Hybrid versions with tables for layout and css for styling are maybe a good idea for the time being and could work very well. In the long run however it could mean only more cleaning up when you have to renew a site.
Yech.
It is important to note that this thread is well over a year old. technology evolved yet further, and any examples given may or may not live up to their original intent by now...
It simply makes no sense for this debate to even be going on at this point - tables are not for page layout, period. Using them that way causes far more problems than it can ever solve.
posted 10-01-2003 12:43
Thank you. The 85th PGA Championship's site is definitely a good candidate. I'm a little sad that one "still" have to rely to Flash to make the kind of menu and crossfading images they did. At least we can do it with CSS + DHTML but it may have limited the audience to IE5+ and MZ users. Nonetheless Flash brings antialiasing and smooths the compatibility problems. One thing that is quite interresting about this site is that it has a lot of content but, contrary to Macromedia, few of them are shown on the home which gives the impression that the task of using only CSS was somewhat easier. The fact that this site is based on an event obviously influences the categorization of the contents. Despite the number of content it doesn't look like a portal. I see in that a very well done CSS site. Add to that that it looks good and seems to have interresting infos for those who are into golf.
