Как стилизовать и выровнять формы без таблиц?

Question

Я привык использовать <table>s для идеального выравнивания полей формы. Вот как я обычно пишу свои формы:

<table border="0">
   <tr>
     <td><label for="f_name">First name:</label></td>
     <td><input type='text' id='f_name' name='f_name' /></td>
     <td class='error'><?=form_error('f_name');?></td>
   </tr>
</table>

Я знаю, что это плохая практика, и я хочу использовать CSS, <label>s, <div>s или более чистый метод. Однако факт в том, что <table>s работают очень хорошо для форм. Все выровнено точно, интервал идеален, все ошибки точно друг под другом и т. Д.

Недавно я пытался использовать теги <dt> и <dd> для формы, но в итоге я вернулся к таблицам только потому, что они выглядели намного лучше.

Как я могу получить такой тип выравнивания таблицы без использования <table> s?

Answer 1

В прошлом я использовал это довольно эффективно:

HTML:

<fieldset>
  <p>
    <label for="myTextBox">Name</label>
    <span class="field"><input type="text" name="myTextBox" id="myTextBox" /></span>
    <span class="error">This a message place</span>
  </p>
</fieldset>

CSS:

<style type="text/css">
fieldset label, fieldset .field, fieldset .error { display: -moz-inline-box; display: inline-block; zoom: 1; vertical-align: top; }
fieldset p { margin: .5em 0; }
fieldset label { width: 10em;  text-align: right; line-height: 1.1; }
fieldset .field { width: 20em; }
</style>

Единственный действительно полезный - это Firefox 2, который изящно деградирует. (см. -moz-inline-box, который немного взломан, но не так уж плох)