making columns AND rows

[urfriend]

I am trying to make a form with 3 columns.
one column for the name of the field. One column for the actual field, and one column for a description of the column.

Here's an example, using tables.

<form ...>
<table>
<tr>
<td>
 Name
</td>
<td>
 <input blah>
</td>
<td>
 Type your name here.
</td>
</tr>
<tr>
<td>
 Birthdate
</td>
<td>
 <input blah>
</td>
<td>
 Enter your birthdate here.
</td>
</tr>
</table>
</form>

What is the correct way to do this, not using tables? I tried using 3 separate divs (left, middle, right).

<div style="float:left; width: 30%;">
Name:
</div>
<div style="float:left; width: 30%;">
<input ...>
</div>
<div style="float:left; width: 30%;">
 Enter your name.
</div>
<br style = "clear:both">
<div style="float:left; width: 30%;">
Birthdate
</div>
<div style="float:left; width: 30%;">
<input ...>
</div>
<div style="float:left; width: 30%;">
 Enter your birthdate.
</div>

This code actually works ok for me, but it just feels weird, not having something holding the rows together. I'm so accustomed to using tables, where you have a TR holding it together.

Is it better to wrap each row with a div, so that there's something solid holding the rows in line? I'm guessing it works either way, but I'm not too sure what's the best way.

[Dabrowski]

What is the correct way to do this, not using tables

Unfortunately, there is no right or wrong way. That would make it too easy!

I use this way:

LABEL {
float: left;
width: ...;
}

DIV.tag {
float: right;
width: ...;
}

<label> Name </label> <div class='tag'> Your name </div> <input ...>

[RJell]

My first thought would probably have been to use a wrapper div around each "row", but I found an interesting article on A List Apart some time ago entitled "Prettier Accessible Forms" by Nick Rigby that semantically considers a form to be a list of fields and therefore uses an ordered list as the container (styled to hide the numbers, of course), and encapsulates each row in an LI tag.

From there, you can use label and div tags to separate your columns (as previously mentioned).

[penders]

I'd certainly go along with the suggestions mentioned above.

Just a point about your original idea of grouping the forms content into 3 separate columns... label / control / description. I would tend to avoid this method for a couple of reasons...

1. It's not (very) semantic. Each column/group has little meaning on its own. The natural grouping is (label + control + description). These 3 elements are related to each other and if anything should be grouped together. As you suggest, in a row.

2. You want the elements to line up in a row, but if these elements are separated into different containers/columns then the possibility of these elements not lining up is increased dramatically. What if your styles were disabled or an alternate stylesheet was used - it is likely that your label / control / description will become completely separated from each other! I suppose this comes back to creating semantic markup. If its semantic / laid out in a logical manner then the page should be at least readable and navigable even without any styles applied.

I guess that's really just one point split in two - think semantic. :)

[Dabrowski]

Hmmm, the <li> idea is a good one, will also get around awkward float/wrapping if lines are different heights for some reason.

I'll try that next time I think, although actual markup will be almost the same as in a <table>, which kinda defeats the object. I find that sometimes with CSS, why stop using a <table> if you have to have 3 <div> tags nested?

(rhetorical, please don't answer I've had that conversaion too many times!)

[urfriend]

Penders, thank you for that explanation. At first, my gut feeling was that wrapping it in a div/row didn't feel right, because it would have created another nesting level. But your explanation about "thinking semantically" really made sense. I actually never really "got" the notion of "thinking semantically", until this example. Thanks for turning on the lightbulb in my head.