[thelist] Moving away from layout tables

Jonathan_A_McPherson at rl.gov Jonathan_A_McPherson at rl.gov
Wed May 29 15:44:01 CDT 2002


All,

What follows is a pretty shameless request for help on something I could
probably figure out on my own, given enough hours, so proceed with caution.

So I'm finally doing some of my first design work in XHTML, and I'm getting
mired in a lot of problems because I know tables. I *think* in tables. I
live in tables. Whenever I see a problem in the way my page looks, I want to
use tables. My sites tend to have tables nested six deep. On average.

In XHTML, as I understand it, tables are only to be used to present truly
tabular data. This seems fair. But I'm having trouble getting the "nicely
lined up" layout appearance I get when I use tables. Here are some examples
of some things I can't seem to do the CSS way. If any of you have ideas on
how to accomplish this with CSS, I'd be glad to hear it.

-- Managing Columns --
I've got a form with three different <fieldset>'s on it that I want to be
placed side-by-side, which I accomplished by setting "display: inline" on
the fieldset element:

+--------window----------+
||set1||set2||set3|      |
+------------------------+

Now I want them to be of equal width, and fill up the containing element,
like this:

+--------window----------+
||-set1-||-set2-||-set3-||
+------------------------+

With tables, I'd just toss 'em in a containing <table width="100%"> and use
<td width="33%">.

-- Aligning Radio Button Text --

For the following, * = a radio button. If I just put a bunch of radio
buttons and text (using <label>), I get this:

* this is some text that
describes the first
radio button
* this is some more text
that describes the
second radio button

I want this:
* this is some text that
  describes the first
  radio button
* this is some more text
  that describes the
  second radio button

Easy with tables. How 'bout without 'em?

-- Labels on Form Elements --

I occasionally stick some text beneath a form element to help users know
what to put in them (a short explanation of the input mask, whatever). I
want to do something like this:

+------------+ +------------+
|inputbox1   | |inputbox2   |
+------------+ +------------+
text1          text2

Again, seems like this is not really tabular data, so I shouldn't use
tables, but I don't know how to get the effect without 'em.

TIA,

--
Jonathan McPherson, LMIT/SD&I
Software Engineer & Web Systems Analyst
email / jonathan_a_mcpherson at rl dot gov
phone / 509.373.0150



More information about the thelist mailing list