CSS : Table with Labels and Text Boxes

Question

I am trying to break the table crutch...

I want to place 3 "labels", "First", "Middle" and "Last" over 3 text boxes so that the labels are above the corresponding text boxes and the labels and text boxes are vertically aligned. In other words, I need a 3 columns table where the first row has 3 labels and the 2nd row has 3 text boxes in them and everything is left justified and I want ALL the columns widths to be identical and fixed.

How do I do this with w/o tables using only CSS?

I know that margin-left will give me a consistent distance between the groups, but how do I "carriage return" to the next line w.o using a Paragraph or a break tag, since the distance involved is really a function of the font, I imagine, instead of being able to "carriage return down" a specified number of pixels.

I know that display: block will put things on a new line, but that creates a break before and after. I just want a break "after."

I hope I explained it well enough.

Thanks.

Additional Edit: I understand that perhaps I should not be avoid using tables for something that tables is good at, but if CSS had an attribute analagos to margin-left:10px but in a vertical direction AFTER performing a cariage return, the advantage of using CSS over tables is that I wouldn't have a million TR and TD tags in my markup.

Is there such a thing?

Answer 1

HTML:

<div class="row">
  <div class="column">
    <label>Left</label>
    <input name="left" />
  </div>
  <div class="column">
    <label>Left</label>
    <input name="left" />
  </div>
  <div class="column">
    <label>Left</label>
    <input name="left" />
  </div>
</div>

CSS:

.row .column{
  width: 200px;
  float:left;
}
.row .column input,
.row .column label{
  display:block;
}

You can now use CSS to style the textboxes and labels, so they look nice. Also notice how similar this example is to using tables, which goes to show that in some scenarios tables aren't evil, but the right way to go. If you want to align things in a grid, use tables.

Answer 2

What you do is create your form fields this way:

<div id="form">
  <div class="control">
    <div class="label">
      <label for="field1">Field 1</label>
    </div>
    <div class="field">
      <input type="text" name="field1" id="field1">
    </div>
  </div>
  ...
</div>

with:

#form { overflow: hidden; } // this is important!
#form div.control { float: left; width: 33%; }

Now if one of those labels is larger the controls won't line up but this would be an example of where "pure" CSS falls shorts of what tables can do easily and naturally, which begs the question: why are you giving up on tables?

Note: Another answer along the same lines has suggested not wrapping the label and input in a div. This is a reasonable approach but you lose some expressive power. For instance, some things in CSS are only possible on block level elements. For example, you could change the above with:

#form, div.control { overflow: hidden; width: 600px } // this is important!
#form div.control { float: left; width: 200px; }
#form div.control div { float: left; width: 100px; }

and get your labels on the left, which you can't do quite as well without the wrapping inner divs.

Answer 3

Turns out that if you want to make a table of labels over input fields, the table element is fine to use.... If the table element is the clearest html code, why not use it?