Layout out data-entry form in HTML: table or no table? -


I want to create data entry form like the following:

  name: [name textbox] Age: [Age textbox] Label n: [textbox n]  

The label has been skipped, and the text box left-aligned. I know that I can do this in such a table element, but I also know that "tables should be only for accurate data" While I disagree / disagree with that statement - I want to know whether my desired layout "tabular data" can be considered, and no complicated cross-browser CSS.

I do not do web development much at this time (strictly for some time when WinForms works UI), I appreciate that a great solution might be the closure of the bullet points Including an unordered list with and labeling-> field y position offsetting potentially? The unseen list with

label elements should be the way to go here. The markup I use should look something like this:

  & lt; Form id = "person" method = "post" action = "process.php" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; Label = "name" & gt; Name: & lt; / Labels & gt; & Lt; Input id = "name" name = "name" type = "text" /> gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; For label = "age" & gt; Age: & lt; / Labels & gt; & Lt; Input id = "age" name = "age" type = "text" /> gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; For label = "n" & gt; N: & lt; / Labels & gt; & Lt; Input id = "n" name = "n" type = "article" /> & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Form & gt;  

And if you want this CSS to get something similar:

  #person ul {list-style: none; } # Members li {padding: 5px 10px; } # Members Le Label {Float: Left; Width: 50px; Margin-top: 3px; } # Person li input [type = "text"] {boundary: 1 px solid # 999; Padding: 3px; Width: 180px; }  

See:, in which there are some interesting things that you can try.


Comments