[jeskel]

Q: How can I handle forms without tables?

A: The forms layouts usually rely heavily on tables to keep everything lined up. You can easily achieve the same thing by applying a little CSS to your page.

Using tables, you would line up your form elements like that:

<form action="whatever.php" method="post">
<table>
<tr>
<td>First name:</td>
<td><input type="text" name="first_name" id="first_name" size="20" maxlength="30" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="last_name" id="last_name" size="20" maxlength="30" /></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value selected="Not specified">Not specified</option> 
<option value="Male">Male</option> 
<option value="Female">Female</option>
</select>
</td>
</tr>
</table>
</form>

You can easily achieve the same thing using CSS. Here is the CSS part:

form p {
   width: 350px;
   clear: both;
}

form p label {
   display: inline;
   float: left;
   width: 100px;
}

form p input, form p textarea, form p select {
   margin: 0;
}

And here is the HTML part:

<form action="whatever.php" method="post">

   <p><label for="first_name">First name:</label>
   <input type="text" name="first_name" id="first_name" size="20" maxlength="30" /></p>
   <p><label for="last_name">Last name:</label>
   <input type="text" name="last_name" id="last_name" size="20" maxlength="30" /></p>
   <p><label for="gender">Gender:</label>
   <select name="gender">
   <option value selected="Not specified">Not specified</option> 
   <option value="Male">Male</option> 
   <option value="Female">Female</option>
   </select></p>

</form>

Labels float to the left of the paragraphs appearing within forms while form fields will apear to the right. To make it short, the clear property will achieve what the </tr><tr> used to do. Note that my explanations are based on Dan Shafer's book 'HTML Utopia, Designing Without Tables Using CSS'.

Please note that:

Older versions of Safari didn't support legend, just the fieldset border is visible. Camino (post-Chimera) has a bug causing floated labels are replaced with input fields. Buggy Opera6/Mac: legend is displayed inside the fieldset (among other text). MSIE/Mac only displays legend on the right side if text-align:right is specified. NS6 fails badly on these constructs (thanks to Manuel Razzari); however, NS7 works fine.

taken from: http://www.pixy.cz/blogg/clanky/css-...andlabels.html