Topic: can you convert these simple tables to CSS?

I'm interested in starting to use more CSS positioning than I have in the past, even though I think tables (still) have much more of a place in site design than many CSS-proponents are willing to admit. However, even simple table-style structures seem difficult to emulate with pure CSS. Please have a look:

http://jim.centerfuse.net/css/tables.html

I would be interested in seeing if anyone can emulate these tables exactly, with the given criteria.

-Jim Keller

jim_keller: Yes I think they can be done (although I suspect you are missing the point by trying to replicate this exactly like you have it with various constraints) - use the ideas outlined here:
http://www.alistapart.com/articles/practicalcss/

And welocme - pop down to the Reception Room (link in sig).

___________________
Emps

The Emperor dot org

Actually those are both pretty easy to convert. I'm not going to do it for you (and I doubt anyone else will) but I'll tell you how to do it.

First you'll need a holder div that specifies the percentage of the screen the entire thing takes. I assume you don't want to height to be dynamic so you can set that with the holder div as well. Or don't and just let the remaining three divs set the height. You can also set a border on this div.

Next you need the top purple row. Easy enough. Purple background. Color: white. Width: auto.

For the bottom row you're going to need to float the div with the input field. In your code it will come before the grey div. Just specify how big you want the div and use a float: right. The grey div should be pretty straight forward after that.

Why don't you try it first and then we'll help you with any bugs?

:::11oh1:::

Hey guys,
Thanks for the replies. I definitely tried on my own before posting; you can check out my attempt here: http://jim.centerfuse.net/css/cssattempt.html

any help would be greatly appreciated. I'm trying to shy away from tables whenever CSS can take over, but CSS seems to be lacking in some areas (like side by side div alignment without absolute positioning). I think it's atrocious to have to set the height of a div explicitly (is there no way to force it to be the height of its container, and vertically align its contents)? I also have a personal preference about having code that reads top to bottom and correlates with the page (meaning that I don't think the footer of the page should be the first thing in the code, unless there's a very distinct reason)

-Jim

quote:

---

can you convert these simple tables to CSS?

---

Your use of the word "convert" bothers me. I think this is a common stumbling block for CSS beginners, but there's no magic way to "convert" tables into CSS.

Tables and CSS are two different methods of design. The first thing you should learn to do is to stop thinking in terms of rows and cells and stop asking "how would I do this table layout in CSS," because that's a very inefficient way of going about things. Understand rules-based design, and start from scratch. Think in this new mindset, and you'll have no problem getting CSS to do what you want.

>Tables and CSS are two different methods of design.

I realize that, but CSS proponents seem to be hellbent on eliminating tables altogether. Some things that aren't necessarily "tabular data" are still best shown in a tabular format, at least in my opinion. One huge problem with DIVs is their (practical) inability to sit side by side while inheriting the height of their container.
For positioning elements all over the page in creative, unorthodox ways, CSS is certainly the only tool to use, but the average web user filling out a form is looking for something very easy to follow, which usually means tabular. Take this form for posting a message, for instance. Even if it's not technically tabular data being pulled from a database, there's still two columns and 7 rows, vertically and horizontally aligned to match one another. Doing this same form with DIVs would be a headache, but a lot of CSS hardliners would poo-poo the use of a table for it.

Here's an example what I've been doing recently, and I personally kind of like it so far. It uses (heavily style-sheeted) tables for multi-column content, and DIVs for single column content:
http://jim.centerfuse.net/css/current.html



[This message has been edited by jim_keller (edited 12-05-2003).]

Jim: I understand where you're coming from. I pride myself on having a clean CSS design on my site, but my contact form uses a table. Why? Because I believe that it's tabular data. Like you said, it doesn't have to be pulled from a database to be tabular.

CSS zealots do sometimes come on a little strong (I have been guilty of this myself on more than one occasion), so I can understand your apprehension. I wouldn't necessarily classify myself as "hell-bent on eliminating tables," but I do think that tables should be used for their proper purpose. I think if you are serious about design, you will be interested in making the transition, but only you can decide at what pace that transition will take place.


___________________________
Suho: www.liminality.org