Html Tableless form

Question

I have a section of an html page that I want to display in a table-like way. I keep hearing not to use <table> for layout. And I get the general reasoning.

1) mark up becomes bloated, so it takes longer to download,

2) a table is rendered all at once(so it might delay loading until all of it is read)

3) probably a myriad of other reasons.

I'm leaning toward the "don't use tables as the default layout method, but if it makes sense just do it"

So I would like to see how one would accomplish the following without a table.

<table>
  <tr>
    <td>First Name</td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td>Phone Number</td>
    <td><input type="text"/></td>
  </tr>
</table>

So the requirements are I want all of the inputs to line up vertically, which means the first "column" must stretch to the widest width of all the "rows"

I don't want to explicitly specify the width of any column

I've read quite a few pages that say just how evil a <table> for layout is which I agree with some points, but I think adding a bunch of divs to imitate a table is kind of stupid as well. By this I mean, having a series of divs with a class with a clear:left in it is harder to read.

Anyways, I really would love to "see the light".

UPDATE:

In response to the answers I think the best implementation for me would be this:

css (which basically requires me to only specify a class on topmost div):

div.table
{
    display:table
}

div.table div
{
    display:table-row
}

div.table div div
{
    padding:5px;
    display:table-cell;
}

and then have a markup like this:

<div class="table">
  <div>
    <div>First Name</div>
    <div><input type="text"/></div>
  </div>
  <div>
    <div>Last Name</div>
    <div><input type="text"/></div>
  </div>
  <div>
    <div>Phone Number</div>
    <div><input type="text"/></div>
  </div>
</div>

Answer 1

A List Apart has a nice article on the issue.

They use

• <ul></li>
• <Fieldset> and
• <label>

elements - semantically very correct, and even the source code looks nice.

Answer 2

The general rule is use a table only for tabular data, and you could reasonably say this is tabular data, so I don't think it's a problem. Even the Head First HTML/CSS book says so!

Answer 3

If you want the precise layout of a table, then use 'display: table' and its ilk. Toss in a fallback for older versions of IE and you have the best of both worlds.

Alternatively – this is what I'd do – you could use fixed-width labels and floats. An extra-wide label would simply wrap to the next line.