Yet Another Divs vs Tables issue: Forms

Question

[Meta-note:] I was browsing the question page, getting really tired of \"DIVS vs Tables\" \"When to use tables vs DIVS\" \"Are Divs better than Tables\" \"Tables versus CSS\

Answer 1

People talk about tables getting their forms to display the way they want, that's true, ONLY if you want to display your forms in columns and are willing to lose semantic meaning. With the following HTML in place, it's possible to display this form in as many layouts as you might wish.

BTW - No to the <br />

<form>
 <fieldset>
  <legend>Personal Info</fieldset>
  <div>
   <label for="name">Name</label>
   <input id="name" name="name" />
  </div>
  <div>
   <label for="ssn">Social Security Number</label>
   <input id="ssn" name="ssn" />
  </div>
 </fieldset>
</form>

You can clear the <divs> or set them to overflow: hidden to ensure that the floats are cleared.

Options from the above html:

Name |==============|    SSN |==============|

Name |==============|
SSN |==============|

Name     |==============|
SSN      |==============|

    Name |==============|
     SSN |==============|

   Name: |==============|
    SSN: |==============|

Name:
|==============|
SSN:
|==============|

All of the above can be accomplished with just a few lines of css.

When it comes to radio, checkboxes, and submit buttons it gets a little more complicated, but clean semantic HTML CAN be displayed the way you want it using css.

Answer 2

The trick is when the form gets more complicated than your sample, you realize that tables enable a "flexible grid" that no other elements do.

e.g. what if the "input" is more complicated than a text box? e.g. a bunch of radio buttons, each with their own label:

Color: [____Red___][v]
 Hood: [*] 
 Size: (_) Small
       (_) Medium
       (_) Large
       (*) X-Large

If all you need are simple forms, CSS is great, but as soon as you need a grid, things get interesting...

If you really want to do this, I would check out The Man In Blue's Solution, it works pretty well and is very clean.

Answer 3

What I usually do is :

<form>
 <label for="param_1">Param 1</label>
 <input id="param_1" name="param_1"><br />
 <label for="param_2">Param 2</label>
 <input id="param_2" name="param_2"><br />
</form>

and in a CSS :

label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }

Of course, you'll have to define the width according to your actual data :-)

• First, give label and input display: block, so that it can be assigned a size and be lined up.
• They both get float: left because Explorer does things a bit differently
• Format the label nicely
• hack the br so that there's a clear: left somewhere, and I remember that putting it on the label didn't work on some browser.

Plus, with the br you get a nice formatting even if the browser does not support CSS :-)

Answer 4

I was thinking of something like:

<div style="text-align:right; float:left;">
    Name: <input /> <br />
    Social Security Number: <input /> <br />
</div>

which, if the right column is fixed-length, aligns OK with variable text length, but I wonder what are the disadvantages of this method?

Answer 5

Although the other suggestions are probably better for getting a flexible layout, the literal answer to the question is something like:

<form action="www.example.com">
    <div class="table">
        <div class="tbody">
          <div class="tr">
            <div class="td"> <label for="name">Name</label> </div>
            <div class="td"> <input id="name"> </div>
          </div>
          <div class="tr">
            <div class="td"> <label for="ssn">Social Security Number</label> </div>
            <div class="td"> <input id="ssn"> </div>
          </div>
        </div>
    </div>
</form>

with

    <style type="text/css">
        div.table { display:table; border-spacing:2px; }
        div.tbody { display:table-row-group; }
        div.tr { display:table-row; }
        div.td { display:table-cell; vertical-align: middle; padding:1px; }
    </style>

This works with the latest versions of Firefox, Chrome, Opera, and Safari. It also works with IE8 Beta 2 (standards mode). It doesn't work with IE7 or earlier, but "progressive enhancement" and all that.