Decorating HTML forms in tables or div boxes

A friend is designing the layout for a PHP application. He is insisting on decorating HTML forms in div boxes instead of tables. He claims tables are “out”, and the only correct way is placing the form elements in div boxes.

This is resulting in lots of hours designing in CSS to make the forms show as wanted and position tuning. Often this goes wrong in different browsers. Some times a label has a checkbox, and this need it’s own styling to fit into the layout of div boxes to avoid corrupting the “system”, and this will in turn show different in different browsers.

I claim that if he’d decorated the form in a table, there would be no problem. After all, the form follows a table structure, why not use a table then?

If tables are always wrong, why do we have them? His way of thining could as well apply to word processors. Why using tables, when you can build your own table out of boxes?

Am I or him wrong?

A tableless form layout should give you more flexibility in design and positioning.

In the following example the label is always at the left hand side of the form element. In order to place the label above the form element, you would have to change the table itself:

<!-- Simple form with table layout -->
<form>
<table>
    <tr>
        <td><label for="name">Name</label></td>
        <td><input type="text" id="name" name="name"/></td>
    </tr>
    <tr>
        <td><label for="age">Age</label></td>
        <td><input type="text" id="age" name="age"/></td>
    </tr>
    <tr>
        <td><label for="hobby">Hobby</label></td>
        <td><input type="text" id="hobby" name="hobby"/></td>
    </tr>
</table>
</form>

In the following example you would only have to change some CSS to place a label above a form-element.

<!-- Simple form with tableless layout -->
<form>
    <div class="form-element">
        <label for="name">Name</label>
        <input type="text" id="name" name="name"/>
    </div>
    <div class="form-element">
        <label for="age">Age</label>
        <input type="text" id="age" name="age"/>
    </div>
    <div class="form-element">
        <label for="hobby">Hobby</label>
        <input type="text" id="hobby" name="hobby"/>
    </div>
</form>

More flexibility means, most of the time, better maintainability.

I use divs when building page layout. When presenting tabular data I use table nested in div.

What purpose does the div serve?

Using divs where they are not needed or where a more appropriate tag exists is just as wrong as using tables inappropriately.

In this case, you are wrong. Tables should only be used for Tabular data.

Using DIVs requires a lot of code to do simple things, and alignment, unlike with tables, gets very complicated. Yet using tables isn’t quite right, semantically.

What you should really answer questions like this with is how screen readers and their ilk handle them. Unfortunately I forget how they handle them, so I can’t tell you off my head :C

<fieldset> would be a more semantically correct wrapper inside a form than <div> would be.

As previously mentioned, not using a table does make the form layout more flexible as you can reformat it to put the labels above instead of next to their fields just by changing the CSS.

The SitePoint book “Fancy Form Design” demonstrates how to use CSS to properly style a semantically constructed form (which unless the form fields are tabular data would not be in a table).

As a designer who also theme my own design, saying this right/that wrong has never work for designer. and rules are there to be broken.

As for your question, it is depended on the design and sometime deadline you have. If its columns and rows come with 4 sides borders, and some individual block has difference height due to the amount of texts in there which might grow more in future, and font size has been set to percent. Also worry of the font size differences between browser and OS. I would go with table for sure. Let the rule say whatever it like, I’ll do whatever work.

If the design and stuffs doesn’t look like it need a table, I go with div all the way to the end. and most of the time it is div because of its flexibility.

look at your design image, and think about it first.

90% of the time I use list(s), not divs. In my opinion divs are sloppy and list are generally the better way to go. List usually provide a good balance between semantics and styling capabilities that divs lack. The only time tables should be used in a form is when creating an editable data-grid.


<form>
	<fieldset>
		<legend>Register</legend>
		<ul>
   			<li class="fullname">
        		<label for="fullname">Name</label>
        		<input type="text" id="fullname" name="fullname">
    		</li>
    		<li class="age">
        		<label for="age">Age</label>
        		<input type="text" id="age" name="age">
    		</li>
    		<li class="hobby">
        		<label for="hobby">Hobby</label>
        		<input type="text" id="hobby" name="hobby">
    		</li>
   	 	</ul>
   	 </fieldset>
</form>