Previously i have been using <table> tag in order to structure a form in such a way that we a nice formatted form so that each label and field is on line with eachother like the following:
Email: [############]
Password: [############]
However there's a semantic problem here, a form is not exactly table data. So where a table is graphically suiting, its not on a semantic level.
What would be the proper way to structure a form so it's also graphically pleasing as well as semantically correct in terms of data type?
This A List Apart article does exactly that.
It uses semantically correct tags, and CSS styling to build a table-less form with stable margins. In a nutshell, it uses label tags to display the text, and gives them fixed widths to make the form fields start at the same horizontal position.
For a solution with flexible dimensions, see Fluid input elements.