Para asociar valores HTML con un encabezado que abarque varias filas, define un grupo de filas y usa scope="rowgroup". Para relaciones más complejas, asigna identificadores únicos a los encabezados y enuméralos en el atributo headers de cada celda de datos. Esta guía crea un ejemplo local en TextEdit en Mac.

La tarea consiste en crear una tabla HTML cuyos valores conserven su contexto cuando una etiqueta abarque varias filas. W3C documenta los encabezados agrupados en su tutorial sobre tablas irregulares y las asociaciones explícitas en su tutorial sobre encabezados multinivel.

¿Qué asociación necesita tu tabla?

Empieza por anotar las etiquetas necesarias para entender un valor. En el ejemplo sintético de abajo, el valor 40 representa el ancho, en milímetros, de la variante grande del conjunto Alfa. Por tanto, su contexto completo es Alfa, Grande y Ancho. Todas las dimensiones son datos de muestra ilustrativos.

Usa esta guía para decidir antes de editar:

Estructura de la tabla Asociación que debes usar Requisito estructural
Un encabezado etiqueta una fila normal scope="row" Coloca el encabezado en una celda th de esa fila
Un encabezado etiqueta una columna normal scope="col" Coloca el encabezado en una celda th de esa columna
Un encabezado etiqueta todo un grupo de filas del cuerpo scope="rowgroup" Incluye esas filas en su propio tbody
Un valor necesita varios encabezados o las relaciones cambian dentro de la tabla Identificadores únicos para los encabezados y una lista headers Identifica explícitamente todos los encabezados aplicables

Los valores de scope describen la relación; rowspan indica cuántas filas ocupa la celda. Un encabezado alto sigue necesitando la asociación adecuada. MDN documenta ambos atributos por separado en su referencia del elemento de encabezado de tabla.

Para un grupo regular, el patrón de W3C combina un encabezado que abarca varias filas con un tbody y un scope="rowgroup" independientes. Una tabla puede contener varios grupos de cuerpo. Mantén las filas de encabezado en thead; un encabezado que abarque filas en el pie pertenece a tfoot. W3C: Tablas con encabezados irregulares.

En tablas complejas, las asociaciones explícitas permiten indicar directamente todo el significado de un valor. W3C recomienda este método para patrones que incluyen encabezados de columna cambiantes y celdas asociadas con tres o más encabezados. El ejemplo completo usa listas explícitas junto con atributos scope estructurales para que cada valor numérico indique sus tres encabezados. W3C: Tablas con encabezados multinivel.

Crea el documento HTML en TextEdit

Usa un archivo local nuevo para este ejercicio. Si estás adaptando un documento existente, guarda primero una copia aparte para poder comparar los valores originales y su orden con los cambios.

  1. Abre TextEdit y selecciona File > New.
  2. Selecciona Format > Make Plain Text.
  3. Pega el documento completo de abajo, sin los marcadores de bloque de código Markdown.
  4. Selecciona File > Save y asígnale el nombre table-headers.html.
  5. Si aparece un mensaje sobre la extensión, selecciona Use .html.

Estos son los pasos que Apple documenta para crear un archivo HTML en TextEdit. El ejemplo no necesita paquetes, scripts ni recursos externos.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample tile dimensions</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #777; padding: 0.5rem; }
    caption { text-align: left; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Sample tile dimensions</h1>
  <table>
    <caption>Illustrative tile dimensions in millimetres</caption>
    <thead>
      <tr>
        <th scope="col">Set</th>
        <th scope="col">Variant</th>
        <th id="tiles-width" scope="col">Width</th>
        <th id="tiles-height" scope="col">Height</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="tiles-alpha" rowspan="2" scope="rowgroup">Alpha</th>
        <th id="tiles-alpha-small" scope="row">Small</th>
        <td headers="tiles-alpha tiles-alpha-small tiles-width">20</td>
        <td headers="tiles-alpha tiles-alpha-small tiles-height">30</td>
      </tr>
      <tr>
        <th id="tiles-alpha-large" scope="row">Large</th>
        <td headers="tiles-alpha tiles-alpha-large tiles-width">40</td>
        <td headers="tiles-alpha tiles-alpha-large tiles-height">60</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th id="tiles-beta" rowspan="2" scope="rowgroup">Beta</th>
        <th id="tiles-beta-small" scope="row">Small</th>
        <td headers="tiles-beta tiles-beta-small tiles-width">25</td>
        <td headers="tiles-beta tiles-beta-small tiles-height">35</td>
      </tr>
      <tr>
        <th id="tiles-beta-large" scope="row">Large</th>
        <td headers="tiles-beta tiles-beta-large tiles-width">45</td>
        <td headers="tiles-beta tiles-beta-large tiles-height">65</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Para previsualizar el resultado, abre el archivo guardado en Safari. Deberías ver cuatro columnas, y Alfa y Beta deberían ocupar dos filas del cuerpo cada uno. Deja el archivo abierto en TextEdit para las comprobaciones del código fuente que se indican a continuación.

Al volver a abrir el documento en TextEdit, selecciona File > Open, elige el archivo, haz clic en Show Options y selecciona Ignore rich text commands. También puedes activar Display HTML files as HTML code instead of formatted text en TextEdit > Settings y luego en Open and Save. Apple documenta estas opciones en sus instrucciones para editar HTML.

¿Cómo asocia el ejemplo cada valor con sus encabezados?

Lee el código fuente del valor 40 como un pequeño mapa de asociaciones. Su lista headers contiene tiles-alpha, tiles-alpha-large y tiles-width. Esos identificadores corresponden, respectivamente, a Alfa, Grande y Ancho. El valor de altura correspondiente, 60, conserva los dos primeros identificadores y sustituye el tercero por tiles-height.

Los identificadores son nombres elegidos por quien crea el documento, no palabras clave especiales de HTML. Cada elemento de la lista debe identificar un elemento th de la misma tabla. Separa los elementos con espacios y no repitas ninguno en una misma lista. Estos requisitos aparecen en los atributos comunes de las celdas de tabla del estándar HTML.

La lista expresa el contexto completo, en vez de esperar que el lector lo reconstruya a partir de otro encabezado. La técnica H43 de W3C explica cómo incluir los identificadores de encabezado aplicables en el atributo headers de cada celda de datos.

Observa que la segunda fila de Alfa empieza con Grande. No contiene una celda adicional para Alfa: la rowspan="2" de la primera fila ya ocupa esa posición. Añadir allí una celda vacía alteraría la cuadrícula. MDN explica que las celdas encajan en las posiciones disponibles que dejan las celdas que abarcan varias posiciones en sus notas de uso de las celdas de encabezado.

Aplica el mismo razonamiento para distinguir dos diseños que parecen similares. Una etiqueta lateral que abarque varias filas del cuerpo puede ser un encabezado de grupo de filas. Una etiqueta de columna que abarque dos filas en la parte superior puede seguir siendo un encabezado de columna con scope="col"; su altura física no convierte su relación en una de grupo de filas. MDN: Atributos de encabezado.

Comprueba las asociaciones antes de cambiar la tabla

Para este ejemplo, haz una auditoría con tres etiquetas. Elige un valor, identifica el conjunto, la variante y la dimensión que le corresponden, y compara esas etiquetas con los identificadores referenciados.

Valor Contexto previsto Valor esperado de headers
20 Alfa, Pequeña, Ancho tiles-alpha tiles-alpha-small tiles-width
60 Alfa, Grande, Altura tiles-alpha tiles-alpha-large tiles-height
25 Beta, Pequeña, Ancho tiles-beta tiles-beta-small tiles-width
65 Beta, Grande, Altura tiles-beta tiles-beta-large tiles-height

Repite la comprobación con cada celda numérica. Confirma que todos los identificadores referenciados existen, que cada referencia apunta al encabezado previsto y que ningún identificador está duplicado en otra parte del documento. Estas comprobaciones siguen el procedimiento de la técnica H43 de W3C. Una tabla ordenada visualmente es solo una parte de la comprobación; revisa también las asociaciones en el código fuente.

Al añadir una tercera variante de Alfa, inserta su fila dentro del tbody existente de Alfa, cambia el valor de span de Alfa a rowspan="3", asigna un identificador único a la nueva variante y añade la lista correspondiente de tres encabezados a cada nueva celda numérica. Conserva el orden y los valores de las filas originales al hacer ese cambio.

Al eliminar una variante, reduce span en consecuencia. Si eliminas la primera fila de un grupo, traslada el encabezado de grupo a la primera fila restante. Mantén la celda que abarca varias filas dentro de un solo grupo de filas: el modelo de tablas HTML no permite que una celda se extienda a través de varios grupos de filas. WHATWG: Modelo de tablas.

Si posteriormente una aplicación genera o reordena las filas, considera estos requisitos de actualización: mantén unido cada grupo, coloca su encabezado que abarca varias filas en la primera fila, conserva el número indicado por span y actualiza las referencias que hayan cambiado. En este ejemplo, mover Grande antes que Pequeña dentro de Alfa también requeriría trasladar el encabezado Alfa a esa nueva primera fila.

¿Qué ocurre si el editor no puede conservar estos atributos?

Que un editor permita combinar celdas no demuestra que conserve las asociaciones que se usan aquí. Antes de confiar en un documento editado o exportado, inspecciona su HTML para comprobar los límites de los grupos, los valores de scope, los identificadores y las listas de encabezados previstos. El flujo de trabajo para Mac descrito en este tutorial consiste en editar directamente el código fuente en TextEdit.

Si tu herramienta de creación no puede conservar la estructura requerida, considera usar una tabla independiente y más sencilla para cada conjunto, con columnas Variante, Ancho y Altura. W3C presenta la división de tablas complejas en tablas más pequeñas como una alternativa que puede facilitar tanto la lectura como la creación. Usa esa opción solo cuando sea aceptable cambiar la estructura original. W3C: Dividir tablas multinivel.

En el ejemplo completo, elige cualquier número y verifica que sus tres etiquetas referenciadas describan exactamente lo que mide. Después, repite esa comprobación cada vez que insertes, elimines o reordenes una fila. Así tendrás una forma concreta de conservar tanto el significado como la apariencia de la tabla.

Fuentes