O html marcações a usar para exibir dados da etiqueta / valor?

Question

Eu quero tornar um recipiente de perfil de usuário que contém uma lista de rótulos e seus valores associados.

Aqui está um trecho de informação e layout eu gostaria de exibir:

Nome ....... MyName

Idade ................... MinhaIdade

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

Eu sei que há toneladas de exemplos disponíveis, mas o problema é que parece que não há nenhuma comumente solução aceita.

Até agora eu vi o seguinte uso:

1. Tabela com marcação (e , ...)
2. Lista não ordenada com
   marcação (e
   • ,
     ...)
   • marcações regulares com

     ,

     ...

   • Lista definição com

     ,

     e

   • ...?

O que é o mais semanticamente correto? O que é o mais fácil de exibir (em um layout de 2 colunas)? O que você me aconselha a usar e por que razões?

(trechos de código HTML / CSS são mais do que bem-vindas)

Answer 1

Wow. Nós realmente temos todos assustou com os “layouts de mesa são maus! Use CSS!” coisas, não temos?

Uma tabela - com <th> para os rótulos e <td> para os valores - é perfeitamente aplicável a este tipo de conteúdo, dá-lhe a prestação que você quer, e é pelo menos tão semanticamente correto como uma lista de definições, sem dúvida mais por isso. Ou são preferíveis a divs semântica-livres.

Answer 2

Eu acho que o mais semanticamente correto seria <dl>, <dt> e <dd>, uma vez que você está exibindo são efetivamente definições do primeiro nome, idade e 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>

No entanto, obviamente, a maneira mais fácil para exibi-lo em uma tabela está usando <table>, <th> e <td>. Você poderia cortar juntos uma mesa-layout usando listas de definição usando algo parecido com isto:

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

Mais informações sobre a tag <dl> disponíveis aqui .

Answer 3

Eu sei que este foi respondida, mas eu acho listas de definição pode ser perfeitamente apropriado.
Eu concordo com o bobince que as mesas são sempre apropriadas para os dados tabulados ...
No entanto eu usei isso em um número de lugares onde eu preferia evitar tabelas -. E eu não acho que é um método incorreto

Listas de definição:

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

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

Com o CSS:

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

dt dd {
  margin-left: 215px;
}

Answer 4

Esta é uma boa pergunta e é também aquele que está aberto a muito debate becasue não há nenhuma maneira fixa de fazer isso.

existem argumentos para muitos deles, mas me pessoalmente, gostaria de mantê-lo simples.

<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 seria algo parecido com isto;

.profile p {
    overflow: hidden;
}

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

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

a razão para não fazer referência a qualquer nome de nó específico html no CSS é que, se no futuro, há uma maneira reconhecida de fazer isso, você só tem que nomes de nó mudança em seu HTML.