I’ve want to know what is the best practice or approach in dealing with multiple and complex columns with a form inside.
here’s an example of the form I’m dealing with

How to properly write a HTML markup for this? If I wrap every form element with a ‘DIV’ for every column it would take a lot ‘DIVs’ and styles; and the width for every column that is not repeating.
So what I did is, I put all form element in the table. And I think that is not the standard way to do it.
If your in my shoes,
How would you deal with the columns with non-repeating width?
There is no standard for complex forms, but there are plenty of blog posts claiming to have figured out the perfect way to approach this problem. Most of them are well thought out, but ultimately you have to pick the one you’re most comfortable with. I have some suggestions though:
Check out the US postal service change of address form. It’s surprisingly well done
If you have lots of forms, using a grid system like 960.gs, blueprint.css, or YUI grids (shudder) is an easy way to implement a form. However grid systems are definitely considered bloat if that’s the only place you’ll use them.