Que html à utiliser pour marges bénéficiaires d'afficher des données étiquette / valeur?

Question

Je veux rendre un conteneur utilisateur de profil qui contient une liste d'étiquettes et leurs valeurs associées.

Voici un extrait de l'information et la mise en page Je voudrais afficher:

Prénom ....... MonNom

Âge ................... myAge

email ................ MyEmail

Je sais qu'il ya des tonnes d'exemples disponibles mais le problème est qu'il semble qu'il n'y ait pas de solution communément acceptée.

Jusqu'à présent, j'ai vu l'utilisation suivante:

1. Tableau avec des balises (et ...)
2. Liste non ordonnée avec des balises
   (et
   • ...)
   • réguliers avec marges bénéficiaires

     ,

     ...

   • Liste de définition avec

     ,

     et

   • ...

Quel est le plus sémantiquement correct? Quel est le plus facile à afficher (dans une mise en page 2 colonnes)? Que me conseillez-vous d'utiliser et pour quelles raisons?

(le code html / css extraits sont les bienvenues)

Answer 1

Wow. Nous avons vraiment peur tout le monde au large avec les « mises en page de table sont mal! Utilisez des trucs CSS! », Non?

Une table - avec <th> pour les étiquettes et <td> pour les valeurs - est parfaitement applicable à ce type de contenu, vous donne la conversion que vous voulez, et est au moins aussi sémantiquement correct comme une liste de définitions, sans doute plus. Soit sont préférables à des divs libres sémantique.

Answer 2

Je pense que le plus sémantiquement correct serait <dl>, <dt> et <dd>, puisque ce que vous affichez sont effectivement Définitions du prénom, l'âge et 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>

Cependant, de toute évidence, la meilleure façon de l'afficher dans une table utilise <table>, <th> et <td>. Vous pouvez pirater ensemble une table de mise en page à l'aide des listes de définition en utilisant quelque chose comme ceci:

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

Plus d'infos sur l'étiquette <dl> disponible .

Answer 3

Je sais que cela a été répondu mais je pense que les listes de définition peuvent être tout à fait approprié.
Je suis d'accord avec le bobince que les tables sont toujours appropriées pour les données sous forme de tableaux ...
Cependant, je l'ai utilisé dans un certain nombre d'endroits où je préférais éviter les tableaux -. Et je ne pense pas que ce soit une méthode incorrecte

Les listes de définitions:

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

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

Avec le CSS:

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

dt dd {
  margin-left: 215px;
}

Answer 4

Ceci est une bonne question et est aussi celui qui est ouvert à beaucoup de débats becasue il n'y a aucun moyen fixe de le faire.

il y a des arguments pour beaucoup d'entre eux, mais moi personnellement, je garderais simple.

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

ou

<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 ressemblerait à quelque chose comme ceci:

.profile p {
    overflow: hidden;
}

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

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

la raison de ne pas référencer un nom de nœud HTML spécifique dans le CSS est que si dans l'avenir il y a un moyen reconnu de faire cela il suffit de changer les noms des noeuds dans votre code HTML.