title: How to style and align forms without tables?
body: <p>I've gotten used to using <code>&lt;table&gt;s</code> for aligning my form fields perfectly. This is how I commonly write my forms:</p>
  
  <pre><code>&lt;table border="0"&gt;
     &lt;tr&gt;
       &lt;td&gt;&lt;label for="f_name"&gt;First name:&lt;/label&gt;&lt;/td&gt;
       &lt;td&gt;&lt;input type='text' id='f_name' name='f_name' /&gt;&lt;/td&gt;
       &lt;td class='error'&gt;&lt;?=form_error('f_name');?&gt;&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I know this is bad practice, and I <em>want</em> to use CSS, <code>&lt;label&gt;s</code>, <code>&lt;div&gt;s</code>, or a cleaner method. However, the fact is, <code>&lt;table&gt;s</code> work extremely well for the forms. Everything is aligned exactly right, the spacing is perfect, all errors exactly below each other, etc.</p>
  
  <p>I recently tried using <code>&lt;dt&gt;</code> and <code>&lt;dd&gt;</code> tags for a form, but I ended up reverting back to tables just because they looked so much better.</p>
  
  <p>How can I get this kind of aligned table layout without using <code>&lt;table&gt;</code>s?</p>