A Simple Tableless Form

Why Use CSS (A brief recap)

By now, just about anyone who has worked on web-based development has heard the arguments against tables in HTML design. Although the vast majority of websites in earlier web development were table based, times have changed and most web developers are coming over to the benefits of purely CSS based design.

There are of course many reasons for this change; namely the separation of page structure and visual aesthetics. Software developers, above all others, should appreciate this singular advantage of using CSS based design over tables and fixed graphics within the HTML.

With a CSS based website or web application you gain the advantage of being able to quickly change the entire look of a website by simply changing an external CSS stylesheet (or collection of css stylesheets) and functionality of the webpage should stay in tact since the underlying HTML structure is unchanged. Additionally, there are SEO advantages to using CSS and div’s versus tables and worse, nested tables.

Common CSS Problem-Area: Forms

So now that we briefly recapped the reasons why as well as a few significant advantages of using CSS, let’s discuss a common CSS problem area; forms.

We’ll use a very simple example which incorporates the majority of elements within a form. The following code examples are written in good-old-fashioned HTML instead of ASP.NET and do not contain validation, ID’s, etc. like a production form would have:

A Basic Form Screenshot

The old way of doing this in HTML would look something like this:

<html>
<head>
<title>A Simple Table Form</title>
</head>
<body>
	<h1>A Simple Table Form</h1>
	
	<table>
		<tr>
			<td>Name</td>
			<td colspan="5"><input type="text" size="65" /></td>
		</tr>
		<tr>
			<td>Property Address</td>
			<td colspan="5"><input type="text" size="65" /></td>
		</tr>
		<tr>
			<td>City</td>
			<td><input type="text" /></td>
			<td>State</td>
			<td>
				<select>
					<option value="FL">FL</option>
				</select>
			</td>
			<td>Zip</td>
			<td><input type="text" size="14" /></td>
		</tr>
		<tr>
			<td>Email</td>
			<td colspan="5"><input type="text" size="65" /></td>
		</tr>
		<tr>
			<td colspan="6">Message</td>
		</tr>
		<tr>
			<td colspan="6"><textarea cols="65" rows="10"></textarea></td>
		</tr>
		<tr>
			<td colspan="6"><input type="button" value="Submit" /></td>
		</tr>
	</table>
</body>
</html>

Let’s take a look at one approach without tables and using CSS styles (the CSS is incorporated into the head of the HTML for demonstration purposes):

<html>
<head>
<title>A Simple Tableless Form</title>
<style>
.form
{
}
.form span
{
	float: left;
	width: 120px;
	clear: both;
}
.form .normal
{
	width: 120px;
	float: none;
}
.form .short
{
	width: 50px;
}
.form input, .form select, .form textarea
{
	margin-top: 2px;
	margin-bottom: 2px;
}
</style>
</head>
<body>

<div class="form">
	<h1>A Simple Tableless Form</h1>
	
	<span>Name</span>
	<input type="text" size="65" /><br />

	<span>Property Address</span>
	<input type="text" size="65" /><br />

	<span>City</span>
	<input type="text" />

	<span class="normal short">State</span>
	<select>
		<option value="FL">FL</option>
	</select>
	
	<span class="normal short">Zip</span>
	<input type="text" size="14" /><br />

	<span>Email</span>
	<input type="text" size="65" /><br />
	
	<span>Message</span><br />
	<textarea cols="65" rows="10"></textarea><br />

	<input type="button" value="Submit" />
</div>

</body>
</html>

In production, don’t forget to move the CSS to an external file – which is usually cached by the browser after initially being downloaded. This improves download speed and code maintenance.

The key is the form class and styles within the form class. all ‘s are treated special, so they float left and default to a specified width (which can change based on the form). This lines up the input and the input tag’s vertically so the form looks clean. I generally also include a short style for closer width when necessary. The normal style is to allow non-floated spans for laying form elements out horizontally. Finally, I’ve added some additional spacing to form input controls to make the form easier to read.

A Nice Advantage for CSS Forms

To demonstrate one final advantage let’s take the following scenario: you need to be able to hide or show the state and state dropdown from codebehind, a common example when working with ASP.NET. With the CSS version, you can simply wrap the state span and select input with an ASP Panel and turn the visibility on/off. With a table, this would break the table structure if you remove a column, and if not, you are left with a large gap.

I hope this helps in your next HTML form!

18 thoughts on “A Simple Tableless Form

  1. Thanks for this very helpful write up. I’m just new to web page development and I am used in using tables before so just wanna try creating tableless forms.

  2. Good blog post, Above you have mentioned the CSS is helpful to SEO. i cant agree with point. not related to search engine algorithm. Google will consider Text but not a text colors. CSS is used for design a user attractive designs..

  3. I may not have been clear, but I actually meant that having streamlined clean HTML that expresses purely the content and allowing CSS to specify the design as opposed to mucking up the HTML content with tables (or nested tables) for the purpose of presentation only. In this way CSS helps SEO efforts.

    I do agree of course that search engines appear to look at text content, weight, location on page, type of tag, etc. and not CSS style elements (color, etc.) but it’s a good point to clarify.

    Thanks!

  4. This has been stated, but you really should use labels instead of span. The reason being is that labels are specifically for naming an input field AND will toggle the field when selected. Oh yes, and its just the appropriate way to do it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s