Para crear una tabla en HTML necesitas cuatro etiquetas básicas: <table> para la tabla, <tr> para cada fila, <th> para los encabezados y <td> para los datos. Con ellas puedes organizar precios, horarios o características de productos de una forma fácil de leer.
En esta guía vas a construir una tabla desde cero, darle estilo con CSS y adaptarla a pantallas pequeñas. Al final encontrarás un ejemplo completo que puedes copiar en un archivo y abrir en tu navegador.
Cómo hacer una tabla en HTML: ejemplo básico
Este código crea una tabla de dos columnas con un encabezado y dos filas de datos:
<table>
<caption>Cursos disponibles</caption>
<thead>
<tr>
<th scope="col">Curso</th>
<th scope="col">Nivel</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>Principiante</td>
</tr>
<tr>
<td>CSS</td>
<td>Principiante</td>
</tr>
</tbody>
</table>Guárdalo en un archivo con extensión .html y ábrelo en el navegador. Verás los datos organizados, aunque todavía no tendrán bordes ni colores: esa parte corresponde a CSS.
Qué etiquetas se utilizan en una tabla HTML
<table>: contiene toda la tabla.<caption>: indica su título o propósito. Se coloca inmediatamente después de abrir<table>.<thead>: agrupa las filas del encabezado.<tbody>: agrupa las filas con los datos principales.<tr>: representa una fila.<th>: representa una celda de encabezado.<td>: representa una celda de datos.<tfoot>: agrupa filas de resumen, como el total de un presupuesto.
Piensa en cada <tr> como una fila horizontal. Las celdas que coloques dentro determinan las columnas de esa fila. En una tabla sencilla de dos columnas, cada fila debe ocupar dos posiciones.
Cómo poner bordes y estilos a una tabla con CSS
Para separar las celdas visualmente, utiliza border. La propiedad border-collapse: collapse hace que los bordes contiguos se unan:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #cbd5e1;
padding: 12px 16px;
text-align: left;
}
thead {
background: #eef6ff;
color: #0f172a;
}
tbody tr:nth-child(even) {
background: #f8fafc;
}El padding deja espacio alrededor del contenido. El selector :nth-child(even) colorea las filas pares para facilitar la lectura. Si estás aprendiendo a distribuir elementos, también puedes consultar nuestra guía sobre cómo centrar un div en CSS.
Evita copiar ejemplos antiguos con los atributos border, cellpadding o cellspacing en el HTML. Utiliza CSS para controlar la presentación.
Cómo combinar celdas con colspan y rowspan
Combinar columnas con colspan
colspan="2" hace que una celda ocupe dos columnas. Por ejemplo, puedes crear una fila de aviso debajo de los cursos:
<tr>
<td colspan="2">Todos los cursos incluyen ejercicios.</td>
</tr>Esa fila ya ocupa las dos columnas: no añadas otra celda salvo que tu tabla tenga más columnas.
Combinar filas con rowspan
rowspan="2" hace que una celda ocupe dos filas. Este ejemplo agrupa dos sesiones de un mismo día:
<table>
<caption>Horario de clases</caption>
<thead>
<tr>
<th scope="col">Día</th>
<th scope="col">Clase</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">Lunes</th>
<td>HTML: 10:00</td>
</tr>
<tr>
<td>CSS: 12:00</td>
</tr>
</tbody>
</table>La segunda fila solo necesita una celda porque la del lunes sigue ocupando la primera columna. Utiliza las combinaciones cuando ayuden a entender los datos; una estructura sencilla suele ser más fácil de mantener.
Cómo crear una tabla responsive en HTML
Una tabla ancha puede desbordar la pantalla del móvil. Una solución práctica consiste en envolverla en un contenedor con overflow-x: auto: el usuario podrá desplazar la tabla horizontalmente sin mover toda la página.
<div class="tabla-scroll"
role="region"
aria-label="Cursos: tabla con desplazamiento horizontal"
tabindex="0">
<!-- Coloca aquí tu tabla -->
</div>.tabla-scroll {
max-width: 100%;
overflow-x: auto;
}
.tabla-scroll table {
min-width: 520px;
}
.tabla-scroll:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 4px;
}El ancho mínimo conserva el espacio entre columnas. tabindex="0" permite enfocar el contenedor con el teclado, y el contorno visible ayuda a reconocer el foco. Prueba el desplazamiento en móvil y con teclado antes de dar el diseño por terminado.
Ejemplo completo de tabla HTML con CSS para copiar
Copia este código en un archivo llamado tabla.html. Puedes editarlo con Visual Studio Code y abrirlo directamente en tu navegador, sin instalar librerías.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tabla de cursos</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 32px 16px;
font-family: system-ui, sans-serif;
color: #0f172a;
background: #f8fafc;
}
main { max-width: 900px; margin: auto; }
.tabla-scroll { max-width: 100%; overflow-x: auto; }
.tabla-scroll:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 4px;
}
table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
background: #fff;
}
caption {
padding: 16px 0;
text-align: left;
font-weight: 700;
}
th, td {
border: 1px solid #cbd5e1;
padding: 14px 18px;
text-align: left;
}
thead { background: #eef6ff; }
tbody tr:nth-child(even) { background: #f8fafc; }
</style>
</head>
<body>
<main>
<h1>Aprende desarrollo web</h1>
<p>Consulta los cursos. En móvil, desliza la tabla si es necesario.</p>
<div class="tabla-scroll" role="region"
aria-label="Cursos: tabla con desplazamiento horizontal"
tabindex="0">
<table>
<caption>Cursos para empezar</caption>
<thead>
<tr>
<th scope="col">Curso</th>
<th scope="col">Nivel</th>
<th scope="col">Proyecto práctico</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML</th>
<td>Principiante</td>
<td>Página personal</td>
</tr>
<tr>
<th scope="row">CSS</th>
<td>Principiante</td>
<td>Diseño responsive</td>
</tr>
<tr>
<th scope="row">JavaScript</th>
<td>Inicial</td>
<td>Formulario interactivo</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
</html>Para practicar, añade un cuarto curso y comprueba que la fila conserva sus tres celdas. Después, reduce el ancho del navegador y verifica que puedes desplazarte dentro de la tabla.
Errores frecuentes al crear tablas en HTML
- Usar una tabla para maquetar toda la página. Resérvala para datos relacionados por filas y columnas. Para distribuir secciones utiliza CSS Grid o Flexbox.
- Simular encabezados con negrita. Una celda
<td>con texto en negrita no equivale a<th>. - Olvidar las posiciones ocupadas por celdas combinadas. Revisa el total de columnas cuando utilices
colspanorowspan. - Fijar un ancho grande sin contenedor. Puede provocar desplazamiento horizontal en toda la página.
- Depender solo del color. Escribe etiquetas claras para que la información siga entendiéndose sin distinguir los colores.
Preguntas frecuentes sobre tablas en HTML
¿Cuál es la diferencia entre tr, th y td?
tr crea una fila. Dentro, th identifica una celda de encabezado y td contiene un dato. Una fila puede incluir ambos tipos de celda.
¿Se puede crear una tabla sin CSS?
Sí. HTML organiza los datos y el navegador los muestra en filas y columnas. Añade CSS cuando quieras personalizar bordes, colores, espacios o anchos.
¿Cómo añado una columna a una tabla?
Añade un encabezado th y una celda en cada fila de datos, en la misma posición. Si hay celdas combinadas, ajusta sus atributos cuando corresponda.
¿Cómo hago una tabla accesible?
Incluye un título descriptivo con caption, utiliza th para los encabezados e indica su relación mediante scope en tablas sencillas. Las tablas complejas pueden necesitar asociaciones explícitas con id y headers, además de pruebas con tecnologías de asistencia.
¿Necesito JavaScript para hacer una tabla responsive?
No. Un contenedor con desplazamiento horizontal y CSS suele bastar. JavaScript resulta útil cuando necesitas funciones adicionales, como ordenar, filtrar o paginar los datos.
Sigue practicando HTML
Ya puedes construir una tabla, identificar sus encabezados y adaptarla a pantallas pequeñas. El siguiente paso es usar tus propios datos: un horario, una lista de servicios o una comparativa sencilla.
Continúa con nuestra guía para crear formularios en HTML o visita la ruta de aprendizaje de HTML.
Referencias: elemento table en MDN y accesibilidad de tablas en MDN.
