Replacing a 2 column table with CSS

[Peter Foti]

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]

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

--
Brian
follow the directions in my address to email me

[Peter Foti]

"Brian" <us*****@mangymutt.com.invalid-remove-this-part> wrote in message
news:GZyjb.572821$cF.246886@rwcrnsc53...

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

[Kris]

In article <vo************@corp.supernews.com>,
"Peter Foti" <pe****@systolicnetworks.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
kr*******@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.

[Peter Foti]

"Kris" <kr*******@xs4all.netherlands> wrote in message
news:kr*****************************@news1.news.xs 4all.nl...

In article <vo************@corp.supernews.com>,
"Peter Foti" <pe****@systolicnetworks.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

[Brian]

Peter Foti wrote:

Note that one could make the case that this is tabular data, and
belongs in a table.
I did consider that possibility, but I felt that too much of what I
was doing was presentational (aligning the columns, for instance...

There is absolutely nothing wrong with styling a table to enhance the
presentation of tabular data. Indeed, it seems like a good idea in
most cases.
and I may want to add more presentation once the initial design is
done).

Well, if you think you'll be fighting against the default display of a
table, then your choice is reasonable.

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

Use <input class="forminput"> instead of <span class="forminput"><input>

Or better still, add some self-documentation to the code:
<form class="catalogue">
<label><input type="text">
in css:
form.catalogue input {}

--
Brian
follow the directions in my address to email me

[Stan Brown]

In article <vo************@corp.supernews.com> in
comp.infosystems.www.authoring.stylesheets, Peter Foti
<pe****@systolicnetworks.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/

[Brian]

Stan Brown wrote:

Peter Foti <pe****@systolicnetworks.com> wrote:

I have a form that contains a 2 column table.

I would like to replace this table with code that does not use a
table for layout
IMHO what you have _is_ a table and <table> markup is appropriate.

Do you see any particular benefit in changing this to CSS?

It's reasonable to want to change the appearance such that a table is
impractical, e.g., by having the city, state, and zip code appear all
on 1 line when filling out a mailing address.[1] In that case, one
might want to use markup other than a table. I chose to use div,
label, and input for forms on a couple of sites I did.
I think the result (even without counting the separate style sheet)
will be longer than the original

The code may be longer on my site, but not by anything remotely
significant. Mind you, I never did change the layout as I had planned.
It is still in 2 columns, a bit like a table. Some day.

[1] That is not appropriate for all forms, of course. City/state/zip
is the way to address an envelop in the U.S., and thus would be
appropriate if the form were requesting a U.S. shipping address.

--
Brian
follow the directions in my address to email me

[William Tasso]

Peter Foti wrote:

"Kris" <kr*******@xs4all.netherlands> wrote in message
news:kr*****************************@news1.news.xs 4all.nl...

In article <vo************@corp.supernews.com>,
"Peter Foti" <pe****@systolicnetworks.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

[Peter Foti]

"Stan Brown" <th************@fastmail.fm> wrote in message
news:MP************************@news.odyssey.net.. .

In article <vo************@corp.supernews.com> in
comp.infosystems.www.authoring.stylesheets, Peter Foti
<pe****@systolicnetworks.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", "PhoneNumber", etc.). In the right column is the input element. The left columnis 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

[Nikolaos Giannopoulos]

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

[dante]

This is one way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
form {
border: dashed #0074B0;
border-width: 1px 0;
padding: 1em 0;
margin: 0 1em
}
..formrow {
clear: both;
padding: .25em
}
..fieldset {
margin: 0 0 2em 0;
padding: 1em .5em .5em .5em;
border: 1px solid #000000;
}
..legend {
padding: .2em;
background-color: #EBEBFF;
font-weight: bold;
color: #000000;
border: 1px solid #000000;
}
..input {
border: 1px solid #000000;
font-weight: bold;
background-color: #F5F5F5;
}
..accesskey { text-decoration: underline }
-->
</style>
</head>
<body>

<form method="post" action="whatever">
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" size="12">

<br />
<br />

<fieldset>
<legend accesskey="I">Contact Information</legend>
<label for="name" accesskey="N">Name:</label>
<input type="text" name="name" id="name">
</fieldset>
</form>
</body>
</html>

Regards

"Peter Foti" <pe****@systolicnetworks.com> wrote in message
news:vo************@corp.supernews.com...

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