How to style and align forms without tables?

Answer 1

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

Answer 2

I have used this in the past fairly effectively:

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>

The only really gotcha is Firefox 2 which gracefully degrades. (see the -moz-inline-box which is a bit of hack, but not too bad)

Answer 3

Why do you not want to use tables? It sounds like they are working perfectly for you now. Are you worried about accessibility issues? Just because it is a table doesn't mean that accessibility will suffer.

I want to caution you from creating a new solution to a solved problem for nothing other than purity's sake. Even if you are worried about semantics, what kind of semantics describe a form anyway?

Answer 4

I use the following method most of the time and it allows me to get all my alignment set up exactly how I like it. As you can see, it gives me a great number of hooks for CSS and JS.

<form id="login-form" action="#" method="post">
	<fieldset>
		<label id="for-email" for="email">
			<span class="label-title">Email Address <em class="required">*</em></span>
			<input id="email" name="email" type="text" class="text-input" />
		</label>
		
		<label id="for-password" for="password">
			<span class="label-title">Password <em class="required">*</em></span>
			<input id="password" name="password" type="password" class="text-input" />
		</label>
	</fieldset>
	
	<ul class="form-buttons">
		<li><input type="submit" value="Log In" /></li>
	</ul>
</form><!-- /#login-form -->

Answer 5

Most of the non-table based answers here rely on pre-determined fixed widths, which can be a pain for internationalisation, or any other scenario where you can't be certain of the required width for labels.

But CSS has display: table for this very reason:

HTML

<div class="form-fields">
  <div class="form-field">
    <label class="form-field-label" for="firstNameInput">First Name</label>
    <div class="form-field-control"><input type="text" id="firstNameInput"></div>
    <div class="form-field-comment">Required</div>
  </div>
  <div class="form-field">
    <label class="form-field-label" for="lastNameInput">Last Name</label>
    <div class="form-field-control"><input type="text" id="lastNameInput"></div>
    <div class="form-field-comment">Required</div>
  </div>
</div>

CSS

.form-fields {
  display: table;
}

.form-field {
  display: table-row;
}

.form-field-label,
.form-field-control,
.form-field-comment {
  display: table-cell;
  padding: 3px 10px;
}

Simple.

Answer 6

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.