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

Question

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 comments, it seems that tables are okay for lining up my controls. I think that may be the best solution...

Answer 1

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.

Answer 2

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...