Topic awaiting preservation: Mixing Tables and CSS

So far I haven't yet ventured into full-CSS designs. I've always heard that you can't mix tables and CSS. But does that mean you can never have a <table> within a <div>? Or just that you shouldn't attempt complicated layout techniques with tables when you are using absolutely positioned <div>s? Seems to me tabular data should still be in tables, but what do you guys think?

-jiblet

Bah. There's no rule preventing you from combining the two. Many "cross-browser XHTML" purist's argue against tables but really in some situtations they do the job excellently and should be used.

I started a new design for my site and used primarily css still use tables for small layout issues.

That being said, trying to build a whole page without them would be a great learning experience



.:[ The Tao of Steve ]:.
Be Desireless
Be Excellent
Be Gone
...................................

I recently tried to do a page without tables using CSS only. I wanted a header and two divs side by side for the middle and a footer... and all of that centered on the page. You know, the kind of thing you can easily do with tables? Anyway, I got it to work pretty well in IE5+ and was quite happy. I brought it up in Mozilla and it looked like dog crap. I forgot what Opera did with it.

Bottom line, doing it without tables might get some purists excited but if you need something to work you might want to let the purists whine a little longer until these "standards compliant" browsers get their sh*t in one sock.

~thanks for the opportunity to rant~

And, yes, I think the idea is that you should only be using tables for tabular data.

Even the most extreme web standards advocates agree that tables should be used for tabular data. That is, after all, what they exist for.

BTW, don't think that CSS design means absolutely-positioned DIVs, it's a lot more than that =)

Well I've already used most parts of CSS1 and some of CSS2 other than the positioning attributes (I use CSS for font sizes/faces/colors, margins/padding, some rollovers, etc), but I've never taken it to the level of significant layout using CSS or dHTML. Reading through the spec, and considering the number of browser issues, I know I have only begun to scratch the surface.

I am not a purist by any stretch of the imagination. I like CSS to simplify development and increase consistency. Although I like the idea of my pages passing the W3C validation, my main goal never changes: Find the optimal ratio of simple code to robust presentation for any given design.

The reason I ask this stuff is because I'm planning a major overhaul of my entire 200-page site, involving a new XML-based templating system that will allow my pages to easily be displayed in the user's choice of formats (text-based, printer-friendly, tables, CSS). My first step that I'm currently working on is to outline all possible page elements, and design a CSS testing suite that will let me work out cross-browser issues in a structured manner (easier said than done given the multitude of relationships elements can have).

Well, you'll probably be hearing a lot more than you want to about this in the future, but for now I'd just to solicit input for case studies of well-designed sites. I haven't had a chance to keep up in the design community recently, so I really have no clue what's out there these days. What I'm looking for is not the 'gee-whiz cool pushing-the-envelope' kind of sites, but rather simple ideas and simple implementations of practical information-based designs. Here's a couple that I've been looking at so far, maybe you can add to the list?

http://www.alistapart.com/ (the quintessential standards site)
http://www.glish.com/ (the sample CSS layouts are probably the best CSS applications I've found)


-jiblet

[This message has been edited by jiblet (edited 03-22-2002).]

Bugs -

As Jiblet mentioned, glish.com is a good site for info. I especially like the info at http://www.glish.com/css/7.asp. It really helped with some issues I was having.

jiblet: As has been explained there is no problem mixing CSS and tables. Tables are still the only way to get some designs to work in NS4.x - you just have to adapt your strategy to the project. If you are aiming for a more 'advanced' audience (ones who upgrade their browsers often, e.g.) then CSS-only layouts may be the solution for you. If you are building a big ecommerce site then (or any site expecting a lot of traffic from a broad range of people) then you should really drop in a table or 2.

If it was just some esoteric point about only using tables for tabular data (a kind of purity of markup kind of thing) then I probably would still advocate everyone use at least one table where they have to (some CSS-only designs do hold together quite well in NS4.x - an early version of mobrul's site is one that springs to mind), however, tables do really cause problems for blind people and others (in fact I couldn't imagine using the Internet if I was blind - could you imagine: column header, main, table cell, button, etc.). If done well a CSS-only design can actually increase accessibility to your site.

I don't object to the use of tables (although I'm sure it often comes across that way!!) what really gets me is the unnecessary nesting (sometime 5-8 tables deep). Usually you can get away using DIVs in most places that tables get used and only using tables when you need columns. I suspect some HTML editors are responsible for a lot of the poor use of tables out there as they can't really be expected to second guess your intentions.

As with a number of other things (iframes being one) they can be very useful indeed but they tend to get over used esp. as in situations where other technicqies provide a far better solution.

Emps

Actually, that's a very good point emp. If there is only one column then a div is probably better than a table. I think i've been using tables just because I was more familiar with the touchy details of margins and padding on tables than divs. But since I've already achieved much greater consistency by replacing my <ul> and <h1-6> tags with <div>s, it would only make sense that floating <div>s would also be easier to manage than floating <table>s.

The HTML editor problem is significant, but I think I have a pretty good solution. I simply use a set of regular expressions that will make transformations from the easy-to-author editor syntax to my preferred code. For example, replace <h1> tags with <div class="h1">.
That way I get easy editing AND the most consistent presentation.

I'm still curious about what designs you've seen that you found particularly elegant.

-jiblet

jiblet: Yes DIVs make a very good replacement for tables in a lot of circumstances - there are possibly exceptions but you really only need tables to hack cross-browser columns. However, I would be wary about getting rid of markup like your lists and headers. Especially in our new shiney XML world these do have significance beyond simple styling (and again when used correctly they can help various devices make more sense of your page). You will also find that some search engines will rank you higher in searches if you have the keywords in important 'structural' tags - like your headers (clearly being in a H1 would be more important than a H3), page title, bold/strong and italic/emphasis tags so ignore these kind of tags at your peril.

I'm not sure I understand the elegant design question (but I'm not on form tonight!!).

Emps

By elegant I mean simple code to produce difficult or unusual effects consistently across the widest number of browsers.

I'm sure you've noticed that Netscape 4.78 and 6 compute the left margin differently from IE. Currently I'm using 2 extra stylesheets to fix various cross-browser issues on my site. The idea of fixing all the ugly inconsistencies with fewer stylesheets may be idealistic, but there's something inexplicably alluring about it to me

Anyway, yeah, i see your point. However, in my case I have the luxury of serving a very localized and targetted audience (the student body at a University). Traffic to our site isn't driven by search engines, nor are we interested in wide exposure. I do however think it's important to have good Titles, Keywords, and Description and other META information. As far as my documents being parsed for XML, we are confident with providing XML versions of our data on a per-application basis (we are currently developing an RSS 1.0 channel for a MetaDot Portal). That's not to say I won't take your suggestion seriously, especially in the light of accessibility issues.


-jiblet

[This message has been edited by jiblet (edited 03-27-2002).]

Thanks on the heads up on the glish.com I'll see if that helps with the stuff I was trying to do. I want to make this stuff work... it just gets so frustrating at times.

. . : newThing