Standards for laying out and designing forms (HTML/CSS)

I must say, the most common way to do this would be to use tables. Unfortunately, there are problems with table based form layouts (big surprise). One big thing is that tables will bleed over their containers (if overflow is not hidden) and they don't squash their contents like CSS can do. On top of that, rendering tables is more expensive (takes up more CPU cycles). Overall, I think that, compared to pure CSS solutions, table based form layouts are rigid and inflexible, and as a designer, I cringe (and you should, too!) at using tables for layout purposes to begin with.

A method that I am beginning to like (and that is growing more popular) is a pure, CSS2 method for laying out forms. I will not credit myself for coming up with the idea, but it is really straight forward. All you have to do is this:

THE HTML:

<form action="process.php" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" />
    <br />
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" />
</form>

THE CSS:

label, input {
    width:200px;
    display:block;
    float:left;        
    margin-bottom:10px;
}
label {
    width:125px;
    text-align:right;
    padding-right:10px;
    margin-top:2px;
}
br {
    clear:left;
}

As you can see, the CSS code is really minimal and the results are really awesome. The pros of this method is that it uses less code (faster to download), it is cleaner without all the messy table tags littering your HTML document (maintainability), and I believe web browsers will render the CSS method faster.

Update 1: I also found a CSS method using unordered lists.

Update