Creating Forms: Pure CSS vs Table Based

While I have always been an advocate for table-less layouts with semantic HTML, designing forms with pure CSS has proven to be a complete pain in the butt. And apparently I'm only one in 10,000 to say so.

Are Pure CSS Forms Really Superior?

Truly the only arguments against table-based forms are the semantics arguments and web accessibility cliches. Let's address these claims.

Claim 1: Semantics: Tables are for Tabular Data

Do I agree with this statement? Certainly. But is it really too much of a stretch to advocate that forms are tabular in nature? Imagine you wanted to make a form that would be printed and filled out on paper. It would make sense to use a table for that. Also note that forms can logically be integrated to spreadsheets, which are tabular by definition. Of course it is not as semantic as the display of tabular data, but the semantic value lost is equal to that of using the br tag outside the context of a paragraph line break (which happens extremely frequently). There seems to be a perception amongst some anti-table zealots that ugly, semantic-less code is okay as long as you don't use tables. So the same people who decry the use of tables will improperly use br tags, will litter their form code with spans and classes, have 400 lines of CSS code for their form, and then tell us that tables are bad for the web. Hmph. This post from the sitepoint forums basically sums it up the arrogance and hypocrisy of the common table-basher.

I'd never use a table to lay out a form (unless the structure really is tabular). There's no need. My favourite method for creating a traditional form layout (labels on the left, fields on the right) is to use a left padding on the fieldset (or a nested DIV) with relative positioning, then absolutely positioning the labels. Using classes for the fieldset you can acommodate layouts with different length of labels, e.g., CSS Code: .short-labels {padding-left:5em} .medium-labels {padding-left:8em} .long-labels {padding-left:16em} This method also makes it very easy to have text fields or textareas that occupy all of the available width in the right 'column'.

So to adhere to egocentric standards, you have to use a relatively positioned nested div, absolutely position each label and input, and use different classes depending on the relative length of the label. Yeah, that's totally good coding practice. And this post isn't just from some random forum junky: It's from a sitepoint author.

Claim 2: CSS Forms are More Accessible

What are the accessibility gains of CSS over Tables? According to Chromatic Sites,

Separating content from visual information
Universal cross-browser style declarations
Placement of interactive elements

These are all true. I'd also like to add that CSS can decrease load times by eliminating the bulky HTML caused by table-based layouts. However, all these accessibility gains over tables seem to apply only when the entire web design is created in tables, and when no CSS is used whatsoever. I'll address these accessibility issues individually.

1) Separating content from visual information

The only presentational markup necessary when dealing with tabular forms are the initial cellspacing/border values, and the aligns/valigns for the cells. This extra markup is actually less than the extra markup found in most CSS contact forms via label classes and spans.

2) Universal cross-browser style declarations

Anyone who's worked with forms using only CSS knows that getting form elements to behave cross browser can be extremely time consuming. Despite the fact that 90% of the pages I create validate strict, forms will behave erratically in different browsers without a lot of extra classes and markup.

3) Placement of interactive elements

Chromatic Sites claims that tables for layouts causes too much clutter. However, this isn't an issue since you can use css selectors to select the td and input tags with CSS. This allows you to apply proper margin and padding and give plenty of space between the form elements.

4) CSS decreases load times over table-based layouts

Yes, CSS can decrease load times for websites. However, bulky CSS to accommodate form creation can lead to a slower user experience as well. Take for instance Jeff Howdens creation of a CSS only form. It looks nice, functions well, and the HTML is perfectly semantic, but look at how long the CSS code is. Now imagine how long that took to perfect.

Table-based Form Best Practices

Table-based code can still be maintainable if you do not attempt to implement presentational elements within the code. Let the CSS Take care of that. Also, avoid nesting tables at all cost. There is generally no need for it when it comes to forms. Here is an example of a simple table-based form that lets CSS do most of the work(but thanks to using tables the work is easy!).

<table id=”contactForm” cellspacing=”0″ cellpadding=”0″ border=”0″>

<tr>
<td align=”right” valign=”middle”><label for=”name”>Name:</label></td>
<td><input type=”text” class=”required” id=”name” name=”name” /></td>
</tr>

<tr>
<td align=”right” valign=”middle”><label for=”company”>Company:</label></td>
<td><input type=”text” class=”" id=”company” name=”company” /></td>
</tr>

<tr>
<td align=”right” valign=”middle”><label for=”phone”>Phone Number:</label></td>
<td><input type=”text” class=”required phoneUS” id=”phone” name=”phone” /></td>
</tr>

<tr>
<td align=”right” valign=”middle”><label for=”email”>Email Address:</label></td>
<td><input type=”text” class=”required email” id=”email” name=”email” /></td>
</tr>

<tr>
<td align=”right” valign=”top”><label for=”details”>Project Details:</label></td>
<td><textarea class=”" id=”details” name=”details” cols=”10″ rows=”6″></textarea></td>
</tr>

</table>

Enjoy the simple things in life :)

In Conclusion

We realize that Pure CSS and CSS+Tables can accomplish the same thing when it comes to forms. The issue boils down to the following questions:

Will the user care about your apprehension to simple table-based solutions?
Will your client care about your successful implementation of a CSS Form when you charge them 4 hours for labor when you could have made a table-based form in 30 minutes?

About

Work

Services

Blog

Contact Us

Top Articles ⇒