Checksum Arcanius

When I ran in to a CSS/Table conundrum at work, I decided to see what Bernie thought. The links have been achored, and the text prettied, but otherwise the conversation is real.

One of the recurring themes I run into while visiting sites about CSS is how sinful it is to use tables for layout. I tried to take this to heart, but for the life of me I can’t figure out a better way than tables to align items that, to look good and make sense, must be lined up properly both vertically and horizontally.

Here is the page with a table
And my utterly failed attempt to replicate with css

Am I missing something fundamental, or are tables really the better choice in this case?

And while I’m on the line with a CSS guru, what makes it so that the elements with the position: absolute propety set conform to their parent element instead of the browser page as a whole? Is it when I set the position on the parent element that this works? If so, thats kinda dumb, imho…

Having fun with CSS I see ;) One of the things you’ll quickly learn (and seem to be learning already) is that while CSS design can prove to be very rewarding (e.g. bandwidth) it can also prove to be very, very stressful. If you’re trying to make your design look good in more than one browser it gets even more stressful :) Often times you’ll run into situations where you know you could do something in a matter of seconds using a table, or some other non-standard HTML
approach.

I try my darnedest to stay away from tables whenever possible, but as you’ve pointed out, sometimes they are the only option. As far as the sites recommending you avoid tables at all costs go, take that advice with a grain of salt. Tables are still a perfectly valid construct in XHTML 1.0 and 1.1. A lot of the presentational information has just been moved into CSS whereas in HTML 3 you could define most of your table properties in the table tag itself.

I don’t know if you’ve seen it or not, but I wrote something on my site about “tableless tables,” and it seems like an approach you might be able to use for what you are doing. Take a look at this before you decide to go the table route. What I wrote was more a proof of concept than anything else, so it would be cool to see it put to real use.

While I’m not afraid to use tables when they’re absolutely called for, I do try to avoid absolute positioning like the plague. I’ve seen too many problems with page flow when using that type of positioning in my CSS. However, if you’re dead set on it (there are certainly situations where it’s a necessity) give this a look. I believe they answer your question in the first paragraph. There seems to be a good deal of information there, so hopefully that will help.

Good luck, and try not to pull any hair out ;)

I was very impressed with your tableless tables, and I pursued making them work in my situation as well, but I ran into problems. (Correct me if I’m wrong, again…) The biggest deficiency of tableless tables is that in oder for alignment to be maintained vertically, the cells
have to have preset widths that are the same (in your case, 23% did the trick). In other words, there is an inability of cells that are supposed to be stacked veritically to resize together fit the largest content in the column. If you don’t force the “columns” to be certain size, they choose to be whatever is inside of them, and any semblance of tablehood is lost. It seems to me that in this case, CSS does not degrade very well, and tables are indeed the better answer for me at
this time, especially since they are so well supported by so many browsers.

On another note, I had some glimpses of CSS3 today, and all I have to say is that whenever it starts to get seriously supported, designing pages should be quite a bit of fun, especially with the pseudo-selectors like nth-child(2n+1) and all that :-)

It sounds like tables are the way to go for what you’re trying to achieve. If it was me, I’d spend some more time trying to figure out a way to do it in CSS, but that’s just because I like torturing myself ;) I can think of a few options, but like you said, we might as well wait until CSS3 when things become so much easier (like this).

Comments RSS 2.0 | Add a Comment | Trackback