example - html tag dt dd dl

Combinando una tabla y una lista jerárquica en HTML

Question

Estoy trabajando para rediseñar un conjunto de herramientas heredado y estoy viendo cómo mostrar mejor cierta información, tanto de manera presentacional como semántica.

Los datos tienen una naturaleza jerárquica, pero tienen propiedades que deben ser fácilmente visibles para los usuarios. El diseño deseado es similar al siguiente.

Seq Item Name Min Max - Anything under here isn''t shown
1 Identifier 1 1 (Required)
2 Name 1 1
2.1 First Name 1 1
2.2 Middle Name - - (Optional but unlimted)
2.3 Last Name 1 1
3 Age - 1 (Optional)

En este momento, se trata de una tabla completa, y el ingreso para el número de secuencia ( Seq ) se logra al insertar celdas de tabla adicionales para hacer coincidir todo a la derecha.

El desafío que tengo es descubrir cómo mostrar esta información de manera efectiva.

En primer lugar es esta información tabular? Yo diría que no, ya que la jerarquía es importante, y las ''columnas'' son simplemente atributos del elemento en cada ''fila''.

Si no es tabular, ¿qué es y cómo se haría? Personalmente, diría que este es un conjunto de listas UL anidadas: el número de secuencia es opcional y no siempre es un número. Si se trata de un conjunto de listas, se sangran las sublistas correctamente, pero ¿cuál es la mejor manera de presentar los atributos cortos?

Si es una tabla, ¿cuál es la mejor manera de presentar la existencia semántica de la jerarquía en la tabla?

Answer 1

¿Por qué no ambos? Una cuadrícula de árbol es una buena manera de representar datos tabulares que también se ajustan a una jerarquía.

Este es uno de esos ejemplos .

Sin embargo, habiendo usado Extjs en dos proyectos muy grandes, mi recomendación personal es que te mantengas alejado si vas a producir una gran aplicación. Si bien puede estar bien para una cuadrícula única, personalmente me parece que está mal implementado y puede volverse más engorroso a medida que aumenta el tamaño del proyecto. Sin embargo, es muy rico en características, por lo que el panel de ejemplos puede darle algunas ideas más sobre las cuadrículas (tablas) que pueden serle de ayuda.

Tenga en cuenta que siempre debe preguntarse: "¿qué preguntas están tratando de responder mis usuarios?" Luego, pregúntese, "¿qué dispositivos gráficos le dan el camino más claro y sencillo para responder esa pregunta?"

Un libro que realmente me ayudó con estas preguntas fue el libro de diseño del tablero . Aunque es posible que no esté creando un panel de control, tiene muchas técnicas y teorías de UX que me lo han facilitado al seleccionar el elemento de UI adecuado (con respecto a los datos).

Espero que ayude...

Answer 2

Creo que deberías usar una mesa. Es cierto que la jerarquía es más importante, pero también se puede mostrar escribiendo manualmente la primera columna. Pero los atributos min, max y nombre del elemento no se podían mostrar tan fácilmente en una lista como en una tabla. Mi opinión: ¡use una tabla y proporcione la columna de secuencia manualmente!

Answer 3

Creo que hay dos formas sensatas de representar esto en HTML:

• usar una table y hacer explícita la relación / jerarquía con lenguaje natural
• usar elementos de sección (resp. encabezados si usa HTML 4.01)

table con una columna que explica la jerarquía

Si no hay una marca para definir esta relación, debe usar texto. Si la representación visual no es ambigua, puede ocultar visualmente este texto para que solo sea accesible para los usuarios del lector de pantalla / texto.

En su caso, podría agregar una columna que explique la relación de las filas que son "subelementos":

<table>
<tr>
<th>Seq</th>
<th>Relation</th> <!-- or some clever better label -->
<th>Item Name</th>
<th>Min</th>
<th>Max</th>
</tr>
<!-- … -->
<tr id="2">
<td>2</td>
<td></td> <!-- "parent", "root", "container", empty -- whatever makes sense for your case -->
<td>Name</td>
<td>1</td>
<td>1</td>
</tr>
<tr id="2.1">
<td>2.1</td>
<td>child of <a href="#2">Name</a></td>
<td>First Name</td>
<td>1</td>
<td>1</td>
</tr>
</table>

Cada fila podría obtener una id (con el valor de Seq o Nombre del elemento), de modo que esta fila puede vincularse {tenga en cuenta que los valores de id que comienzan con un dígito no están permitidos en HTML 4.01; podría usar algo como id="seq-2.1" allí}. Si un elemento es hijo de otro elemento, puede vincularlo a la fila del elemento principal.

De esta manera, queda claro para los humanos, y las máquinas aún ven que estas filas están conectadas, aunque la semántica específica de esta relación no es legible por la máquina. Puede utilizar un tipo de enlace (valor rel ) aquí si desea aclarar explícitamente el significado de la relación. En HTML 4.01, usted podría crear un valor usted mismo, en HTML5 tendría que registered primero.

seccionar elementos / encabezados

En lugar de utilizar una table , puede utilizar el esquema HTML. {El siguiente ejemplo utiliza elementos de sección de HTML5 . Si usa HTML 4.01, simplemente reemplace los elementos de sección por div (o ningún elemento) y use solo encabezados.}

Cada sección (introducida por un encabezado) representa un elemento. El esquema de los encabezados (resp. Anidado de los elementos de sección) representa la jerarquía de sus elementos.

Aquí hay un ejemplo para ver toda la estructura:

 <article>
<h1><!-- heading for the whole data --></h1>
<section class="item" id="1">
<h2>Identifier</h2>
</section>
<section class="item" id="2">
<h2>Name</h2>
<section class="item" id="2.1">
<h3>First Name</h3>
</section>
<section class="item" id="2.2">
<h3>Middle Name</h3>
</section>
<section class="item" id="2.3">
<h3>Last Name</h3>
</section>
</section>
<section class="item" id="3">
<h2>Age</h2>
</section>
</article>

Cada section podría contener un dl para las propiedades:

<section class="item" id="3">
<h2>Age</h2>
<dl>
<dt>Min</dt>
<dd>1</dd>
<dt>Max</dt>
<dd>1</dd>
</dl>
</section>

Dependiendo del significado real de su contenido, puede usar el elemento de code para los nombres de los elementos (por ejemplo, si describe elementos de un lenguaje de marcado, por ejemplo) y / o el elemento dfn , si el siguiente contenido es una definición de eso ít.

Answer 4

El desafío aquí es que la información que desea representar está en un aspecto tabular (es un conjunto de elementos que tienen atributos etiquetados de manera idéntica) y en otro jerárquico (los elementos tienen elementos primarios).

Desafortunadamente, no hay un mecanismo de agrupamiento anidado para filas de tablas en HTML: tbody puede usarse para agrupar filas, pero anidar es ilegal (excepto con una table intermedia dentro de un td , lo cual es bastante horrible).

Eso te deja con dos opciones:

1. Represente la información con listas anidadas de algún tipo y confíe en CSS para que el resultado se vea como una tabla.

2. Representa la información como una tabla y confía en los atributos de algún tipo para representar sus relaciones jerárquicas.

Aquí hay algunos ejemplos de cómo podría implementar esas opciones:

Usando listas anidadas (enfoque ingenuo):

<ul>
<li>
<dl>
<dt>Seq</dt> <dd>1</dd>
<dt>Item Name</dt> <dd>Identifier</dd>
<dt>Min</dt> <dd>1</dd>
<dt>Max</dt> <dd>1</dd>
</dl>
</li>
<li>
<dl>
<dt>Seq</dt> <dd>2</dd>
<dt>Item Name</dt> <dd>Name</dd>
<dt>Min</dt> <dd>1</dd>
<dt>Max</dt> <dd>1</dd>
</dl>
<ul>
<li>
<dl>
<dt>Seq</dt> <dd>2.1</dd>
<dt>Item Name</dt> <dd>First Name</dd>
<dt>Min</dt> <dd>1</dd>
<dt>Max</dt> <dd>1</dd>
</dl>
</li>
<li>
<dl>
<dt>Seq</dt> <dd>2.2</dd>
<dt>Item Name</dt> <dd>Middle Name</dd>
<dt>Min</dt> <dd>-</dd>
<dt>Max</dt> <dd>-</dd>
</dl>
</li>
<li>
<dl>
<dt>Seq</dt> <dd>2.3</dd>
<dt>Item Name</dt> <dd>Last Name</dd>
<dt>Min</dt> <dd>1</dd>
<dt>Max</dt> <dd>1</dd>
</dl>
</li>
</ul>
</li>
<li>
<dl>
<dt>Seq</dt> <dd>3</dd>
<dt>Item Name</dt> <dd>Age</dd>
<dt>Min</dt> <dd>-</dd>
<dt>Max</dt> <dd>1</dd>
</dl>
</li>
<ul>

Esto maneja el aspecto jerárquico de la información, pero terminas repitiéndote mucho y tendrás que saltar algunos aros en el CSS para mostrar el resultado de forma tabular. Es probable que se pueda hacer con un uso juicioso de :first-child , pero el resultado final es que has hecho un gran esfuerzo para marcar algo que deseas presentar como una tabla de una manera no tabular, y como resultado tú mismo más trabajo volviendo a ponerlo en forma.

También hace que la naturaleza genuinamente tabular de las relaciones entre los elementos sea implícita en lugar de explícita en el marcado; sin referirse a la salida renderizada, no está claro que estos elementos siempre tengan el mismo número y tipo de atributos.

Usando listas anidadas (enfoque "inteligente"):

<dl>
<dt>
<ul> <li>Seq</li> <li>Item Name</li> <li>Min</li> <li>Max</li> </ul>
</dt>
<dd>
<ul> <li>1</li> <li>Identifier</li> <li>1</li> <li>1</li> </ul>
</dd>
<dd>
<dl>
<dt>
<ul> <li>2</li> <li>Name</li> <li>1</li> <li>1</li> </ul>
</dt>
<dd>
<ul> <li>2.1</li> <li>First Name</li> <li>1</li> <li>1</li> </ul>
</dd>
<dd>
<ul> <li>2.2</li> <li>Middle Name</li> <li>-</li> <li>-</li> </ul>
</dd>
<dd>
<ul> <li>2.3</li> <li>Last Name</li> <li>1</li> <li>1</li> </ul>
</dd>
</dl>
</dd>
<dd>
<ul> <li>3</li> <li>Age</li> <li>-</li> <li>1</li> </ul>
</dd>
</dl>

Aquí, estamos usando listas de descripción para describir dos cosas:

1. La relación de encabezado / detalle entre, por ejemplo, "Nombre del elemento" e "Identificador", etc.

2. La relación padre / hijo entre, por ejemplo, la unidad "Nombre" y la unidad "Nombre".

Ciertamente es más compacto, pero desafortunadamente la relación específica entre cada encabezado y sus elementos de detalle está implícita en el mejor de los casos, y sin un estilo adicional para organizar visualmente la información de forma tabular, será aún menos evidente cuando se representa lo que realmente se representa.

Usando una table :

<table>
<thead>
<tr>
<th>Seq</th> <th>Item Name</th> <th>Min</th> <th>Max</th>
</tr>
</thead>
<tbody>
<tr id=100>
<td>1</th> <th>Identifier</th> <td>1</td> <td>1</td>
</tr>
<tr id=200>
<th>2</th> <th>Name</th> <td>1</td> <td>1</td>
</tr>
<tr id=210 data-parent=200 class=level-1>
<th>2.1</th> <th>First Name</th> <td>1</td> <td>1</td>
</tr>
<tr id=220 data-parent=200 class=level-1>
<th>2.2</th> <th>Middle Name</th> <td>-</td> <td>-</td>
</tr>
<tr id=230 data-parent=200 class=level-1>
<th>2.3</th> <th>Last Name</th> <td>1</td> <td>1</td>
</tr>
<tr id=300>
<th>3</th> <th>Age</th> <td>-</td> <td>1</td>
</tr>
</tbody>
</table>

Aquí, las relaciones padre / hijo están descritas explícitamente por el atributo de data-parent (al que se puede acceder a través de javascript si es necesario), y un atributo class=level-{n} proporciona un enlace que puede ser utilizado por el CSS:

.level-1 > th {
padding-left: 1em;
}

En última instancia, es una cuestión de preferencia y conveniencia personal, pero creo que el enfoque <table> es mejor simplemente porque satisface el "¿parece razonable sin CSS?" regla de oro mucho mejor que cualquiera de los enfoques de listas anidadas anteriores.

Answer 5

Lo presentaría utilizando una tabla y agregando atributos de datos personalizados a las etiquetas td :

<table id="myTable" class="table">
<tr>
<td data-indent="0">1</td>
<td data-indent="0">Test</td>
<td data-indent="0">Test 1</td>
</tr>
<tr>
<td data-indent="1">1.1</td>
<td data-indent="1">Another</td>
<td data-indent="0">Test 1.1</td>
</tr>
<tr>
<td data-indent="2">1.1.1</td>
<td data-indent="3">Another</td>
<td data-indent="0">Test 1.1.1</td>
</tr>
<tr>
<td data-indent="2">1.1.2</td>
<td data-indent="3">Another one</td>
<td data-indent="0">Another test 1.1.2</td>
</tr>
<tr>
<td data-indent="0">2</td>
<td data-indent="0">Test</td>
<td data-indent="0">Test 2</td>
</tr>
</table>

Luego, con la ayuda de jQuery, establezca el relleno de cada valor de celda en su tabla:

$("td")
.css("padding-left", function (index) {
return 10 * parseInt($(this).data("indent")) + "px";
});

jsFiddle trabajando en jsFiddle .

Answer 6

Mi sugerencia sería utilizar listas ordenadas anidadas para conservar su estructura jerárquica, y luego listas de descripción para representar las "columnas" de cada fila.

Por ejemplo, la lista de descripción para la primera fila podría verse algo como esto:

<dl>
<dt>Item Name</dt>
<dd>Identifier</dd>
<dt>Min</dt>
<dd>1</dd>
<dt>Max</dt>
<dd>1</dd>
<dt>Notes</dt>
<dd>(Required)</dd>
</dl>

Tendría que usar CSS para ocultar los términos de la descripción (ya que no quiere que aparezcan en cada fila) y para ajustar el diseño para que se parezca más a una tabla.

La desventaja de este formato es que va a duplicar los encabezados de las columnas en cada fila. Pero semánticamente creo que tiene más sentido, y también debería hacer que el contenido sea más significativo para un lector de pantalla.

Hice un primer intento en el CSS para esto para que puedas tener una idea de cómo podría funcionar. Probablemente no esté muy bien hecho, pero al menos le dará algo con lo que empezar.

CodePen Link

Answer 7

ACTUALIZACIÓN: Agregué el uso de los ID y el atributo "encabezados" para, de alguna manera, marcar semánticamente la jerarquía.

Eso es definitivamente datos tabulares (¡realmente debería presionar la definición de "lista" para justificar el uso de un UL o DL aquí!).

Creo que un buen enfoque sería usar tbodys diferentes para agrupar esas filas relacionadas (algo como esto se usa aquí http://www.w3.org/TR/2012/WD-html5-20120329/the-table-element.html#the-table-element ver "tabla que se usa para marcar un rompecabezas de Sudoku")

<table>
<thead>
<tr>
<th id="seq">Seq</th>
<th>Item Name</th>
<th>Min</th>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr>
<th id="s1" headers="seq">1</th>
<td>Identifier</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<th id="s2" headers="seq">2</th>
<td>Name</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="sub">
<th id="s2_1" headers="seq s2">2.1</th>
<td>First Name</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="sub">
<th id="s2_2" headers="seq s2">2.2</th>
<td>Middle Name</td>
<td>-</td>
<td>-</td>
</tr>
<tr class="sub">
<th id="s2_3" headers="seq s2">2.3</th>
<td>Last Name</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="sub sub">
<th id="s2_3_1" headers="seq s2 s2_3">2.3.1</th>
<td>Last Name</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="sub sub">
<th id="s2_3_2" headers="seq s2 s2_3">2.3.2</th>
<td>Last Name</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<th id="s3" headers="seq">3</th>
<td>Age</td>
<td>-</td>
<td>1</td>
</tr>
</tbody>
</table>

Entonces podrías usar algo como esto:

table { border-collapse: collapse; }
tbody { border-bottom:1px solid #000; }
tbody .sub td { padding-left: 10px; }

De hecho, creo que solo puedes usar tbody para agrupar filas y dejar solo las filas

<tr>
<td>1</td>
<td>Identifier</td>
<td>1</td>
<td>1</td>
</tr>
<tbody>
<tr>
<td>2</td>
<td>Name</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="sub">
<td>2.1</td>
<td>First Name</td>
<td>1</td>
<td>1</td>
</tr>
...
</tbody>
<tr>
<td>3</td>
<td>Age</td>
<td>-</td>
<td>1</td>
</tr>