Marc Semper Lloret
← HTML: estructura y contenido de la Web

Sesión 10 · Semana 4

Tablas

Hoy · Hoja de ruta

  1. 1. Aprende: Qué hace cada parte de una tabla y qué problema resuelve exactamente el atributo scope.
  2. 2. Haz: Convierte una comparativa en texto plano en una tabla accesible.
  3. 3. Comprueba: El validador no encuentra celdas huérfanas ni errores de anidación.

Antes de empezar · 5 minutos, sin apuntes

  1. Enumera cuatro regiones semánticas que esperarías encontrar en una página completa.
  2. ¿Qué hace que una auditoría semántica sea distinta de juzgar el diseño?
  3. Decide si una ficha de producto independiente sería section, article o div, y justifica.

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.

Una tabla básica

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

Funciona, pero le falta casi todo. Vamos a ver por qué.

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.

Una estructura completa

<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>
Vista previaUna tabla que conserva la relación entre filas y columnas
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.

Elemento Qué declara
<table> Que esto son datos con relación de filas y columnas
<caption> El título de la tabla, dentro de la propia tabla
<thead> La fila o filas de encabezado
<tbody> El cuerpo de datos
<tfoot> Un pie de tabla, para totales o resúmenes
<tr> Una fila
<th> Una celda que encabeza otras
<td> Una celda de datos

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.

caption no es un encabezado puesto encima

Poner un <h3>Comparativa</h3> justo antes de la tabla no es equivalente. El <caption> va dentro de <table> y queda asociado a ella: se anuncia al entrar en la tabla y viaja con ella si se extrae de su contexto. Un encabezado suelto encima es solo un texto que casualmente está cerca.

Tarea 9 · Construye la tabla

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.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué diferencia hay entre th y td?
  2. ¿Para qué sirve scope?
  3. ¿Por qué caption no se sustituye por un encabezado encima de la tabla?
Ver respuestas

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

2 · Para declarar si un encabezado manda sobre su columna o sobre su fila, y así cada celda pueda anunciarse junto a los encabezados que la describen.

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