Using CSS to achieve tabular layout

By Chris Gaskell

I am told I shouldn’t use tables for anything but tabular data. I’m looking for a way to correctly align form fields using DIVs.

With tables, I would do the following:

<TABLE>
<FORM>
<TR><TD>Field 1:</TD><TD><input type=text></TD></TR>
<TR><TD>Field 2:</TD><TD><input type=text></TD></TR>
</TABLE>
</FORM>

This can be built something like this:

<div>
<label for=”field1″>Field 1:</label>
<input id=”field1″ type=”text”>
</div>
<div>
<label for=”field2″>Field 2:</label>
<input id=”field2″ type=”text”>
</div>

And this is an example CSS I’ve used:

label {
width: 35%;
float: left;
clear: left;
text-align: right;
white-space: nowrap;
min-width: 5em;
}

Leave a Reply