Layout in forma di immissione dati in HTML: tabella o nessuna tabella?

Question

Voglio creare un modulo di immissione dati simile al seguente:

Name: [ Name textbox ] 
Age:  [ Age textbox ] 
label n: [ textbox n ] 

Dove le etichette sinistra-align, e le caselle di testo left-align. So che posso farlo in un elemento table, ma sono anche consapevole del fatto che "le tabelle dovrebbero essere solo per dati tabulari". Mentre sono in parte d'accordo/in disaccordo con tale affermazione - mi piacerebbe sapere se il mio layout desiderato potrebbe/dovrebbe essere considerato "dati tabulari" e quale layout alternativo sarebbe quello di produrre gli stessi risultati senza dozzine di linee di complicate browser CSS.

Al momento non realizzo molto lo sviluppo web (rigorosamente WinForms da qualche tempo quando faccio l'interfaccia utente), quindi apprezzo che ci possa essere una soluzione elegante. Forse coinvolgere una lista non ordinata con i punti elenco disattivati ​​e un po 'off label-> field y position offset, forse?

Answer 1

Gli elenchi non ordinati con elementi label dovrebbero essere la via da seguire. Il markup Vorrei usare dovrebbe essere simile:

<form id="person" method="post" action="process.php"> 
    <ul> 
     <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li> 
     <li><label for="age">Age: </label><input id="age" name="age" type="text" /></li> 
     <li><label for="n">N: </label><input id="n" name="n" type="text" /></li> 
    </ul> 
</form> 

E questo CSS, se per ottenere qualcosa di simile a volere che avete chiesto:

#person ul { 
    list-style: none; 
} 

#person li { 
    padding: 5px 10px; 
} 

#person li label { 
    float: left; 
    width: 50px; 
    margin-top: 3px; 
} 

#person li input[type="text"] { 
    border: 1px solid #999; 
    padding: 3px; 
    width: 180px; 
} 

See: http://jsfiddle.net/tZhUQ/1, che contiene alcune cose più interessanti che si possono provare.

Answer 2

Webcredible have an example, è sufficiente rimuovere lo text-align: right per ottenere ciò che si cerca di cercare.

Smashing Magazine e Design Shack hanno confrontato alcuni esempi.