Developer

Lay out forms with CSS2 instead of tables

Building forms with HTML and tables creates a lot of extra code and isn't the most elegant solution. CSS2 offers a good alternative for building forms, and this quick tutorial will help you get started.


My recent article "Ditch graphics-heavy pages: Create flexible CSS2 border effects" generated a lot of feedback from members who wanted to start using XHTML and CSS2 but didn’t feel comfortable building things like forms without using tables. This article will show you how easy it is to lay out and maintain forms using CSS2 instead of tables.

For this example, I created a simple login/registration page for YourSite.com. The page contains two forms, one for logging in and one for registering, each with its own distinctive look. To illustrate the benefits of using CSS2, I created an HTML-only version and a CSS2 version. The HTML-only version appears in Figure A.

Figure A
This is the HTML-only table.


The HTML way
To achieve the look and layout of the example above in HTML only, I have to use HTML tags in ways that they weren’t originally intended. First, I use a table to define the layout of the page. HTML purists would say that that is a less-than-ideal solution since tables were intended to be containers for data, not to control page layout. However, without using CSS, there aren’t many other options.

In addition to tables, I have to use 1-pixel by 1-pixel spacer graphics to achieve the thin black border that surrounds the forms. Finally, I have to nest a second table with a cellpadding of 10 pixels within the first table. The 1-pixel black border I placed around the first table requires that that table’s cellspacing and cellpadding be set to 0. The nested table’s cellpadding provides the proper spacing between the form elements and the black border of the first table. It also provides the spacing between form elements within the nested table. As you can see in Listing A, all of this formatting makes for some pretty messy code.

The pros of using HTML are that it:
  • ·        Will work in situations, like for some mobile browsers, where CSS can’t be used.
  • ·        Is cross-browser compatible.

The cons are that it:
  • ·        Creates bulky code.
  • ·        Is time-consuming to update.
  • ·        Requires the use of table tags and spacer graphics for controlling layout, which is not standards-compliant.

The CSS2 way
With CSS2, the creation of the same page is simpler, and the HTML code is much cleaner. Because the content and formatting are maintained separately, there is no need to use nested tables, spacer graphics, or all of those font tags in the HTML file.

Listing B shows you what the HTML code looks like when you use CSS2 to control the format.

Notice that there is not a table in sight. Also gone are those spacer graphics and font tags. In their place are the class names from the CSS2 file in Listing C.

All of the formatting that had to be done with HTML tags is now done with CSS2 classes. For example, the CSS2 class form_1 specifies the look and layout of the beige login area.

Notice that I was able to set attributes like width, border, color, padding, and font in the CSS2 file and assign all of those attributes to a single <DIV> that contains the login form. In addition to being much cleaner than the HTML-only code, the CSS2 code allows for much easier updating. The tables used in the HTML-only example are far more time-consuming to edit. With CSS2, on the other hand, you can do all of your updates within the CSS2 file.

Figure B shows an example of an alternate design for the same page. It incorporates a completely different color scheme from the previous example. With HTML only, I would have had to do a lot of digging around in the code to change all the font tags and color values. With CSS2, I can make the changes in less than five minutes. And if I don’t like the changes I’ve made, it is just as simple to change it back.

Figure B
This redesigned page uses CSS2 instead of HTML.


The updated CSS2 file is in Listing D.

To illustrate some of the changes, let’s look at the form_1 class again. If you compare it to the form_1 class from the original example, you’ll see how simple it was to change the font family, font size, background color, and border style. All of this was done without having to touch the original HMTL file.

In addition to allowing lightweight code, CSS2 is:
  • ·        Easy to update.
  • ·        Standards compliant.
  • ·        Cross-browser compatible.

The main drawback to CSS2 is that some mobile browsers don’t support it yet.

How to get started
If you’re building new forms from scratch, there is no better time to start using CSS2. As you’ve seen from the example above, CSS2 makes building, maintaining, and updating forms much easier. It will also make them more standards-compliant.

If you’ve already got a large site that doesn’t use CSS2, deciding when to make the move is a little more complicated. If you don’t have the time or resources to do a complete redesign all at once, you could implement CSS2 gradually as you update your pages. Either way, the benefits of CSS2 will make your code much cleaner and your life much easier.

Editor's Picks

Free Newsletters, In your Inbox