Topic: can you convert these simple tables to CSS? (Page 1 of 1) Pages that link to <a href="" title="Pages that link to Topic: can you convert these simple tables to CSS? (Page 1 of 1)" rel="nofollow" >Topic: can you convert these simple tables to CSS? <span class="small">(Page 1 of 1)</span>\

Obsessive-Compulsive (I) Inmate

Insane since: Dec 2003

IP logged posted posted 12-05-2003 09:17 Edit Quote

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:

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

-Jim Keller

Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 12-05-2003 14:48 Edit Quote

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:

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


The Emperor dot org

Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

IP logged posted posted 12-05-2003 14:54 Edit Quote

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?


Obsessive-Compulsive (I) Inmate

Insane since: Dec 2003

IP logged posted posted 12-05-2003 20:47 Edit Quote

Hey guys,
Thanks for the replies. I definitely tried on my own before posting; you can check out my attempt here:

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)


Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 12-05-2003 21:28 Edit 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.

Obsessive-Compulsive (I) Inmate

Insane since: Dec 2003

IP logged posted posted 12-05-2003 22:09 Edit Quote

>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:

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

Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 12-06-2003 14:30 Edit Quote

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.


Post Reply
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
Your Text:
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu