Forum Moderators: open
So, let's hear it. When can't you use a table-less CSS layout? (apart from the obvious situations, e.g. when a client *demands* the design looks the same in all browsers including 4.x)
If your audience is not techie or senior citizens, or perhaps predominantly female (sorry, no stats; I'm going only by personal observation!), then I think it should be tables.
If you're selling stuff, why would you want to shut our 3 out of every 100 customer? Who (except MS) does business like that?
Then there's dynamic content -- when the amount of copy and the size of images in the database for each page cannot be realistically fixed within tight parameters. Templates for this kind of page need to be very well thought out to avoid display problems in CSS. It can get especially tricky on a search results page for catalog items, when the total number of results is also an unknown and floated images need to be floated into the copy for each product.
In general, CSS handles many basic situations well, but highly customized layouts can give you the fits, at least at present.
tedster:
One CSS weakness comes with page layouts that start with a header section, transition to multi-column liquid layouts and then return to one wide column (such as a "footer" section) -- these are nearly impossible with CSS at present.
I use a lot of those, always have; particularly in cases where I use right navigation, which I've always liked. I can imagine a possible workaround for that situation with some minor design change, but not for product pages at all, particularly if there's side navigation.
If your audience is not techie or senior citizens, or perhaps predominantly female (sorry, no stats; I'm going only by personal observation!), then I think it should be tables.If you're selling stuff, why would you want to shut our 3 out of every 100 customer? Who (except MS) does business like that?
Sorry I don't quite understand what you're getting at here... females and tables? And since when does table-less layout shut out users? It's table-based layout that shuts out users... try viewing a typical table-based design in lynx or a screen reader! Or indeed, on other platforms like WebTV. You don't get these problems with a CSS-based layout, thank goodness :)
It's ironic that you mention MS, because their badly coded table-based layouts don't even make an effort to validate to W3C standards, which is basically what most table-based sites are like.
What I've been doing is simplifying the tabled layout of the page. Instead of using nested tables to achieve the desired layout effect, I'll use a couple of tables and then apply different attributes within css.
I've found that you can successfully blend both tableless and tabled formats using css to remove the majority of your presentational markup. This code...
<table class="head">Content</table>
is definitely much nicer than this code...
<table border="0" cellspacing="1" cellpadding="2" width="599" bgcolor="#c0c0c0">
Don't ya think? ;)
This next site also has no tables... Lycos in Europe.
Lycos DK [jscript.dk]
This next one uses a combo of table insert [maybe a row of cells] but in a page that is mostly CSS and XHTML
37 Signals [37signals.com]
---
I can see the frustration regarding shopping cart pages. I have been thinking about working up a simplified set of sales pages on a small order. I happen to like very open design with lots of white space and less extras on the web page.
I think tables are fine, if they need to be used. I guess the point is to make them accessible and that usually comes with watching colspans and especially row spans.
I think a modified table/CSS layout can be accomplished if one makes sure to put the form items, products, and descriptions in one cell per item... then travel across the row. And then check it for clear linear order.
It would be a very nice challenge, and very dependent upon how many items one needs to put on each page. I do not think it is impossible to achieve something quite accessible - and - maybe without tables?
So the shopping cart outputs nothing but a jumble of tables, which makes things difficult if you're the front-end sitebuilder trying to integrate all this into a table-less layout ;)
I think there are definite differences in the way you approach a table-based as opposed to a table-less layout. But if you work with these differences, you can often end up with a CSS-based layout design that is as good, if not better than a table-based layout. And since you separated content from presentation, your IA, usability and accessibility is much more likely to be solid and well thought out.
And we all probably know how messy the HTML is that programmers tend to produce.
Oh-oh, you may be starting something! ;)
Actually, I've seen some very clean programming. In fact, my programmer whom I've been working with for almost three years has cleaned up his act considerably. I've had him work with me to validate and clean up his asp generated html and we've had great success. He's young at 21, but the kid sure knows how to spit out fairly complex asp code. And, it validates to the W3C, that's what really makes it a win/win relationship.
Now the site in question has it all:
- a header
- a horizontal top navigation
- a horizontal second level navigation
- three columns
- a footer
It works and it's all CSS-Layout. The XHTML-Code makes almost perfect sense, although the left and right column come before the center column which contains the page content. That's not too bad in this case, though, 'cause it's written for an intranet. Now it is searchable, loads super-fast and has already proven several times how extremely flexible it is, as it went through some design and content changes. It's layout works in IE (5 and up) and Gecko browsers and Opera 7, it heavily fails in Opera 6, it degrades just fine in older browsers.
I am pretty proud of it (as you can tell) but the point is, since this worked out so well I now believe there is almost nothing you can't do with CSS.
If you ever come across a problem you think you can't solve, try the next day. Or ask WW :)
Except NN4!
Depends on your audience...
I don't buy the 'shopping carts are tough' line. Perhaps, traditional shopping cart layouts are tough but I've yet to see more than a handful of well designed carts anyway...
Think simple - Your users do! ;)
Nick
Brett's table here could be CSSed:
[webmasterworld.com...]
But would there really be any point?
Tables -> tabular data
This forum forum is tabular data for the msst part...
Nick
How long would it take to code if a <form> </form> had to be nested into the td's to link into a remote shopping cart with part of the product elements in one <td> and another in another <td> for each product? They have to be nested, and they have to work for NN4.
>But would there really be any point?
It would essentially outprice jobs beyond the means of the clients for something that's incredibly simple with Dreamweaver.
For instance. or example
I have 4 sets of dishes.
Table row one has the pictures, captions or descriptions of these items.
Table row two has the ordering submit button or add to cart information for these items. While these areas may LOOK like they go together - they read out much differently. Tables are normally read left to right by row. Start nesting tables they are read in the same way, with tables in rows read first before next outer table row is read.
Already the descriptions and the ordering information is separated, out of context, and would be read out like so.
Glass 1 and description, glass 2 and description, glass 3 and description, glass 4 and description, add to cart, add to cart, add to cart, add to cart...
How does one recall which add to cart to select if the items and ordering information becomes separated?
This is a problem with forms, too. Many who use tables to visually fix forms do not realize that separating form item text into boxes, quite often separates form information from the form input areas, selections, etc...
This is why labels are needed and also checking to make sure that form information and ordering information is clear and connected to tasks.
If using a table, all information including order per item should be in the same cell with the item. [or at least row.]
holly
If your audience is not techie or senior citizens
Is anyone even thinking about Mammy and Gramps? Maybe older folks would prefer plain text anyway. They don't want to be confused by things. Perhaps we are creating problems for them when we load a page full of options, boxes and gizmos. Just give them the information that comes when the site degrades. For the non-techie- hey, they can upgrade too if they feel it (insert message to upgrade browser;) Some places can not upgrade- I know. Let's not forget this option though.
M
