Tabla de datos en HTML y CSS: accesible y responsive

Una tabla en HTML es para datos en filas y columnas: precios, horarios, comparaciones. Una tabla bien hecha se entiende también con un lector de pantalla, y en el celular se desplaza de lado en vez de estirar toda la página.

El código

<div class="tabla-desplazable" role="region" aria-labelledby="t-titulo" tabindex="0">
  <table>
    <caption id="t-titulo">Planes de internet en casa</caption>
    <thead>
      <tr>
        <th scope="col">Plan</th>
        <th scope="col">Velocidad</th>
        <th scope="col">Precio al mes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Básico</th>
        <td>100 Mbps</td>
        <td class="num">$349.00</td>
      </tr>
      <tr>
        <th scope="row">Hogar</th>
        <td>300 Mbps</td>
        <td class="num">$499.00</td>
      </tr>
      <tr>
        <th scope="row">Gamer</th>
        <td>1 Gbps</td>
        <td class="num">$799.00</td>
      </tr>
    </tbody>
  </table>
</div>

.tabla-desplazable { overflow-x: auto; }
table {
  border-collapse: collapse;
  min-width: 26rem;
  width: 100%;
  font-family: system-ui, sans-serif;
}
caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e3e8ee; text-align: left; }
thead th { background: #0f1f33; color: white; }
tbody tr:nth-child(even) { background: #f5f8fb; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

Los precios van en pesos mexicanos. La tabla tiene 6 celdas de encabezado con scope y, a cualquier ancho, la página no se desborda: lo que no cabe se desplaza dentro de su contenedor.

Lo que hace accesible una tabla

• caption es el título de la tabla. El lector de pantalla lo anuncia al entrar en ella.
• th con scope marca las celdas de encabezado: scope="col" para las de columna y scope="row" para la primera celda de cada fila. Así, al llegar a «$499.00», el lector puede decir «Hogar, Precio al mes».
• thead y tbody separan los encabezados de los datos. Al imprimir una tabla larga, el navegador repite el thead en cada hoja.

Que no rompa en el celular

Una tabla no se puede encoger por debajo de su contenido, así que en una pantalla angosta empuja toda la página de lado. La solución más sencilla es envolverla en un contenedor con overflow-x: auto: la tabla se desplaza sola, dentro de su caja. El tabindex="0" deja que ese contenedor reciba el foco para desplazarlo con las flechas del teclado, y role="region" con aria-labelledby le da nombre.

Dos detalles más: font-variant-numeric: tabular-nums hace que todas las cifras midan lo mismo, de modo que los precios alineados a la derecha cuadran dígito con dígito; y las filas alternas (:nth-child(even)) ayudan a seguir una fila larga con la vista.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.