Usando CSS, ¿cuál es la mejor manera de mostrar los pares de valores de nombre?

Question

¿Debería seguir usando tablas de todos modos?

código de la tabla estaría reemplazando es:

<table> 
    <tr> 
     <td>Name</td><td>Value</td> 
    </tr> 
    ... 
</table> 

Por lo que he estado leyendo que debería tener algo como

<label class="name">Name</label><label class="value">Value</value><br /> 
... 

Las ideas y los enlaces a las muestras en línea muy apreciados. Soy un desarrollador de mi profundidad de diseño.

EDITAR: Mi necesidad es poder mostrar los datos a un usuario y editar los valores en una forma separada (pero casi idéntica).

Answer 1

Creo que las listas de definición son semánticamente muy cercanas a los pares nombre/valor.

<dl> 
    <dt>Name</dt> 
    <dd>Value</dd> 
</dl> 

Definition lists - misused or misunderstood?

Answer 2

Creo que las tablas se utilizan mejor para los datos tabulares, que parece que tiene allí.

Si no desea utilizar tablas, lo mejor sería usar listas de definiciones (<dl> and <dt>). A continuación, se indica cómo diseñarlos para que se vean como el diseño anterior de <td>. http://maxdesign.com.au/articles/definition/

Answer 3

utilizar el flotador: por ejemplo, la propiedad: css:

.left { 
    float:left; 
    padding-right:20px 
} 

html:

<div class="left"> 
Name<br/> 
AnotherName 
</div> 
<div> 
Value<br /> 
AnotherValue 
</div> 

Answer 4

Es perfectamente razonable utilizar tablas para lo que parece ser tabular datos.

Answer 5

Si estoy escribiendo una forma que suelen utilizar esto:

<form ... class="editing"> 
    <div class="field"> 
     <label>Label</label> 
     <span class="edit"><input type="text" value="Value" ... /></span> 
     <span class="view">Value</span> 
    </div> 
    ... 
</form> 

Luego, en mi css:

.editing .view, .viewing .edit { display: none } 
.editing .edit, .editing .view { display: inline } 

Luego, con un poco de JavaScript que puede cambiar la clase de la forma de la edición para ver.

Menciono este enfoque ya que quería mostrar y editar los datos con casi el mismo diseño y esta es una forma de hacerlo.

Answer 6

Me gusta macbirdie Me inclino a marcar datos como esto como una lista de definiciones a menos que el contenido de la tabla existente pueda juzgarse como realmente ser contenido tabular.

Evitaría usar la etiqueta de la manera que usted propone. Eche un vistazo a la explicación de la etiqueta @http://www.w3schools.com/tags/tag_label.asp - en realidad tiene la intención de permitirle concentrarse en el control asociado. También evite usar divs y tramos genéricos ya que desde un punto de vista semántico son débiles.

Si muestra varios pares de nombre-valor en una pantalla, pero solo edita uno en una pantalla de edición, usaría una tabla en la pantalla anterior y una lista de definiciones en la última.

Answer 7

listas de definiciones horizontales funcionan bastante bien, es decir

<dl class="dl-horizontal"> 
     <dt>ID</dt> 
     <dd>25</dd> 

     <dt>Username</dt> 
     <dd>Bob</dd> 
    </dl> 

La clase dl-horizontal es proporcionada por el marco Bootstrap CSS.