I can't figure out why the input boxes and the ":" aren't going left..I have changed all properties to left and looked over the padding and spacing but still nothing...any ideas? I have made a jsfiddle here: http://jsfiddle.n开发者_如何学编程et/C7u9P/

PS: Additional question if you can answer, why is tables a bad way to make forms? A lot of the forms I have seen are tables and even menus!

---

The colons are aligned to the left - at least, they are aligned to the left side of their cells (td). however, the first column is very wide, and they are on a column of their own (for some reason), which makes them seem as if they're aligned to the right.

Regarding building your forms with tables, here is some discussion about it: tables for forms

---

Why is tables for layout wrong?

What should be used in a table?

Well, tables should only be used for what you can call tabular data, which means data which is presentable in a table, for example: Several payment plans and their advantages over one another, or the minimum requirements for games in different systems.

What shouldn't be used in a table?

Practically, anything else. Especially page layout. why?

1. It causes unexpected results and cross-browser inconsistency.
2. It bloats the file size for nothing.
3. Google up "Why shouldn't I use table for layout?" to find thousands of articles on the subject.

I'm not saying tables for form layout is evil, but it still shouldn't be used where there is a much better (semantic) solution.

A Better Solution

In your case, I'd use a simple form, with <ul> and labels, as your form is a list of items: Example.

It's much more easily stylable and maintainable.