Welche HTML-Markups für die Anzeige Label / Wertdaten zu benutzen?

Question

Ich möchte ein Profil Benutzercontainer machen, die eine Liste von Etiketten und ihre zugehörigen Werte enthält.

Hier ist ein Auszug von Informationen und das Layout I angezeigt werden mag:

Vorname ....... MyName

Alter ................... myAge

E-Mail ................ myemail

Ich weiß, dass es jede Menge Beispiele zur Verfügung, aber das Problem ist, dass es scheint, dass es keine allgemein akzeptierte Lösung ist.

Bisher habe ich die folgende Nutzung gesehen:

1. Tabelle mit Markup (und ...)
2. unsortierte Liste mit
   Markup (und
   • ,
     ...)
   • Regelmäßige Markups

     ,

     ...

   • Definition Liste mit

     und

   • ...

Was ist die semantisch korrekt? Was ist der einfachste (in einem 2-Spalten-Layout) angezeigt werden? Was raten Sie mir zu verwenden, und aus welchen Gründen?

(HTML / CSS-Code-Snippets sind mehr als willkommen)

Answer 1

Wow. Wir haben wirklich alle Angst mit den „Table-Layouts aus ist böse! Verwenden Sie CSS!“Stuff, haben wir nicht?

Eine Tabelle - mit <th> für die Etiketten und <td> für die Werte - auf diese Art von Inhalt perfekt anwendbar ist, gibt Ihnen die Wiedergabe gewünscht wird, und zumindest als semantisch korrekt als Definitionsliste ist wohl mehr. Entweder sind vorzuziehen Semantik frei divs.

Answer 2

Ich denke, die meisten semantisch korrekt, da <dl>, <dt> und <dd> würde, was Sie zeigen, sind effektiv Definitionen von Vornamen, Alter und E-Mail.

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

Doch, natürlich, der einfachste Weg, es in einer Tabelle anzuzeigen verwendet <table>, <th> und <td>. Sie könnten einen Tabellenlayout mit Definitionslisten mit so etwas wie hacken zusammen:

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

Weitere Informationen über die <dl> Tag verfügbar hier .

Answer 3

Ich weiß, das beantwortet wurde, aber ich denke, Definitionslisten durchaus angebracht sein kann.
Ich stimme mit der bobince , dass Tabellen für Tabellendaten immer angemessen sind ...
Allerdings habe ich dies in einer Reihe von Orten eingesetzt, wo ich liebe Tabellen zu vermeiden -. Und ich glaube nicht, dass eine falsche Methode ist

Definition Listen:

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

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

Mit dem CSS:

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

dt dd {
  margin-left: 215px;
}

Answer 4

Dies ist eine gute Frage und ist auch eine, die zu viel Debatte offen ist becasue es keine feste Art und Weise ist, dies zu tun.

Es gibt Argumente für viele von ihnen, aber ich persönlich würde ich es einfach halten.

<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>

oder

<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 wie folgt aussehen würde;

.profile p {
    overflow: hidden;
}

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

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

der Grund für die keinen spezifischen HTML-Knotennamen in der CSS-Referenzierung ist, dass, wenn es in Zukunft ein anerkannte Weg, dies zu tun, müssen Sie nur Knotennamen in Ihrem HTML ändern.