Tablas

Un horario de autobuses es una tabla: cada celda solo tiene sentido junto con el encabezado de su fila y el de su columna.

Las tablas son para datos

Usa una tabla cuando la información tiene filas y columnas: un horario, una lista de precios, los resultados de una encuesta. A fines de la década de 1990 muchos sitios usaban tablas para armar el diseño de páginas enteras, con los menús en una celda y el contenido en otra. Eso causa problemas reales. Los lectores de pantalla anuncian cada celda con su fila y su columna, así que una tabla de diseño suena como una hoja de cálculo confusa, y los diseños con tablas no se adaptan bien a las pantallas pequeñas. Hoy el diseño se hace con CSS, y las tablas se reservan para los datos.

Filas, celdas y encabezados

Una tabla se construye fila por fila. <table> envuelve todo, cada <tr> (table row, fila de tabla) es una fila, y dentro de una fila cada <td> (table data, dato de tabla) es una celda. Las celdas que rotulan una fila o una columna usan en cambio <th> (table header, encabezado de tabla), que los navegadores muestran por defecto en negrita y centrado. La cantidad de celdas de cada fila debe coincidir, para que las columnas queden alineadas.

<table>
  <caption>Bread prices, October 2026</caption>
  <thead>
    <tr><th scope="col">Loaf</th><th scope="col">Weight</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sourdough</th><td>800 g</td><td>6.50</td></tr>
    <tr><th scope="row">Rye</th><td>600 g</td><td>5.00</td></tr>
  </tbody>
</table>

Que la tabla se explique sola

Tres agregados convierten una cuadrícula de celdas en una tabla que todos pueden leer. Primero, <caption>, colocado justo después de la etiqueta de apertura <table>, le da un título a la tabla; los lectores de pantalla lo anuncian antes del contenido, así quien escucha sabe de qué trata la tabla. Segundo, el atributo scope en cada <th> indica si rotula una columna (scope="col") o una fila (scope="row"). Con él, un lector de pantalla puede leer Rye, Price, 5.00 en lugar de un 5.00 suelto. Tercero, <thead>, <tbody> y <tfoot> agrupan las filas de encabezado, las filas del cuerpo y las filas de totales. Dejan clara la estructura, ayudan a CSS a darle estilo a cada parte y permiten que los navegadores repitan el encabezado en cada página impresa de una tabla larga.

Celdas que se extienden

Una celda puede extenderse por varias columnas con colspan o por varias filas con rowspan. En un horario semanal, un recreo para almorzar que abarca los cinco días hábiles puede ser una sola celda con colspan="5". Cuando una celda se extiende, su fila necesita menos celdas: si una fila normalmente tiene 6 celdas y una de ellas tiene colspan="5", esa fila contiene solo 2 celdas en el HTML. Usa celdas extendidas cuando reflejen los datos; las tablas muy complejas son difíciles de leer para todos, así que dividir una tabla grande en dos más simples suele ser mejor.

Las tablas anchas pueden ser un problema en los teléfonos. Una tabla no puede ajustarse como el texto, así que una tabla con muchas columnas puede quedar más ancha que la pantalla. Una solución común es envolver la tabla en un elemento que se desplace de lado por su cuenta, con CSS, para que el resto de la página no se ensanche también.

Mantén los datos de cada celda lo más simples que puedas: un valor por celda, las unidades en el encabezado (Precio en euros) en lugar de repetirlas en cada celda, y ninguna celda vacía usada como relleno. Una tabla construida así es más fácil de leer en voz alta, más fácil de ordenar, y se pega limpia en una hoja de cálculo.