Formatting/aligning form elements.

I want to vertically align my form elements, i.e. text boxes, check boxes, radio buttons, etc.. What is the best way to do that? Currently to perform the alignments, I've been using inline code (see code below):


<form name="Register" id="Register" method="post" onsubmit="Registration()" style="padding: 10px; border-bottom:#FF9900 dotted;">
<table width="200" border="0" cellpadding="10" cellspacing="0">
<tr>
<td>
<p>First Name: <br/> <input type="text" name="firstName" id="firstName" /> </p>
<p>Last Name: <br/> <input type="text" name="lastName" id="lastName" /> </p>
<p>Sex: <br/> <input type="radio" name="sex" value="male" style="margin-left: -5px;" />Male &nbsp; <input type="radio" name="sex" value="female" />Female </p>
</td>
<td>
<p>Email Address: <br/> <input type="text" name="email" id="email" /> </p>
<p>Password: <br/> <input type="password" name="password" id="password" /> </p>
<p>Confirm Password: <br/> <input type="password" name="confirmPassword" id="confirmPassword" /> </p>
</td>
</tr>
<tr>
<td colspan="2"><center><input type="submit" name="submit" value="Sign-Up"/></center>
<input type="hidden" name="type" value="Registration" />
</td>
</tr>
</table>
</form>

Never use tables to format the form. See www.alistapart.com/articles/prettyaccessibleforms