How can I do this in CSS without using a table?

Normally, this would be incredibly easy with tables, but everyone says tables are bad now days. Most of my web forms will be something like this:

[label] [textbox]

[label] [textbox]

[label] [combobox] [textbox]

I just want everything to line up neatly.

*Edit: To clarify, I'm not using tables for the layout of my webforms. That is done using CSS. However, from some c开发者_Python百科omments, it seems that tables are okay for lining up my controls. I think that may be the best solution...

I've only tested in FF6 and Chrome, but here's one way to do it.

http://jsfiddle.net/e7T3g/3/

Note that the first one is your image. Yes, this is not 100% perfect and will need to be tested and tweaked, but just wanted to show you that creating this layout with CSS is not a dream.

(One reason) Why this is better than using tables:

If you look at the markup, there's nothing that suggests layout at all, everything is semantic and uses classes. If one day you want to completely change how the layout looks, it's all in your CSS file. Using tables, you'll have to wade through tons of tedious <tr>s and <td>s in your HTML file and your CSS file to make a change. Likewise, if you want to make one small change, you aren't restricted by the table markup, which is very hard to work with.

The quick 'n dirty:

<form>
    <div class="address">
        <label>Address</label><input>
    </div>
    <div class="city">
        <label>City</label><input>
    </div>
    <div class="state">
        <label>State</label>
        <select>
            <option></option>
            <option>___</option>
            <option>___</option>
        </select>
    </div>
    <div class="zip">
        <label>Zip</label>
        <input>
    </div>
    <div class="archive">
        <label>Archive Location</label>
        <input type="checkbox">
    </div>
</form>

input {
    padding:3px;   
}
label:after {
    content:":";   
}
form {
    background:#888;
    padding:15px 25px 10px 15px;
    width:470px;
    float:left;
    font:900 13px serif;
}
.archive,
.address {
    float:left;
    width:100%;  
    margin-bottom:3px;
}

.archive label,
.city label,
.address label {
    width:100px;
    text-align:right;
    float:left;
}
.address input {
    width:360px;
}
.zip input {
    width:70px;   
}
.address,
.zip {
    float:right;   
}
.city,
.state {
    float:left;  
    margin-right:8px;
}
.archive {
    margin-top:5px;   
}

There's a million ways to do this layout, (and it's not a complete HTML fragment yet, we're missing some required attributes) and I'm sure I could come up with an better version, but I'll leave that as an exercise to you as you continue to learn CSS.

Check out this tutorial:

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

You could use tables for forms but I prefer to use CSS because it is more maintainable and performant. Strictly speaking, tables should be used only for "tabular data" and this does not exactly describe form fields...

Using the power of ems, p tags, and modular CSS:

HTML:

<form action="post" class="dummyForm" method="./" onsubmit="return false;">
    <fieldset class="formContainer">
        <legend class="formDescription">Form styling made easy!</legend>
        <p class="formElementWrapper">
            <label class="leftLabel formLabel" for="address">Address:&nbsp;</label>
            <input class="formElement orphanElement" id="address" name="address" type="text">
        </p>
        <p class="formElementWrapper">
            <label class="leftLabel formLabel" for="city">City:&nbsp;</label>
            <input class="cityInput formElement" id="city" name="city" type="text">
            <label class="formLabel" for="state">State:&nbsp;</label>
            <select class="formElement stateSelect" id="state" name="state">
                <option value="HI">HI</option>
            </select>
            <label class="formLabel" for="zip">Zip:&nbsp;</label>
            <input class="zipInput formElement" id="zip" name="zip "type="text">
        </p>
        <p class="formElementWrapper">
            <label class="leftLabel formLabel" for="archive">Archive Location:&nbsp;</label>
            <input class="formElement" id="archive" name="archive" type="checkbox">
        </p>
    </fieldset>
</form>

CSS:

form.dummyForm
{
    width: 40em;
    background-color: #999999;
    font-family: Times New Roman, serif;
    font-size: .8em;
    font-weight: bold;
}
legend.formDescription, fieldset.formContainer, form.dummyForm
{
    border: none;
}
label.formLabel
{
    width: auto;
    padding-top: .1em;
    float: left;
    clear: right;
}
label.leftLabel
{
    width: 9em;
    text-align: right;
}
input.formElement, select.formElement, textarea.formElement
{
    margin-right: .5em;
    float: left;
    clear: right;
    display: inline;
}
input.cityInput
{
    width: 9em;
}
select.stateSelect
{
    width: 4em;
}
input.zipInput
{
    width: 5em;
}
input.orphanElement, select.orphanElement, textarea.orphanElement
{
    width: 25em;
    float: left;
    clear: right;
}
p.formElementWrapper
{
    padding: .5em;
}

Demo: http://www.fortybelow.ca/hosted/misc/ieforms/

As a bonus, here's the form in various builds of IE:

IE 6:

IE:Mac (an infamously terrible and dated browser):

Per your EDIT, no, tables still are not for layout just because it's a form. Your inputs are still not tabular data. You can wrap the whole thing in a div and style each input element as needed. See the Smashing link in the other answer for some examples.