Many designers still rely upon tables for laying out their forms which actually leads to a whole lot more code than if they used some simple styling techniques with CSS. Let’s face it, forms are used in just about every website for different purposes. Seems that the majority take the quickie table layout method instead of creating some re-usable code that would dress up their boring forms.Here’s some basic HTML to be used for our sample form. We’re going to make use of the label tag and some simple methods that create the clean inline formatting:

Name


Address


City

And some simple CSS styling that positions the text field labels and styles them at the same time:

label,input {

display: block;

width: 150px;

float: left;

margin-bottom: 10px;

}

label {

text-align: right;

width: 75px;

padding-right: 20px;

font-weight: bold;

color: #999;

}

br {

clear: left;

}

Here is a snapshot of what the form would look like in your browser:

CSS Tableless Form