Layout Form without Tables with CSS Trick

Creating a form with lots of field could be a tedious task as it involves playing with TR and TD in html table. Along with that it also increases the size and complexity of the html code of out page. e.g. Look at the below form:

Could you imagine it to create without using table or nested div. Well if no then you can just by using easy CSS trick. here is the whole css + html code for doing this.

<html xmlns="">
    <title>Layout Form without Tables</title>
    <style type="text/css">
        background-color: #f3f3f3;
        border: solid 1px #a1a1a1;
        padding: 10px;
        width: 300px;
    .formLayout label, .formLayout input
        display: block;
        width: 120px;
        float: left;
        margin-bottom: 10px;
    .formLayout label
        text-align: right;
        padding-right: 20px;
        clear: left;
    <div class="formLayout">
        <label>First Name</label>
        <input id="name" name="name"><br>
        <label>Last Name</label>
        <input id="Text1" name="name"><br>
        <input id="address1"><br>
        <input id="address2"><br>
        <select id="city">
            <option>New York</option>
        <input id="zip"><br>

52 comment(S)

mcarter on Aug 5, 2008 10:41 AM

'Simply' Beautiful! Very elegant solution. Thanks for sharing it.

Hilyin on Aug 5, 2008 03:38 PM

What about checkboxes and radio buttons?

IE6 and Safari 3.1.1 misalign the select fields with the text boxes slightly with this code.

Sorry for the parade raining!

Henry on Aug 5, 2008 09:56 PM

your label tag should use for="{id of the form element}".

Ignatius on Aug 5, 2008 11:23 PM

Layout form without... form tag?

Ok, it's just an example, but 'div class="formLayout"' could be 'form'.

dfguy on Aug 6, 2008 05:35 AM

great and all if you have a simple form. throw in some radio buttons, checkboxes, nested fields and what have you, and you'll find your simple CSS layout code will become a garbled mess quickly.

Vladimir on Aug 6, 2008 05:54 AM

I use the same principle in my CSS Framework for Forms: ;)

tiso on Aug 6, 2008 01:02 PM

I use this method too, sometimes with left-aligned labels. Other method is use <li> for holding form lines.

Carl J on Aug 10, 2008 08:35 AM

Nice clean solution ... but I've seen this exact code somewhere else before ...

Anyways, the only (very minor) issue I have with this approach is the use of the br tags. Personally I would do something like wrapping each row with a div tag.

lebisol on Feb 13, 2009 02:49 PM

Nice work,
Don't forget that submit/reset buttons are also affected by your class ".formLayout input"


tom on Feb 17, 2009 03:30 AM

Put clear:left on the label and you can kick out those < br > tags too.

matt on Feb 28, 2009 11:56 AM

Very clean and simple. Thanks for sharing.

rahul on Mar 30, 2009 12:10 AM

Good !

sivagurunathans on Apr 28, 2009 09:08 PM

Nice work. Please share more with us.

zeeshan ktk on Dec 13, 2010 08:43 AM

please make a usefull profile to down load the css form easy

Atishay jain on Jan 5, 2011 01:59 AM

thanks for this i also want to know how can i built a form that also contains radio button and check boxes.

seo on Jan 5, 2011 02:31 AM

why did u add 3 classes in css. AS only the first one is working.

seo on Apr 3, 2011 12:45 PM

seo, try to use this exact piece of code, without the other 2 classes, and try to see the difference. It will be very easy!

Aajiz on May 11, 2011 12:31 PM

Its nice layout. I want for my ad listing domain any body help me regard this plz

StudyGuide on Sep 12, 2011 09:39 AM

Hmm Nice Layout ...Its very useful for me for my site... Thanks for sharing dude...

chrisa on Sep 22, 2011 02:06 PM

Thanks for sharing this - nice and clean layout and very useful.

Helen Neely on Sep 26, 2011 07:37 AM

This is one great form tutorial -simple and to the point. Great stuff.


sreedevi on Nov 16, 2011 12:04 AM

Thanks a lot

TBossAZ on Nov 16, 2011 10:37 AM

Excellent tutorial, it was very simple to understand and it worked perfectly for me. Thank you very much!

mitu on Jan 4, 2012 07:28 AM

this style sheet is not working in case of ASP.NET. I don't understand where is the problem? it shows as following -
<label><select>(this row shows properly)
but 2nd, 3rd & 4th row shows as below, this is the problem
5th row containd city name shows properly like 1st row.
please response.....

anand ranga on Feb 13, 2012 05:57 AM

nice job...

Steve Teale on Jun 10, 2012 11:49 AM

The CSS for br should be prefixed by .formLayout. I Used your code - fine for the form bits, but other parts of my page broke because you had made <br> unconditionally clear floats.

mohan on Jul 3, 2012 01:30 AM

coooool layout

sri on Jul 26, 2012 08:22 AM

how to add label to the right. pls expalin

dodz on Aug 4, 2012 06:02 PM

very simple but helpful to start creating entry form.
great job...!!!

idi on Aug 25, 2012 02:25 AM

nice and clean!

Roy Mercadian on Dec 6, 2012 12:34 PM

very useful. Thanks.

sravan on May 12, 2013 06:33 PM

it very nice

senthil on Jul 24, 2013 12:25 AM


Dave Schinkel on Dec 16, 2013 11:56 PM

Good stuff, clean, simple. Thanks for your contribution. Used it today, looks great.

sdf on Sep 1, 2015 11:04 PM


sankar on Jun 7, 2016 08:35 AM

Very nice explanation

sankar on Jun 7, 2016 08:42 AM

Short and sweet explanation.

<a href="http://wisentechnolo.....aspx"/>HTML CSS Training in Chennai</a>

chaitukits on Nov 24, 2016 11:01 PM

Hi there friends, good paragraph and nice arguments commented at this place, I am really enjoying by these.

AWS Online Training on May 4, 2017 12:12 PM

Nice explanation..Thank you for the post..
<a href="https://www.mindboxt....-Training.html" target="blank" rel="dofollow">AWS Online Training</a>
<a href="https://www.mindboxt....-Training.html" target="blank" rel="dofollow">SalesForce Online Training</a>

For more refer:

svrtechnologies on May 21, 2017 05:44 AM

very informative post....keep sharing. we are also sharing some of useful information to the online learning students. https://www.svrtechn....tnet-online-training

DW Designs on Jul 23, 2017 07:54 PM

This is a good looking html form, but i think it can be styled better (with a more modern design)


TechVelocityPartners on Mar 26, 2018 11:15 PM

Thanks for sharing..
<a rel="dofollow" href="">Risk management consulting services</a>
<a rel="dofollow" href="">ROI consultant minnesota</a>
<a rel="dofollow" href="http://techvelocityp....">consulting company minnesota</a>

How to Cancel HBO Now Subscription on Apr 17, 2018 12:27 AM

Thanks for sharing this post

one day picnic near ahmedabad on Apr 17, 2018 02:45 AM

very nice article and useful to everyone
places to visit near ahmedabad

zbigz premium account on Apr 17, 2018 04:15 AM

Bluetooth Devices Not Showing

the windows on Jun 1, 2018 09:04 AM

thanks a ton.

jeyanthi on Dec 24, 2018 11:50 PM

All are saying the same thing repeatedly, but in your blog I had a chance to get some useful and unique information, I love your writing style very much, I would like to suggest your blog in my dude circle, so keep on updates.

alex on Jan 3, 2019 11:38 AM

Online casino is the best solution to money issues <a href="">the best online casino with us</a> come in and win.

Leave a comment