CSS Examples 
Tableless forms using CSS
Author: CSS Drive
This CSS example transforms a conventional form so it's tableless. A form that doesn't use tables for its layout is much more lightweight and semantically correct.
The CSS:
<style type="text/css">
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width: 1em;
}
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
br{
clear: left;
}
</style>
The HTML:
<form>
<label for="user">Name</label>
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />
<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />
<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
By floating the "label" tag to the left, the text description of each form field appears to the left, resulting in a "two column" look for the form. The width of the "label" is controlled, so it will comfortably contain the longest text description in the form. I throw in a <br> tag with "clear: left" after each form field to prevent the floating <label> tag from potentially spilling over to content beneath it. Margins such as "margin-top" and "margin-bottom" are also used to add some nice margins between form fields.
Comments (108)
"A form that doesn't use tables for its layout is much more lightweight and semantically correct." well, that really depends on the composition of your markup. furthermore, a table-less document may be burdened by an excessively long style sheet (load time). anyway, i'm more interested in your last remark regarding semantics. so-called semantic correctness is context dependent, i.e., syntactically grounded. at least on the surface, linguistic syntax varies (although our underlying thought processes may be equivalent across languages). the structure of a sentence contributes to the meaning of that sentence (within its language) and as such, may be meaningless in another context (even within the same language). take for example the sentence 'Smith went to hospital'. syntactically, it is incorrect in American English but correct in British English. the sentence meaning of the former is inherently incorrect whereas the same of the latter is correct. the point being, whatever your markup (and whatever your class nomenclature), the meaning of that markup is context dependent. thus, correctness only applies from within the rules (however fluid) governing the markup. since the rules governing divs differ than that of tables, it is misleading to call the latter incorrect from the former context.
Oi. Very good the site. I explained my many doubts, but I have a problem!
How do I get the message that the visitor wrote go to my e-mail box?
Will someone help me?
If possible run here, as I do!
Thanks
This was very helpful for me since I was trying to keep certain fields together in the form. Thanks again!
Thanks Very Much, It worked - Perfectly!
good to use
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
Typical values for type are type="text/css" for <style> and type="text/javascript" for .
If this problem, how to solve the problem? Thank you!
lol ... would be great if it was cross browser compatible and didn't require all that picky BS that comes with CSS. put your forms in tables, its simple and it works in every browser.
CSS is for fonts, links, colors, backgrounds and the odd formatted div tag, give it a rest already!
Luke, I hope your not serious. CSS is for the separation of presentation from content, so future browsers or updates will be easy, and not require a double edit.
Tables are for .... tables, and tabular data. Leave them there, or you'll run into major problems in the future.
It's 2008 already, quit with the excessive table use.
Excellent example. Ill try this out.
Wow! This was perfect! I've been struggling with CSS...your examples helped make sense out of it! Thanks guys! You're terrific!
