Tablas e integración

Tres horas. Media hora para entender qué relación declara una tabla y cómo se comprueba su cuadrícula, y dos horas y media construyendo tablas accesibles y convirtiendo una especificación desconocida en una página completa.

Se explica

25 minutos · conceptos y demostración

Una tabla es el primer elemento de la unidad cuyo marcado se puede verificar con una suma, y también el último en el que conviene caer por defecto: buena parte de la sesión consiste en decidir cuándo no hace falta.

Las tablas sirven para datos tabulares

No sirven para diseñar una página. Durante años se maquetaron webs enteras con tablas porque era la única forma de colocar cosas en columnas; eso terminó hace mucho, pero la costumbre dejó rastro.

Esta tabla funciona, y sin embargo le falta casi todo:

<table>
    <tr>
        <th>Producto</th>
        <th>Precio</th>
    </tr>
    <tr>
        <td>Portátil Nova</td>
        <td>899 €</td>
    </tr>
</table>

El problema que resuelve una tabla bien marcada

Cuando tú miras una tabla, lees una celda y subes con la vista hasta el encabezado de su columna para saber qué significa ese número. Es tan automático que no lo notas.

Quien no percibe la tabla visualmente no puede hacer eso. Recorre las celdas una a una y, sin información adicional, escucha «899» y nada más. Necesita que el documento diga a qué encabezado pertenece cada celda.

<table>

    <caption>Comparativa de productos</caption>

    <thead>
        <tr>
            <th scope="col">Producto</th>
            <th scope="col">Pantalla</th>
            <th scope="col">Precio</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Nova 14</th>
            <td>14 pulgadas</td>
            <td>899 €</td>
        </tr>
        <tr>
            <th scope="row">Nova 16</th>
            <td>16 pulgadas</td>
            <td>1.099 €</td>
        </tr>
    </tbody>

</table>

Comparativa de productos

Producto	Pantalla	Precio
Nova 14	14 pulgadas	899 €
Nova 16	16 pulgadas	1.099 €

El color facilita distinguir los encabezados, pero la asociación accesible la crean th y scope, no el aspecto.

scope

scope

El atributo que dice en qué dirección manda un encabezado.

<th scope="col">   <!-- encabeza su columna -->
<th scope="row">   <!-- encabeza su fila -->

Con scope, esa celda deja de escucharse como «899» y pasa a escucharse como «Nova 14, precio, 899 euros».

Fíjate en la primera columna del tbody del ejemplo: «Nova 14» y «Nova 16» son th, no td. No son datos, son los nombres que identifican cada fila. Es el error más frecuente al empezar, y el que deja las tablas mudas.

Una tabla es una cuadrícula, aunque no lo parezca

colspan y rowspan no «juntan» celdas: hacen que una celda ocupe el sitio de varias. La cuadrícula sigue existiendo debajo, con el mismo número de columnas en todas las filas.

<tr>
    <th scope="row">11:00</th>
    <td colspan="5">Recreo</td>
</tr>

Esa fila parece tener dos celdas, pero ocupa seis columnas. Si la tabla tiene seis, es correcta. Si tiene siete, acabas de dejar un hueco, y el navegador dibujará algo raro sin decirte nada.

Una celda combinada aislada se entiende bien. Una tabla con combinaciones en varias direcciones a la vez se vuelve difícil de recorrer para quien la escucha, porque deja de estar claro qué encabezado gobierna cada celda. Si tu tabla necesita ese nivel de combinación, casi siempre lo correcto es partirla en dos tablas más simples, cada una con su caption. Profesionalmente, rowspan y colspan tienen bastante menos recorrido del que parece: conviene conocerlos y no abusar.

La decisión viene antes que la etiqueta

Hoy la tabla vuelve a ser solo una opción entre muchas. Antes de escribir cada bloque, formula estas preguntas:

1. ¿Este contenido se entiende por sí solo o forma parte de otro?
2. ¿Es navegación, una acción o información?
3. ¿Existe orden, jerarquía o cruce de fila y columna?
4. ¿La decisión expresa significado o solo intenta colocar algo visualmente?

Se trabaja

150 minutos · práctica sobre datos dados y sobre una especificación nueva

Los dos primeros pasos construyen tablas; el tercero y el cuarto retiran las etiquetas y dejan solo el contenido, que es la situación real de un encargo.

Paso 1 · Construye la tabla · 20 min

Recibes estos datos sin formato:

Comparativa de modelos de servidor
Modelo       RAM     Almacenamiento   Transferencia   Precio mensual
Básico       8 GB    256 GB NVMe      2 TB            19 €
Avanzado     16 GB   512 GB NVMe      5 TB            39 €
Empresarial  32 GB   1 TB NVMe        10 TB           79 €

Escribe el HTML con caption, thead, tbody, th scope="col" en la cabecera, th scope="row" en el nombre de cada modelo y td en el resto.

La comprobación: lee en voz alta la celda «5 TB» tal y como la escucharía alguien que no ve la tabla. Si tu marcado es correcto, deberías poder decir «Avanzado, transferencia, 5 TB». Si no puedes, falta un scope.

Paso 2 · El horario de clase · 30 min

Construye una tabla con el horario semanal de tu grupo: de lunes a viernes, seis periodos lectivos y un recreo intermedio.

1. <caption> que identifique de qué grupo es el horario.
2. Los días como <th scope="col">.
3. La hora de cada franja como <th scope="row">.
4. El recreo en una fila combinada que abarque los cinco días.
5. Aplica la comprobación de sumas antes de darlo por bueno.

Estoy atascado · no me cuadran las columnas

Cuenta primero cuántas columnas tiene la tabla en total, incluida la de las horas. Si son cinco días más la columna de horas, son seis columnas. Entonces la fila del recreo puede ser un th con la hora más un td colspan="5", o bien una sola celda con colspan="6". Ese despiste de una columna es prácticamente el único fallo que da esta tarea.

Antes de continuar: las sumas por filas dan todas el mismo total, comprobado sobre el código y no sobre el navegador.

Paso 3 · Completa el marcado · 15 min

3.1 · Un fragmento resuelto

La especificación dice: «Una introducción explica el evento y después aparecen tres ventajas sin orden». La decisión es un apartado con encabezado, párrafo y lista no ordenada. No se elige por cómo quedará colocado, sino por la relación entre los datos.

3.2 · Ahora tú

Recibes este contenido: «Cómo participar» contiene tres pasos que deben seguirse en orden. Completa los cuatro huecos sin añadir contenedores innecesarios:

<_____>
  <h2>Cómo participar</h2>
  <_____>
    <li>Inscríbete</li>
    <li>Confirma tu correo</li>
    <li>Presenta tu entrada</li>
  </_____>
</_____>

Compara tu solución con la de un compañero y justificad el elemento exterior y el tipo de lista antes de verla resuelta.

Ver una solución razonada

<section> agrupa un apartado temático con encabezado propio y <ol> expresa que los pasos tienen un orden. Las etiquetas de cierre corresponden a esos dos elementos.

Paso 4 · Marca una página que nunca has visto · 60 min

Es el trabajo central de la sesión, y el primero en el que nadie te dice qué etiqueta usar.

Una asociación local necesita una página para anunciar una jornada de puertas abiertas. Solo recibes esta especificación:

• nombre de la jornada y una frase introductoria;
• enlaces a inicio, programa, ponentes y contacto;
• tres actividades, cada una con título, imagen, descripción y enlace para ampliar información;
• una lista ordenada con los pasos de inscripción;
• una pequeña comparativa de tres talleres con hora, duración y plazas;
• una acción para enviar la inscripción y un enlace para descargar las normas;
• información complementaria sobre accesibilidad del recinto;
• autoría y contacto de la asociación.

4.1 · Primero el árbol, en papel

Dibuja el árbol del documento y anota al lado de cada región qué relación expresa. No escribas ni una etiqueta hasta tener el árbol entero.

4.2 · Después el documento

Escribe el HTML completo. La página debe incluir navegación, una jerarquía de encabezados sin saltos, listas del tipo que corresponda, imágenes con alternativa adecuada a su función, una tabla pequeña, acciones y regiones semánticas.

4.3 · El requisito que llega tarde

Cuando lo tengas terminado, aparece un requisito nuevo: una de las tres actividades se cancela y hay que sustituirla por dos talleres cortos. Aplícalo sin rehacer el documento y anota qué tuviste que tocar. Una estructura bien decidida absorbe un cambio así en pocos minutos; una decidida por el aspecto obliga a rehacer bloques enteros.

Paso 5 · Transfiérelo a tu proyecto · 25 min

Revisa ahora productos.html. Añade una comparativa real solo si sus valores necesitan fila y columna para entenderse. Si no existe ese cruce, usa la estructura adecuada y deja un comentario justificando por qué no has creado una tabla.

Aplica después a tu sitio la lección del paso 4: busca un bloque cuya estructura hayas elegido por cómo quedaba y reescríbelo por lo que significa.

Ampliación si has completado el trabajo

Primero termina y comprueba los cinco pasos. Los dos retos atacan los dos errores caros de esta sesión: convertir en tabla algo que no lo es, y dar por buena una cuadrícula que no cuadra.

Reto 1 · Solo uno de estos dos bloques es una tabla

BLOQUE A · Tarifas de envío
                Península   Baleares   Canarias
Estándar        3,90 €      5,50 €     9,90 €
Urgente         7,90 €      12,00 €    18,50 €
Recogida        0,00 €      0,00 €     0,00 €

BLOQUE B · El equipo
Elena Ruiz. Dirección técnica. Trabaja en la empresa desde 2014 y coordina
el taller de reparaciones.
Marc Oliver. Atención al cliente. Gestiona las incidencias y el seguimiento
de los pedidos.
Nadia Franco. Logística. Responsable de almacén y de la relación con los
transportistas.

Marca los dos. Solo uno necesita <table>.

1. Identifica cuál y explica qué tienen sus datos que los del otro no tienen. La respuesta se formula con la palabra «coordenadas».
2. Marca el otro bloque con la estructura que sí le corresponde. Hay al menos dos opciones defendibles: elige una y argumenta por qué no la otra.
3. El bloque B se puede meter en una tabla de dos columnas, y se vería ordenado. Explica qué afirmación falsa estaría haciendo ese marcado sobre los datos.

Reto 2 · La cuadrícula que no cuadra

Esta tabla tiene tres errores de cuadrícula. Encuéntralos sin abrir el navegador, aplicando la suma por filas.

<table>
  <caption>Ocupación de las aulas</caption>
  <thead>
    <tr>
      <th scope="col">Hora</th>
      <th scope="col">Aula 1</th>
      <th scope="col">Aula 2</th>
      <th scope="col">Aula 3</th>
      <th scope="col">Aula 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">09:00</th>
      <td>DAW1</td>
      <td colspan="2">Reunión de departamento</td>
      <td>ASIR2</td>
      <td>Libre</td>
    </tr>
    <tr>
      <th scope="row">10:00</th>
      <td rowspan="2">Examen DAW2</td>
      <td>DAW1</td>
      <td>Libre</td>
    </tr>
    <tr>
      <th scope="row">11:00</th>
      <td>ASIR1</td>
      <td>Libre</td>
      <td>DAW2</td>
      <td>Libre</td>
    </tr>
    <tr>
      <th scope="row">12:00</th>
      <td colspan="4">Claustro</td>
    </tr>
  </tbody>
</table>

Para cada error, escribe: en qué fila está, cuánto suma esa fila, cuánto debería sumar y cómo lo corriges. Después ábrelo en el navegador y comprueba si lo que dibuja coincide con lo que habías predicho.

Cierre

5 minutos · comprobación y recuerdo

Ver respuestas

1 · th es una celda que encabeza a otras y les da significado; td es una celda de datos.

2 · Porque caption está dentro de la tabla y queda asociado a ella; un encabezado suelto solo está cerca.

3 · Que esa celda ocupe la posición de tres columnas de la cuadrícula.

4 · Sumando por filas: cada celda cuenta su colspan, y todas las filas deben dar el mismo total.

5 · Qué relación o significado expresa ese contenido; la etiqueta viene después.

6 · La acción provoca un cambio y se marca como botón; el enlace lleva a otro destino.

---