Question

Lately I’ve been making a new application and I’m using a ton of forms. All is well except the styling of the forms isn’t really that good looking. Ever since I’ve banned <table>‘s from being used for layout purposes my colleagues are afraid to use <tables>‘s all together.

Now I was wondering how you guys style your forms. If there are maybe good articles you know on form styling. And maybe even the bigger questions: Are tables used to style forms now-a-days or is it not done?

Thanks!

Edit: I’ve made an example of my problem not using <table>‘s: http://pastebin.me/c73c128eb67172991f728fbdd902a40e – See how the two labels are not the same size. Setting a width with CSS would work but it’s not dynamic which is a problem in the future.

Answer 1

Tables should be used for tabular data and nothing else.

I tend to use something similiar to the following

<form>
  <fieldset>
    <label>Input one</label>
    <input type="text" />
  </fieldset>
  <fieldset>
    <label>Input one</label>
    <input type="text" />
  </fieldset>
</form>

This then allows you to style it as such that you can float the fieldsets so they appear inline as many as you need across (two is nice) and the labels appear above the input boxes.

Of course, being CSS you can change the style on a wim!

Example: http://jsfiddle.net/UQYrg/