Cosa markup HTML da utilizzare per la visualizzazione dei dati etichetta / valore?

Question

Voglio rendere un contenitore di profilo utente che contiene un elenco di etichette ei valori associati.

Ecco un estratto delle informazioni e il layout mi piacerebbe visualizzare:

Nome ....... MyName

Età ................... myAge

e-mail ................ MyEmail

So che ci sono tonnellate di esempi disponibili, ma il problema è che sembra che non esiste una soluzione comunemente accettata.

Finora ho visto il seguente utilizzo:

1. Tavolo con markup (e , ...)
2. Elenco non ordinato con
   markup (e
   • ,
     ...)
   • markup regolari con

     ,

     ...

   • Definizione List con

     ,

     e

   • ...

Qual è il più semanticamente corretto? Qual è il più facile da visualizzare (in un layout a 2 colonne)? Cosa mi consigliate di utilizzare e per quali ragioni?

(HTML / CSS frammenti di codice sono più che benvenuto)

Answer 1

Wow. Siamo davvero spaventato tutti fuori con i “layout di tabella sono il male! Utilizzare CSS!”Roba, non abbiamo noi?

Un tavolo - con <th> per le etichette e <td> per i valori - è perfettamente applicabile a questo tipo di contenuti, vi dà la resa che si desidera, ed è almeno altrettanto semanticamente corretto come un elenco di definizioni, forse di più. O sono preferibili a div-semantica liberi.

Answer 2

Credo che la più semanticamente corretto sarebbe <dl>, <dt> e <dd>, dal momento che ciò che si sta visualizzando in modo efficace sono Definizioni del nome, l'età e la posta elettronica.

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>foo@bar.com</dd>
</dl>

Tuttavia, ovviamente, il modo più semplice per visualizzare in una tabella sta utilizzando <table>, <th> e <td>. Si potrebbe incidere insieme un table-layout utilizzando gli elenchi di definizione utilizzando qualcosa di simile:

dt { float: left; clear: left; width: 6em; font-weight: bold; }
dd { float: left; }

Maggiori informazioni sul tag <dl> disponibili qui .

Answer 3

So che questo è stato risposto, ma penso che le liste di definizione possono essere perfettamente adeguato.
Sono d'accordo con il bobince che le tabelle sono sempre appropriati per i dati tabulati ...
Tuttavia ho usato questo in un certo numero di posti in cui ho preferito evitare di tavoli -. E non credo si tratta di un metodo non corretto

Gli elenchi di definizioni:

<dl>
  <dt>Label</dt>
  <dd>Value</dd>

  <dt>Label 2</dt>
  <dd>Value 2</dd>
</dl>

Con il CSS:

dl dt {
  float: left;
  width: 200px;
  text-align: right;
}

dt dd {
  margin-left: 215px;
}

Answer 4

Questa è una buona domanda ed è anche uno che è aperto a molto dibattito ragione fosse perché non c'è modo fisso di fare questo.

ci sono argomenti per molti di loro, ma a me personalmente, vorrei mantenere le cose semplici.

<div class="profile">
    <p>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </p>
    <p>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </p>
    <p>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </p>
</div>

o

<ul class="profile">
    <li>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </li>
    <li>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </li>
    <li>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </li>
</ul>

CSS sarebbe simile a questo:

.profile p {
    overflow: hidden;
}

.profile .label {
    vertical-align: top;
    float: left;
    width: 40%;
}

.profile .value{
    vertical-align: top;
    float: left;
    width: 60%;
}

la ragione per non fare riferimento qualsiasi nome specifico html nodo del CSS è che se in futuro ci sia un modo riconosciuto di fare questo è sufficiente modificare i nomi dei nodi nel codice HTML.