O html marcações a usar para exibir dados da etiqueta / valor?
-
18-09-2019 - |
Pergunta
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:
- Tabela com marcação (e
, ...) - 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)
Solução
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.Outras dicas
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 .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 incorretoListas 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; }
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.
Licenciado em: CC-BY-SA com atribuiçãoNão afiliado a StackOverflow - marcações regulares com
- Lista não ordenada com