Replacing a 2 column table with CSS

Hi all,

I have a form that contains a 2 column table. In the left column is the
description for a particular input (ie - "First Name", "Last Name", "Phone
Number", etc.). In the right column is the input element. The left column
is right aligned and the right column is left aligned. I would like to
replace this table with code that does not use a table for layout, and was
hoping someone might be able to help me with the HTML and corresponding CSS.
My thoughts are that the HTML will be something like this:

<form action="formhandler.asp" method="post">
<div>
<span class="inputdesc">First Name:</span>
<span class="forminput"><input type="text" name="firstname" size="20"
maxlength="50"></span>
</div>
<div>
<span class="inputdesc">Last Name:</span>
<span class="forminput"><input type="text" name="lastname" size="20"
maxlength="50"></span>
</div>
...
</form>

Note that I want all of the "inputdesc" items to be right aligned, and all
of the "forminput" items to be left aligned. Oddly enough, this looks very
"table-ish".

Any input (regarding the HTML above and what the CSS will need to look like)
is greatly appreciated.

Regards,
Peter Foti

"Brian" <usenet1 (AT) mangymutt (DOT) com.invalid-remove-this-part> wrote

Peter Foti wrote:

I have a form that contains a 2 column table. In the left column
is the description for a particular input (ie - "First Name", "Last
Name", "Phone Number", etc.). In the right column is the input
element. The left column is right aligned and the right column is
left aligned. I would like to replace this table with code that
does not use a table for layout,

Note that one could make the case that this is tabular data, and
belongs in a table. I decided not to use table markup for my forms, fwiw.

I did consider that possibility, but I felt that too much of what I was
doing was presentational (aligning the columns, for instance... and I may
want to add more presentation once the initial design is done).

was hoping someone might be able to help me with the HTML and
corresponding CSS. My thoughts are that the HTML will be something
like this:

form action="formhandler.asp" method="post"> <div> <span
class="inputdesc">First Name:</span

Use the label element instead of the semantically neutral span element.

Ah, yes. Almost forgot about that.

span class="forminput"><input type="text" name="firstname"
size="20" maxlength="50"></span

You don't need a span here. Just the input, ma'am.

Actually, with both the "inputdesc" span and the "forminput" spans I was
trying to keep all of the positioning information separate from the elements
themselves. It's a little redundant, I know. Not sure yet whether I want
to keep 'em or dump 'em.

Note that I want all of the "inputdesc" items to be right aligned,
and all of the "forminput" items to be left aligned. Oddly enough,
this looks very "table-ish".

Indeed. See above.

Any input (regarding the HTML above and what the CSS will need to
look like) is greatly appreciated.

an example of a form I did:

http://www.julietremblay.com/site/contact.html

Thanks. I'm sure this will prove useful.
Regards,
Peter Foti

In article <votg5jp9b5jlef (AT) corp (DOT) supernews.com>,
"Peter Foti" <peterf (AT) systolicnetworks (DOT) com> wrote:

http://www.julietremblay.com/site/contact.html

Thanks. I'm sure this will prove useful.

One of mine, if you're in for variation:
<http://www.joukedevries.nl/contact/>

--
Kris
kristiaan (AT) xs4all (DOT) netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.

"Kris" <kristiaan (AT) xs4all (DOT) netherlands> wrote

In article <votg5jp9b5jlef (AT) corp (DOT) supernews.com>,
"Peter Foti" <peterf (AT) systolicnetworks (DOT) com> wrote:

http://www.julietremblay.com/site/contact.html

Thanks. I'm sure this will prove useful.

One of mine, if you're in for variation:
http://www.joukedevries.nl/contact/

The more the merrier.
Thanks,
Peter

In article <votbijtdukvi19 (AT) corp (DOT) supernews.com> in
comp.infosystems.www.authoring.stylesheets, Peter Foti
<peterf (AT) systolicnetworks (DOT) com> wrote:

I have a form that contains a 2 column table. In the left column is the
description for a particular input (ie - "First Name", "Last Name", "Phone
Number", etc.). In the right column is the input element. The left column
is right aligned and the right column is left aligned. I would like to
replace this table with code that does not use a table for layout,

It's your choice of course, but IMHO what you have _is_ a table and
<table> markup is appropriate. The descriptions are <th> elements
and the input elements are <td>.

Do you see any particular benefit in changing this to CSS? I think
the result (even without counting the separate style sheet) will be
longer than the original.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

Peter Foti wrote:

"Kris" <kristiaan (AT) xs4all (DOT) netherlands> wrote in message
news:kristiaan-1E6036.18233416102003 (AT) news1 (DOT) news.xs4all.nl...
In article <votg5jp9b5jlef (AT) corp (DOT) supernews.com>,
"Peter Foti" <peterf (AT) systolicnetworks (DOT) com> wrote:

http://www.julietremblay.com/site/contact.html

Thanks. I'm sure this will prove useful.

One of mine, if you're in for variation:
http://www.joukedevries.nl/contact/

The more the merrier.

here you go then: http://www.williamtasso.com/contact.asp
--
William Tasso

"Stan Brown" <the_stan_brown (AT) fastmail (DOT) fm> wrote

In article <votbijtdukvi19 (AT) corp (DOT) supernews.com> in
comp.infosystems.www.authoring.stylesheets, Peter Foti
peterf (AT) systolicnetworks (DOT) com> wrote:
I have a form that contains a 2 column table. In the left column is the
description for a particular input (ie - "First Name", "Last Name",
"Phone
Number", etc.). In the right column is the input element. The left
column
is right aligned and the right column is left aligned. I would like to
replace this table with code that does not use a table for layout,

It's your choice of course, but IMHO what you have _is_ a table and
table> markup is appropriate. The descriptions are <th> elements
and the input elements are <td>.

Do you see any particular benefit in changing this to CSS? I think
the result (even without counting the separate style sheet) will be
longer than the original.

There was one case that caused me to question whether this was table data or
not. It's very similar to the example Brian gave. I want to have a single
line that contains 2 pieces of data. In my case, it's a "Work phone number"
and "Extension number". It did not seem appropriate to have something like
this:

<tr>
<td>Work Phone Number</td>
<td><input> Extension Number <input></td>
</tr>

However, if I view this as non-table data, it seems more acceptable.

-Peter

Peter Foti wrote:

form action="formhandler.asp" method="post"
div
span class="inputdesc">First Name:</span
span class="forminput"><input type="text" name="firstname" size="20"
maxlength="50"></span
/div
div
span class="inputdesc">Last Name:</span
span class="forminput"><input type="text" name="lastname" size="20"
maxlength="50"></span
/div
...
/form

Note that I want all of the "inputdesc" items to be right aligned, and all
of the "forminput" items to be left aligned. Oddly enough, this looks very
"table-ish".

Any input (regarding the HTML above and what the CSS will need to look like)
is greatly appreciated.

Your sample is almost identical to the following:

http://www.realworldstyle.com/forms.html

Personally one of the things I really like about going the CSS route
over the table route was that if in the example you change:

div.row span.label {float: left; text-align: right;}
div.row span.formw {float: right; text-align: left;}

to:

div.row span.label, div.row span.formw {display: block;}

then you easily have all your forms switch to another common
presentation format being:

<text1>
<form element1>

<text2>
<form element2>

I guess what I really liked about this implementation was seeing the
real power of CSS in a real world case i.e. we hear about how you should
mark things up properly and then use CSS to affect its presentation well
this IMO is a great example to that effect (outside CSS layouts and the
CSS zen garden samples that is).

Of course if you always used this latter format then you may want to
eliminate the extra CSS but it is sure nice to show a client one format
and if they don't like it change two lines and presto all their forms
alter to another common format. On our site we use the latter format
but who knows we may switch to the former (again) and thus I can focus
on other things now and easily change my mind later if I choose without
re-working numerous form pages.... I doubt the same can said about a
tables implementation ;-)

--Nikolaos