The best markup(HTML) for web forms

While HTML-izing forms web developers/designers usually prefer to go with 'table' structure and if the client insists for 'div' structure we have no another option than creating a 'sea of div' tags with float:left and float:right attributes.

Recently I spend some time looking for a better way of HTML-izing form and it was a relief for me to come up with the markup and css below -


<style type="text/css">

.signup ul{
padding: 20px;
margin: 6px 0 0 0;
}
.signup ul li{
padding: 4px 0;
}
.signup ul li label{
display: inline-block;
text-align: right;
}
.signup ul li input{
width: 204px;
}
.signupCont ul li img{
vertical-align: middle;
}

</style>


<div class="signup">

<ul>
<li>
<label>Full Name:</label>
<input type="text" tabindex="1" id="Text1" />
</li>
<li>
<label>Last Name:</label>
<input type="text" tabindex="2" id="Text2" />
</li>
</ul>

</div>