CSS Examples Tableless forms using CSS

Date: 02/10/2005 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">

float: left;
width: 120px;
font-weight: bold;

input, textarea{
width: 180px;
margin-bottom: 5px;

width: 250px;
height: 150px;

width: 1em;

margin-left: 120px;
margin-top: 5px;
width: 90px;

clear: left;




<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" />


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.

#1: David on 11/17 at 05:15 PM

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!

#2: oseas on 11/26 at 06:58 PM

This was very helpful for me since I was trying to keep certain fields together in the form. Thanks again!

#3: trademark registration on 11/27 at 04:05 AM

Thanks Very Much, It worked - Perfectly!

#4: Paul Dawson on 01/24 at 11:43 AM

good to use

#5: Jagan on 02/11 at 02:35 PM

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!

#6: pingpong on 03/06 at 02:09 AM

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!

#7: Luke on 03/19 at 03:18 PM

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.

#8: Brett on 03/25 at 12:44 AM

Excellent example. Ill try this out.

#9: fundraising on 04/01 at 10:43 PM

Wow! This was perfect! I've been struggling with CSS...your examples helped make sense out of it! Thanks guys! You're terrific!

#10: Laurie on 04/22 at 11:44 AM
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site