Marcación semántica para tablas HTML complejas o anidadas?

Question

Quiero saber la mejor manera de marcar datos tabulares en una página web cuando las filas de datos contienen datos complejos que no caben en una única fila de la tabla.

Aquí hay un ejemplo concreto. La primera línea tiene una lista de información adicional adjunta sobre brazos y piernas.

 
Shadrach M Banana  12 
    Arms Blue 2 
    Legs Yellow 3 
Meshgah M Apple  34 
Abednego M Persimmon 0 

¿Hay una buena manera de marcar esto aparte de usar una célula abarcó contiene una tabla anidada como este?

 
+-------+--+--------+-----+ 
|  | |  |  | 
+-------+--+--------+-----+ 
| +-------+------+-+  | 
| |  |  | |  | 
| +-------+------+-+  | 
| |  |  | |  | 
| +-------+------+-+  | 
+-------+--+--------+-----+ 
|  | |  |  | 
+-------+--+--------+-----+ 
|  | |  |  | 
+-------+--+--------+-----+ 

No estoy del todo contento con esto porque la mesa exterior tiene cuatro columnas, con títulos y significados específicos; pero la segunda fila abarca las cuatro columnas y contiene algo diferente. Realmente quiero que esta información forme parte de la primera línea de pedido (Shadrach), no como parte de la tabla de nivel superior. Pero HTML no parece permitirme hacer esto.

¿Hay una forma mejor y más semántica?

Answer 1

Una cosa que debe preguntarse a sí mismo cuando intenta hacer que su marca sea más semántica es para qué fin lo está haciendo. El marcado semántico tiene valor porque es más fácil de diseñar y aplicar diferentes hojas de estilo sin tener que personalizarlas para el marcado que está utilizando. Tiene valor porque ayuda a la accesibilidad, facilitando que los lectores de pantalla o los motores alternativos de renderización lo analicen de manera adecuada. Y a veces tiene valor porque el motor de búsqueda u otras herramientas automatizadas pueden extraer información de él.

A veces, sin embargo, se encuentra con un caso que HTML simplemente no puede manejar. Este parece ser uno de ellos. HTML no tiene ninguna forma de anidar datos jerárquicos en tablas con columnas que no coinciden con las otras columnas de la tabla. Entonces, debes hacer lo mejor con lo que tienes.En este punto, preocuparse por hacer que sea más semántico no te compra demasiado; estás haciendo algo bastante especial, por ejemplo, que otras hojas de estilo, lectores de pantalla y herramientas probablemente no sepan qué hacer, por lo que prácticamente cualquier solución que se te ocurra no es completamente contraria al propósito de los elementos en cuestion esta bien

Creo que la solución que usted menciona es de lo mejor que puede hacer. Marque las filas que contienen tablas anidadas con una clase que indique que no son como las otras filas y llámelas buenas. Si quisieras, podrías agruparlas con las filas que están unidos a la utilización de múltiples elementos: <tbody>

<table> 
<tbody> 
    <tr><td>Shadrach <td>M <td>Banana  <td>12 
    <tr class=nested><td colspan=4> 
    <table>...</table> 
<tbody> 
    <tr><td>Meshgah <td>M <td>Apple  <td>34 
<tbody> 
    <tr><td>Abednego <td>M <td>Persimmon <td>0 
</table> 

Answer 2

A menos que tenga una semántica explícita para su información, no hay una sola forma de hacerlo. Parece que tiene una estructura similar a un árbol dentro de las filas y algunas DIV anidadas pueden ser útiles. Por lo tanto, es posible tener un hijo DIV de una celda de fila, aunque será complejo trabajar con él. Alternativamente, podría tratar de crear tablas anidadas (TABLE como el contenido o una celda).

Si desea conservar la semántica compleja, HTML no es la mejor manera de hacerlo y tal vez debería usar una representación XML o RDF. Ambos pueden transformarse a HTML para mostrarlos mientras conservan la semántica.

Answer 3

Si coloca la tabla en la primera columna de la fila de detalles, la hace abarcar las cuatro columnas y agrega encabezados de tabla descriptivos a la tabla, debe proporcionar una semántica básica para relacionar la tabla de detalles con la columna describe.

creo que este es un caso sin embargo, donde la semántica HTML tradicionales no pueden transmitir lo que está buscando, y usted debe pensar en hacer uso de XHTML y extendiéndolo con ARIA attributes trazado por el W3C WAI para aumentar la semántica XHTML existentes a describe estructuras complejas como la que está tratando de crear. Tal vez si se ha añadido un atributo aria-describedby a la celda de la tabla detalle describe, que proporcionaría la semántica adicional que usted está buscando:

<table> 
    <thead> 
     <tr> 
      <th>column 1</th> 
      <th>column 2</th> 
      <th>column 3</th> 
      <th>column 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td id="master" aria-describedby="detail">Shadrach</td> 
      <td>M</td> 
      <td>Banana</td>  
      <td>12</td> 
     </tr> 
     <tr> 
      <td colspan="4"> 
      <table id="detail"> 
       <tbody> 
        <tr> 
         <td>arms</td> 
         <td>blue</td> 
         <td>2</td> 
        </tr> 
        <tr> 
         <td>legs</td> 
         <td>yellow</td> 
         <td>3</td> 
        </tr> 
       </tbody> 
      </table> 
      </td> 
     </tr> 
    </tbody 
</table> 

Hay una multitud de aria-roles y atributos que pueden ser de utilidad, por ejemplo, , treegrid rol para tablas con diseños jerárquicos y filas desplegables. Eche un vistazo a través del borrador de trabajo de ARIA y estoy seguro de que encontrará algo que pueda describir lo que está tratando de transmitir.

Answer 4

¿hay una forma mejor y más semántica?

Sí - no coloque una tabla anidada allí. Los brazos/piernas deben ser más columnas en la mesa original, o una mesa separada por completo. A continuación, utilice CSS para el estilo según corresponda .

No, no sé cómo podría obtener el mismo efecto visual con HTML semántico y CSS. Pero ese no es el punto. Está buscando un marcado semántico, no cómo ajustarlo a lo que cree que es adecuado para UX (sugerencia: si está usando tablas para el diseño (como lo es usted), entonces solo es UX apropiado para usuarios visuales).

Answer 5

El WAI's tables tutorial proporciona una introducción muy simple de tratar con tablas complejas. El ejemplo de la publicación original podría ilustrar un tipo de multi-level table.