How to style and align forms without tables?
If you don't use tables you need to know the width of your labels upfront. This can often be a problem for multi-language sites (i18n).
With tables, they stretch to fit labels of differing sizes. CSS alone can't do that yet in a well-supported way.
This might not get a lot of support but here's my two cents:
In some situations tables are easier for layout; such as three columns or forms (albeit there are some great suggestions here for doing a pure css form layout so don't ignore those either.)
Processes and methodologies can make good servants but are poor masters. - Mark Dowd, John McDonald & Justin Schuh in "The Art of Software Security Assessment"
I believe that this quote very strongly applies to this situation. If your table layout is working for you, not causing accessibility issues and isn't broken - then don't fix it.
Phrases like: "you should", "must", "always" - make me scared, because one-size-doesn't-fit-all! Take zealots with a grain of salt.
Yes, use labels and CSS:
<label class='FBLabel' for="FName">First Name</label>
<input value="something" name="FName" type="text" class='FBInput'>
<br>
css:
.FBLabel, .FBInput {
display:block;
width:150px;
float:left;
margin-bottom:10px;
}
See: http://www.alistapart.com/articles/prettyaccessibleforms