CSS and Forms aka Forms Without Tables
One thing I've noticed while doing web development is that most people use tables when laying out forms. In my never-ending quest to eliminate tables in web design for layout, I thought I'd demonstrate how to have a form with aligned columns without a table. Not that this is innovative or anything, it just seems like many people are unaware of how to do it. So instead of this:
<table>
<tr>
<td>Name:</td><td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email:</td><td><input type="text" name="email"></td>
</tr>
<tr>
<td>Phone:</td><td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Address:</td><td><input type="text" name="address"></td>
</tr>
<tr>
<td>City:</td><td><input type="text" name="city"></td>
</tr>
</table>
You can use CSS to style the lablel elements like so:
<style type="text/css">
fieldset
{
width: 16em;
}
label
{
font-size: 1em;
width: 5em;
float: left;
margin-right: 0.5em;
display: block;
}
#rightAligned label
{
text-align: right;
}
</style>
<fieldset id="rightAligned">
<legend>Right Aligned</legend>
<p><label for="name">Name:</label><input type="text" name="name"></p>
<p><label for="email">Email:</label><input type="text" name="email"></p>
<p><label for="phone">Phone:</label><input type="text" name="phone"></p>
<p><label for="address">Address:</label><input type="text" name="address"></p>
<p><label for="city">City:</label><input type="text" name="city"></p>
<input type="button" class="btn" value="Save">
</fieldset>
Which looks like this:
