Forms layout

If you've ever used forms you are aware of the lack of layout control. The simplest and most common solution to control the layout of forms is with the <pre> tag, however, one drawback is that this will disable all font control.

The answer to the problem is once again tables. With tables you'll get great control over the layout, but you can still change font sizes and use different <align> tags, etc.

Let's compare a form with and without using this trick. First a normal basic form, just using normal <form> tags.

---

Name:
Address 1:
Address 2:
ZIP Code:

---

Ok, there are quite a few disadvantages here. The fields aren't aligned, not lined-up at all. And you can never solve this with space-indentation, for example, because the readers font size may vary and then the fields still wouldn't be lined up. All buttons will just display where they are in text, and if you resize your browser window you've got no control over the layout. Well, you get the point, it's quite messy.

Now let's take a look at a form which is using this table-layout trick.

As you see, there is quite a big difference. These forms are laid out using tables. First a table to center the whole thing, then another table in that table (a nested table) for the forms and text.

Here is the HTML code to do this:

Last updated 970603