How to style and align forms without tables?

Question

I've gotten used to using <table>s for aligning my form fields perfectly. This is how I commonly write my forms:

<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>

I know this is bad practice, and I want to use CSS, <label>s, <div>s, or a cleaner method. However, the fact is, <table>s work extremely well for the forms. Everything is aligned exactly right, the spacing is perfect, all errors exactly below each other, etc.

I recently tried using <dt> and <dd> tags for a form, but I ended up reverting back to tables just because they looked so much better.

How can I get this kind of aligned table layout without using <table>s?

Solution 1

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.

Solution 2

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

Solution 3

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.

Solution 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 -->

Solution 5

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?

View more solutions