Tablas en HTML
Imagina que necesitas mostrar un horario de clases, una lista de precios,
o los resultados de un torneo en tu sitio web. Las tablas en HTML te
permiten organizar datos en filas y columnas, de forma clara y ordenada.
Aunque antes se usaban para diseñar páginas web (toda la página era una
enorme tabla), hoy se reservan para datos tabulares, como estadísticas o
formularios. En esta lección, aprenderás a crear tablas con etiquetas como
<table>
, <tr>
,
<td>
, <th>
, y
<caption>
, a personalizarlas con atributos HTML (aunque
muchos están en desuso), y a estilizarlas con CSS.
En esta lección
- Estructura básica de una tabla
- Personalizar tablas
- Tablas avanzadas
- Tablas con CSS
- Consejos y errores comunes
- Tabla de referencia
Estructura básica de una tabla
Una tabla en HTML se construye con tres etiquetas principales:
<table>
: Define la tabla completa.<tr>
(table row): Crea una fila.-
<td>
(table data): Define una celda dentro de una fila.
Las columnas se forman automáticamente según las celdas de cada fila. Aquí tienes un ejemplo de una tabla con 2 filas y 3 columnas:
<table style="border: 1px solid black; border-collapse: collapse;">
<tr>
<td style="border: 1px solid black;">Celda (1,1)</td>
<td style="border: 1px solid black;">Celda (1,2)</td>
<td style="border: 1px solid black;">Celda (1,3)</td>
</tr>
<tr>
<td style="border: 1px solid black;">Celda (2,1)</td>
<td style="border: 1px solid black;">Celda (2,2)</td>
<td style="border: 1px solid black;">Celda (2,3)</td>
</tr>
</table>
code>
Resultado:
Celda (1,1) | Celda (1,2) | Celda (1,3) |
Celda (2,1) | Celda (2,2) | Celda (2,3) |
Nota: Una tabla contiene filas, y cada fila contiene
celdas. Las etiquetas <table>
añaden un salto de
línea antes y después, como un párrafo (<p>
).
Ejemplo práctico: Lista de contactos
Creemos una tabla simple para una lista de contactos. Añadimos un borde para que lo visualices mejor:
<table style="border: 1px solid black; border-collapse: collapse;">
<tr>
<td style="border: 1px solid black;">Pepe Pérez</td>
<td style="border: 1px solid black;">91 400 00 00</td>
</tr>
</table>
code>
Resultado:
Pepe Pérez | 91 400 00 00 |
puedes añadir mas filas con una pareja de tr
, y sus correspondientes celdas
Personalizar tablas: Cabeceras con <th>
La etiqueta <th>
(table header) crea celdas de
cabecera, que se suelen mostrar en negrita y centradas por defecto.
Ejemplo:
<table style="border: 1px solid black; border-collapse: collapse;">
<tr>
<th style="border: 1px solid black;">Nombre</th>
<th style="border: 1px solid black;">Teléfono</th>
</tr>
<tr>
<td style="border: 1px solid black;">Pepe Pérez</td>
<td style="border: 1px solid black;">91 400 00 00</td>
</tr>
</table>
Resultado:
Nombre | Teléfono |
---|---|
Pepe Pérez | 91 400 00 00 |
Títulos con <caption>
La etiqueta <caption>
añade un título a la tabla, que
aparece encima por defecto. Ejemplo:
<table style="border: 1px solid black; border-collapse: collapse;">
<caption style="caption-side: top;">Directorio telefónico</caption>
<tr>
<th style="border: 1px solid black;">Nombre</th>
<th style="border: 1px solid black;">Teléfono</th>
</tr>
</table>
Ancho y espaciado
Puedes definir el ancho de la tabla o celdas con
style="width: 80%"
(o píxeles, como 350px
). El
espaciado se controla con padding
(dentro de celdas) y
border-spacing
(entre celdas, si no usas
border-collapse: collapse
).
<table style="width: 80%; margin: auto; border: 1px solid black; border-collapse: collapse;">
<tr>
<td style="width: 50%; padding: 10px; border: 1px solid black;">Pepe Pérez</td>
<td style="width: 50%; padding: 10px; border: 1px solid black;">91 400 00 00</td>
</tr>
</table>
Tablas avanzadas: Combina celdas con colspan y
rowspan
colspan
hace que una celda ocupe varias columnas, y
rowspan
varias filas. Ejemplo:
<table style="border: 1px solid black; border-collapse: collapse;">
<tr>
<td style="border: 1px solid black;" colspan="2">Estructura HTML</td>
</tr>
<tr>
<td style="border: 1px solid black;">head</td>
<td style="border: 1px solid black;">body</td>
</tr>
</table>
Resultado:
Estructura HTML | |
head | body |
Estructura semántica con <thead>, <tbody>, <tfoot>
Para tablas grandes, usa <thead>
(cabecera),
<tbody>
(cuerpo), y <tfoot>
(pie)
para mejorar la semántica y la impresión:
<table style="border: 1px solid black; border-collapse: collapse;">
<thead>
<tr>
<th style="border: 1px solid black;" scope="col">Nombre</th>
<th style="border: 1px solid black;" scope="col">Teléfono</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid black;">Pepe Pérez</td>
<td style="border: 1px solid black;">91 400 00 00</td>
</tr>
</tbody>
</table>
Tablas con CSS
En HTML5, atributos como border
, width
,
align
, cellpadding
, y
cellspacing
están en desuso. Usa CSS para estilizar tablas.
Ejemplo completo con CSS externo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Lista de contactos</title>
<style>
table {
width: 80%;
margin: auto;
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid black;
}
caption {
caption-side: top;
font-weight: bold;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<h1>Lista de contactos</h1>
<table>
<caption>Directorio telefónico</caption>
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Teléfono</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pepe Pérez</td>
<td>91 400 00 00</td>
</tr>
<tr>
<td>Paco López</td>
<td>91 411 11 11</td>
</tr>
<tr>
<td class="center" colspan="2">Emergencias: 112</td>
</tr>
</tbody>
</table>
</body>
</html>
Consejos y errores comunes
- Prueba siempre tu tabla: Abre el archivo HTML en un navegador para verificar bordes, anchos, y alineaciones.
-
Evita atributos obsoletos: Usa CSS en lugar de
border
,width
,align
, etc. -
Celdas vacías: Si una celda está vacía, usa
para mantener su estructura visible. - Errores con colspan/rowspan: Asegúrate de que el número total de celdas por fila coincida, o la tabla se desajustará.
-
Accesibilidad: Usa
scope="col"
oscope="row"
en<th>
para que los lectores de pantalla interpreten la tabla correctamente.
Tabla de referencia
Etiqueta/Atributo | Descripción | Equivalente CSS |
---|---|---|
<table> |
Define la tabla | display: table |
border="1" |
Añade bordes | border: 1px solid black |
width="80%" |
Define ancho | width: 80% |
align="center" |
Centra la tabla | margin: auto |
cellpadding="10" |
Espacio dentro de celdas | padding: 10px |
cellspacing="5" |
Espacio entre celdas | border-spacing: 5px |