Cómo crear tablas en formato HTML paso a paso

Si trabajas con páginas web tarde o temprano vas a necesitar organizar datos en filas y columnas con tablas HTML. Ya sea para mostrar precios, horarios, listados o comparativas, las tablas siguen siendo una pieza clave del lenguaje de marcado de la web.

Aunque hoy usamos CSS para la maquetación general del sitio, las tablas HTML siguen siendo la herramienta adecuada para mostrar datos tabulados, siempre que se construyan con una estructura correcta, accesible y con un poco de cariño en el diseño usando CSS.

Qué es exactamente una tabla en HTML y cuándo usarla

Una tabla no es más que un conjunto de datos ordenados en filas horizontales y columnas verticales. Cada cruce entre una fila y una columna forma una celda, que puede contener texto, imágenes, iconos, enlaces, etc.

En HTML esto se traduce en un bloque de código rodeado por la etiqueta principal <table>, dentro de la cual se organizan filas (<tr>) y celdas (<td> y <th>). Esta estructura hace que sea muy sencillo localizar valores relacionados: por ejemplo, cruzar el nombre de una persona con su edad o su país.

Desde hace décadas se viene usando tablas en papel para censos, inventarios, horarios o estadísticas, así que no es raro que HTML incorporase desde el principio una forma nativa de mostrarlas en la web. El objetivo es que los datos sean fáciles de leer tanto visualmente como con tecnologías de asistencia.

Es importante tener claro que las tablas HTML están pensadas solo para datos tabulados. Antiguamente se utilizaban para maquetar páginas completas: cabecera en una fila, contenido en otra, pie en otra, etc. Hoy esto está totalmente desaconsejado porque dificulta la accesibilidad, genera un código muy complejo y no se adapta bien a móviles. Para el diseño de la página hay que usar CSS (flexbox, grid, etc.), no tablas.

Estructura básica de una tabla HTML: etiquetas imprescindibles

Para montar una tabla funcional necesitas dominar unas pocas etiquetas clave. Con solo estas ya puedes construir tablas sencillas de varias filas y columnas:

• <table>: define el inicio y el final de la tabla, es el contenedor principal.
• <tr>: representa cada fila de la tabla.
• <td>: celda de datos normal, donde va el contenido de cada columna dentro de una fila.
• <th>: celda de encabezado, normalmente usada en la primera fila o primera columna.
• <caption>: título o leyenda descriptiva de la tabla (opcional, pero muy recomendable).

Una primera aproximación podría ser una tabla pequeña con nombres, edades y países. El patrón es siempre el mismo: una <table>, varias filas <tr>, y dentro de cada fila las celdas <th> o <td>.

Por ejemplo, una tabla básica de tres columnas y dos filas de datos quedaría, a nivel de idea, así: primero una fila de cabecera con <th> (Nombre, Edad, País), y luego tantas filas <tr> con <td> como registros quieras mostrar.

En HTML, las celdas de datos <td> se colocan una al lado de la otra dentro de la misma fila; no se apilan hacia abajo hasta que no abres un nuevo <tr>. Cada nueva fila que crees con <tr> aparecerá debajo de la anterior.

Cómo crear tu primera tabla simple paso a paso

Para arrancar sin liarte, lo mejor es construir una tabla sencilla usando solo <table>, <tr> y <td>. Imagina que quieres una tabla de tres filas por cuatro columnas, con texto plano en cada celda.

La secuencia mental es esta: primero abres <table> para definir la tabla completa. Después creas una primera fila con <tr>, y dentro pones cuatro <td> para las cuatro columnas. Para la segunda y tercera fila repites exactamente el mismo patrón con nuevos <tr>.

Con esta base, el navegador ya mostrará una estructura en forma de rejilla, aunque por defecto las tablas no tienen bordes visibles ni relleno interior. Es decir, verás el contenido como líneas de texto alineadas en columnas, pero sin cuadrícula a la vista hasta que añadas estilos CSS.

Si quieres añadir una fila de encabezados diferenciada, sustituyes las celdas de la primera fila por <th> en lugar de <td>. Normalmente el navegador mostrará ese texto en negrita y centrado, dejando claro qué significa cada columna.

En cuanto al título, puedes acompañar a la tabla con un elemento <caption> nada más abrir <table>. Esa leyenda sirve tanto para comprensión visual como para accesibilidad y SEO, porque describe el contenido de la tabla.

Etiquetas avanzadas para estructurar mejor las tablas

Si quieres ir un poco más allá y construir tablas ordenadas y semánticas, HTML ofrece etiquetas específicas para separar cabecera, cuerpo y pie de la tabla, así como para trabajar con columnas completas:

• <thead>: agrupa una o varias filas que forman la cabecera de la tabla.
• <tbody>: agrupa las filas que contienen los datos principales.
• <tfoot>: agrupa una o varias filas situadas al pie de la tabla, normalmente totales o resúmenes.
• <colgroup> y <col>: permiten aplicar estilo o atributos a columnas completas sin repetir código en cada celda.

En una tabla de facturas, por ejemplo, podrías encapsular las cabeceras de columnas dentro de <thead> (Producto, Cantidad, Precio), las filas de artículos dentro de <tbody> y un total final con <tfoot> mostrando la suma. Esto no solo organiza el HTML, también facilita aplicar estilos diferentes a cada bloque con CSS (colores, tipografías, etc.).

Algo importante: el orden correcto de estas secciones dentro de <table> es <caption>, <colgroup> (si existe), <thead>, <tfoot> y luego uno o varios <tbody>. Aunque el pie se muestre visualmente al final, en el marcado debe ir antes de <tbody> por especificación HTML.

Además, una tabla puede incluir más de un bloque <tbody> si quieres agrupar subconjuntos de datos (por ejemplo, distintos trimestres, cursos, secciones, etc.), manteniendo un único <thead> compartido.

En cuanto a las columnas, <colgroup> y <col> resuelven un problema clásico: evitar repetir las mismas reglas de estilo en cada celda de una columna. Puedes declarar un <colgroup> justo después de <table> y dentro definir tantos <col> como columnas tenga la tabla, asignando estilos mediante el atributo style o clases CSS.

Combinar filas y columnas: colspan, rowspan y atributos útiles

No todas las tablas son rejillas perfectas; muchas veces necesitas que una celda se extienda a lo ancho o alto abarcando varias columnas o varias filas. Para eso existen los atributos colspan y rowspan.

El atributo colspan se añade a una celda (<td> o <th>) para indicar cuántas columnas debe ocupar. Por ejemplo, colspan=»2″ permite que una celda cubra el espacio de dos columnas. Es muy útil para crear cabeceras que agrupen varias columnas o para celdas de resumen como “Nombre completo” que sustituyen a dos celdas separadas.

De forma similar, rowspan indica cuántas filas abarca una celda. Si escribes rowspan=»3″ en una celda de la primera fila, esa celda se fusionará con las de debajo creando un bloque vertical de tres filas. Se usa mucho en tablas de categorías, horarios o listados donde varias filas comparten un mismo encabezado lateral.

Al combinar celdas, hay que tener cierto cuidado: las filas deben mantener una estructura lógica para que el navegador no “se pierda”. Cuando una celda abarca varias columnas, debes eliminar las celdas que “sobran” en esa fila; lo mismo con las filas cuando usas rowspan, ajustando el número de <td> en las filas inferiores.

En términos de accesibilidad, si combinas filas y columnas, conviene que las celdas que actúan como encabezado usen <th> y, cuando sea apropiado, atributos como scope para indicar si se trata de un encabezado de fila (scope=»row») o de columna (scope=»col»). Así los lectores de pantalla pueden relacionar bien encabezados y datos.

Estilos básicos de tablas con CSS: bordes, espaciado y tamaños

Tal cual salen de fábrica, las tablas HTML son bastante sosas: sin bordes visibles, sin colores y con poco contraste. Para hacerlas legibles y agradables toca tirar de CSS. Tienes tres maneras de aplicar estilos:

• CSS en el <head> con <style>: útil para páginas o ejemplos pequeños.
• Hoja CSS externa: la opción profesional para sitios reales, fácil de reutilizar y cachear.
• CSS inline con el atributo style: solo recomendable para pruebas rápidas o casos muy puntuales.

Entre las propiedades más usadas para tablas destacan unas cuantas que conviene memorizar porque marcan una gran diferencia visual con mínimos cambios:

• border: define ancho, estilo y color del borde (por ejemplo, border:1px solid #000;).
• border-collapse: con valor collapse une los bordes de las celdas para que parezcan líneas únicas; con separate los deja separados.
• border-spacing: si usas bordes separados, controla la distancia entre celdas.
• padding: añade espacio interior dentro de cada celda, separando texto y borde.
• width: establece el ancho de la tabla o de columnas individuales.

Un patrón muy habitual es aplicar border:1px solid; a table, td y th, junto con border-collapse:collapse; en table. Esto genera una cuadrícula limpia sin espacios dobles entre bordes. Luego añades padding:8px o 10px a td y th para que el contenido respire.

También puedes jugar con el ancho de la tabla usando width:100% para que ocupe todo el contenedor disponible y se adapte a distintos tamaños de pantalla. Combinado con fuentes legibles (por ejemplo, font-family: Arial, sans-serif; font-size:16px;), el resultado es una tabla cómoda de leer en escritorio y tablets.

Si quieres alternar colores de fondo entre filas (efecto “zebra”), puedes apoyarte en selectores CSS como tr:nth-child(even) y tr:nth-child(odd) para aplicar diferentes background-color de forma automática, sin tocar el HTML.

Cambiar el aspecto de filas, columnas y celdas: colores, fuentes y alineación

Además de los bordes y el espaciado, hay muchas propiedades CSS que te permiten resaltar información importante en tu tabla y mejorar la usabilidad:

• background-color: sirve para diferenciar cabeceras, filas destacadas o columnas clave.
• color: cambia el color del texto.
• text-align: controla la alineación horizontal del contenido (left, center, right).
• vertical-align: ajusta la alineación vertical dentro de la celda (top, middle, bottom).
• font-weight, font-size, font-family: modifican peso, tamaño y tipo de letra.

Una práctica habitual es aplicar un fondo más intenso y una tipografía en negrita a las cabeceras <th>, mientras que las celdas de datos se muestran con un fondo neutro. Esto marca las secciones de la tabla de un vistazo.

Si tienes columnas especialmente relevantes (por ejemplo, la columna de precio o de estado), puedes utilizar <colgroup> y <col> para aplicar colores de fondo o anchos concretos solo a esas columnas, manteniendo el HTML más limpio y evitando repetir estilos en decenas de celdas.

De la misma forma, los pies de tabla (<tfoot>) muchas veces se muestran con un estilo distinto: tipografía más marcada, separador superior o fondo ligeramente diferente, para dejar claro que se trata de totales, promedios u otros datos de resumen.

Cuando hagas muchos ajustes de estilo, lo recomendable es sacar todas las reglas a una hoja CSS externa. Incrustar atributos style en cada <td> o <th> puede ser aceptable en ejemplos pequeños, pero en proyectos reales dificulta el mantenimiento y empeora el rendimiento.

Buenas prácticas de accesibilidad y usos que debes evitar

Diseñar tablas no va solo de que se vean bonitas; también importa que sean accesibles para personas con discapacidad visual o que usan lectores de pantalla. HTML proporciona varias herramientas que merece la pena emplear correctamente.

En primer lugar, usa <th> para las celdas que actúan como encabezados, no <td>. Esto permite a los lectores de pantalla identificar los títulos de filas y columnas y asociarlos con los datos correspondientes.

Cuando tenga sentido, añade el atributo scope a las celdas de cabecera: scope=»col» para encabezados de columna y scope=»row» para encabezados de fila. De esta manera, las ayudas técnicas pueden leer de forma coherente “Columna País: España” o “Fila María: 30, México”, por ejemplo.

Otra pieza interesante es el uso de <caption> como título de tabla. Este elemento aporta contexto sobre qué representan esos datos y mejora la experiencia tanto para usuarios videntes como para quienes navegan mediante tecnologías de asistencia.

Por último, es crucial recordar que las tablas no deben emplearse para maquetar páginas completas. Aunque todavía circula código heredado que crea layouts con <table>, esto genera estructuras complejas, poco mantenibles y muy confusas para lectores de pantalla. Para el diseño general del sitio, la solución es usar contenedores semánticos (<header>, <section>, <article>, <div>, etc.) y maquetación con CSS.

Si sigues estas pautas —estructura semántica, títulos claros, encabezados bien marcados y estilos separados en CSS—, las tablas HTML se convierten en una herramienta potente y flexible para mostrar cualquier tipo de datos estructurados, desde un listado simple de nombres hasta informes complejos con secciones, totales y columnas destacadas, manteniendo el código limpio, rápido y cómodo de mantener a largo plazo.