≡En resumen
- Una tabla HTML se construye con table y, dentro, filas tr que contienen celdas th (encabezados) o td (datos).
- thead, tbody, tfoot y caption dan estructura y significado; mejoran la accesibilidad y el mantenimiento.
- colspan y rowspan unen celdas; scope en los th indica si encabezan una columna o una fila.
- El aspecto se controla con CSS: los atributos border, cellpadding o bgcolor están obsoletos.
- Usa tablas solo para datos tabulares, nunca para maquetar la página.
01 ¿Qué es una tabla HTML?
La etiqueta table forma parte del HTML desde mediados de los noventa. Durante años se usó para maquetar páginas enteras, hasta que el CSS asumió el diseño y las tablas volvieron a su función original: mostrar datos que se comparan en filas y columnas.
Una tabla bien hecha no es solo algo visual. Su marcado le dice al navegador, a los lectores de pantalla y a los buscadores qué celda es un encabezado y a qué datos se refiere cada valor.
02 Etiquetas de una tabla HTML
| Etiqueta | Nombre | Para qué sirve |
|---|---|---|
| table | Tabla | Contenedor de toda la tabla |
| caption | Título | Describe el contenido; debe ser el primer hijo de table |
| thead | Cabecera | Agrupa la fila o filas de encabezados |
| tbody | Cuerpo | Agrupa las filas de datos |
| tfoot | Pie | Totales o notas al final |
| tr | Fila (table row) | Cada fila de la tabla |
| th | Celda de encabezado (table header) | Título de una columna o de una fila; en negrita y centrado por defecto |
| td | Celda de datos (table data) | Cada valor de la tabla |
| colgroup y col | Grupo de columnas | Aplicar estilos o anchos a columnas completas |
03 Cómo hacer una tabla en HTML paso a paso
-
1
Abre la tabla y ponle título
Empieza con table y añade caption con una frase que explique qué datos contiene.
-
2
Crea la cabecera
Dentro de thead, una fila tr con una celda th por columna y el atributo scope="col".
-
3
Añade las filas de datos
Dentro de tbody, una fila tr por registro. La primera celda puede ser un th con scope="row" y el resto td.
-
4
Cierra con un pie si hace falta
Usa tfoot para totales o notas, fuera del cuerpo de datos.
-
5
Dale estilo con CSS
Bordes, espaciado, colores y comportamiento en móvil se definen en la hoja de estilos, no en atributos HTML.
<table> <caption>Planes y precios 2026</caption> <thead> <tr><th scope="col">Plan</th><th scope="col">Precio/mes</th><th scope="col">Usuarios</th></tr> </thead> <tbody> <tr><th scope="row">Básico</th><td>9 €</td><td>1</td></tr> <tr><th scope="row">Pro</th><td>29 €</td><td>5</td></tr> </tbody> <tfoot> <tr><td colspan="3">Precios sin IVA</td></tr> </tfoot></table>
El resultado es una tabla de tres columnas, con los nombres de los planes como encabezados de fila y una nota que ocupa todo el ancho en el pie.
04 Unir celdas: colspan y rowspan
Cuando una celda debe ocupar varias columnas o filas, se usan los atributos colspan y rowspan en td o th. El número indica cuántas celdas abarca, y las filas afectadas deben tener una celda menos por cada una que se «come» la celda combinada.
| Atributo | Qué hace | Ejemplo |
|---|---|---|
| colspan | Une celdas en horizontal | colspan="2": la celda ocupa dos columnas |
| rowspan | Une celdas en vertical | rowspan="3": la celda ocupa tres filas |
| scope | Indica qué encabeza un th | col, row, colgroup o rowgroup |
| headers | Relaciona una celda con los id de sus encabezados | Tablas complejas con varios niveles de cabecera |
05 Cómo dar estilo a una tabla HTML con CSS
table { border-collapse: collapse; width: 100%; }th, td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }thead th { background: #f4f4f7; position: sticky; top: 0; }tbody tr:nth-child(even) { background: #fafafa; }td.num { text-align: right; font-variant-numeric: tabular-nums; }
border-collapse: collapse une los bordes dobles, nth-child(even) crea filas cebreadas, position: sticky deja fija la cabecera al desplazarse y tabular-nums alinea las cifras.
Tabla responsive con desplazamiento
Envuelve la tabla en un contenedor con overflow-x: auto para que en móvil se desplace en horizontal sin romper la página.
Tabla apilada en móvil
En pantallas pequeñas cada fila se muestra como una tarjeta y cada celda repite su encabezado con un atributo de datos y CSS.
Columnas prioritarias
Oculta en móvil las columnas secundarias y deja un enlace al detalle completo.
Las tablas anchas son uno de los problemas clásicos del diseño responsive. En un proyecto de diseño web a medida se decide caso por caso qué patrón usar según cuántas columnas tiene la tabla y qué necesita comparar el usuario.
06 Tablas accesibles y útiles para buscadores e IA
- ✓Añade siempre un caption que resuma de qué trata la tabla.
- ✓Usa th para los encabezados, nunca td en negrita.
- ✓Indica scope="col" o scope="row" en cada th.
- ✓En tablas con varios niveles de cabecera, relaciona celdas y encabezados con id y headers.
- ✓Evita tablas dentro de tablas y celdas vacías que solo sirven para dar espacio.
- ✓No uses tablas para maquetar: para colocar elementos están CSS Grid y Flexbox.
- ✓Publica los datos como texto real, no como imagen de una tabla.
07 Tablas HTML dinámicas y alternativas
Cuando la tabla tiene cientos de filas o el usuario necesita ordenar, filtrar o paginar, se añade JavaScript sobre la tabla HTML o se genera desde los datos de una API. Es el caso de paneles de gestión, informes o catálogos en un desarrollo de aplicaciones web.
| Necesidad | Mejor opción |
|---|---|
| Datos fijos: precios, horarios, especificaciones | Tabla HTML con CSS |
| Ordenar y filtrar muchos registros | Tabla HTML con JavaScript o librería de data grid |
| Colocar tarjetas, columnas o bloques de la página | CSS Grid o Flexbox, nunca una tabla |
| Datos que edita un equipo sin tocar código | Hoja de cálculo o CMS que genere la tabla |
| Gráficos a partir de datos | Librería de gráficos, con la tabla como alternativa accesible |
Preguntas frecuentes sobre HTML Table
Es la estructura de etiquetas que muestra datos en filas y columnas en una página web. Se crea con table, filas tr y celdas th para encabezados o td para datos.
Abre la etiqueta table, añade un caption, crea la cabecera con thead y una fila de th, escribe cada fila de datos con tr y td dentro de tbody, y cierra la tabla. El diseño se aplica después con CSS.
th es una celda de encabezado que da título a una columna o fila, y td es una celda de datos normal. Los lectores de pantalla usan los th para anunciar a qué se refiere cada dato.
Con colspan para unir columnas y rowspan para unir filas. Por ejemplo, td colspan="2" crea una celda que ocupa el ancho de dos columnas.
Con CSS: por ejemplo, border: 1px solid en th y td y border-collapse: collapse en la tabla. El atributo border en la etiqueta table está obsoleto.
Lo más sencillo es envolverla en un contenedor con overflow-x: auto para que se desplace en horizontal en el móvil. Para tablas cortas también puedes apilar cada fila como una tarjeta con CSS.
No es recomendable. Las tablas son para datos tabulares; usarlas para la maquetación dificulta la accesibilidad, el diseño responsive y el mantenimiento. Para eso existen CSS Grid y Flexbox.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗