How to style and align forms without tables?

Answer 1

Really depends on who you talk to. The purists say use CSS because the table element was not meant for layout. But for me, if it works, why change it? I do use CSS now for layout, but I still have plenty of legacy code I have not and will not change.

Answer 2

I had this problem too, but with the cocidil that I had a menu in the left (also with float:left in it).

So. My solution was: html

<div class="new">
   <form>
     <label class="newlabel">Name</label>
     <input type="text" name="myTextBox" id="myTextBox" />
   </form>
</div>

css

.new {
    display:block;
}
.newlabel {
    min-width: 200px;
    float: left;
}

I think, it would work in the form class too, but in reality I had more forms in the 'new' class.

Answer 3

There's no one-size-fits-all for this. The table example you used can be improved on, though:

<table>
  <tbody>
    <tr>
      <th scope="row"><label for="f_name">First name:</label></th>
      <td>
        <input type='text' id='f_name' name='f_name' />
        <?php form_error('f_name'); ?>
      </td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

Not too sure about the error part; I think it makes more sense putting it next to the input than having a separate column for it.

Answer 4

This might not get a lot of support but here's my two cents:

In some situations tables are easier for layout; such as three columns or forms (albeit there are some great suggestions here for doing a pure css form layout so don't ignore those either.)

Processes and methodologies can make good servants but are poor masters.
   - Mark Dowd, John McDonald & Justin Schuh 
     in "The Art of Software Security Assessment"

I believe that this quote very strongly applies to this situation. If your table layout is working for you, not causing accessibility issues and isn't broken - then don't fix it.

Phrases like: "you should", "must", "always" - make me scared, because one-size-doesn't-fit-all! Take zealots with a grain of salt.

Answer 5

There are tons of ways out there to do it without tables. Once you get the basic format down it's as easy to work with as tables are, it's just the initial playing around that can be a pain. So, just look to others that have already done the work of figuring it all out for you:

• http://www.alistapart.com/articles/prettyaccessibleforms
• http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

I also documented the method I've settled on last week (a snippet):

<form action="/signup" method="post">
<fieldset>
<legend>Basic Information</legend>
<ol>
<li><label for="name">Name <span class="error">*</span>
    </label><input type="text" id="name" name="name" size="30" /></li>
<li><label for="dob">Date of Birth <span class="error">*</span></label>
    <div class="inputWrapper">
    <input type="text" id="dob" name="dob" size="10" />
    <span class="note">YYYY-MM-DD</span></div></li>
<li><label for="gender">Gender <span class="error">*</span></label>
    <select id="gender" name="gender">
    <option value=""></option>
    <option value="female">Female</option>
    <option value="male">Male</option>
    </select></li>
</ol>
</fieldset>
</form>

And the CSS:

fieldset { 
    margin: 0 0 20px 0; } 

fieldset legend { 
    font-weight: bold; 
    font-size: 16px; 
    padding: 0 0 10px 0; 
    color: #214062; } 

fieldset label { 
    width: 170px; 
    float: left; 
    margin-right:10px; 
    vertical-align: top; } 

fieldset ol { 
    list-style:none; 
    margin: 0;
    padding: 0;} 

fieldset ol li { 
    float:left; 
    width:100%; 
    padding-bottom:7px; 
    padding-left: 0; 
    margin-left: 0; } 

fieldset ol li input, 
fieldset ol li select, 
fieldset ol li textarea { 
    margin-bottom: 5px; } 

form fieldset div.inputWrapper { 
    margin-left: 180px; } 

.note { 
    font-size: 0.9em; color: #666; }

.error{ 
    color: #d00; }

jsFiddle