Has aprendido a organizar información en listas. Pero imagina que quieres mostrar las notas de tus alumnos, los horarios de un cine, o los precios de diferentes productos en varias tiendas. Una lista se queda corta — necesitas filas y columnas.
Bienvenido al mundo de las tablas. Si alguna vez has usado Excel o Google Sheets, ya entiendes el concepto. Ahora vas a aprender a construirlas con HTML.
Las tablas en HTML son como un rompecabezas de etiquetas que encajan unas dentro de otras. Parece complejo al principio, pero una vez que entiendes la lógica, es muy intuitivo.
Aquí está la estructura básica:
Vamos a descomponerlo pieza por pieza:
<table> — El contenedor de toda la tabla. Sin él, no hay tabla.<thead> — La "cabeza" de la tabla. Aquí van los títulos de las columnas.<tbody> — El "cuerpo" de la tabla. Aquí van los datos reales.<tr> — "Table Row". Cada fila de la tabla.<th> — "Table Header". Las celdas de encabezado (normalmente en negrita).<td> — "Table Data". Las celdas con datos normales.Piénsalo así: una tabla es una caja (table) dividida en cabeza (thead) y cuerpo (tbody).
Dentro de cada parte hay filas (tr), y dentro de cada fila hay celdas (th o td).
Si probaste el código anterior, habrás notado algo raro: ¿dónde están los bordes?
Por defecto, las tablas HTML son invisibles — solo ves el texto flotando. Para ver la estructura, necesitas estilos. Pero aún no hemos llegado a CSS...
Aquí viene un truco que usaremos solo mientras aprendemos.
Existe un atributo antiguo llamado border que añade bordes:
Prométeme algo: cuando aprendas CSS, olvidarás que este atributo existe. Es una reliquia del pasado, como los teléfonos con teclado físico. Funciona, pero hay formas mucho mejores de hacerlo.
colspanA veces necesitas que una celda ocupe varias columnas. Imagina una tabla de horarios donde el almuerzo ocupa todo el mediodía:
El atributo colspan="3" le dice a esa celda: "ocupa el espacio de 3 columnas".
Es como tirar un muro entre habitaciones para hacer una más grande.
rowspanLo mismo pero en vertical. Una celda puede ocupar varias filas:
Observa cómo "Bebidas" y "Comida" solo aparecen una vez pero abarcan dos filas cada una.
El rowspan="2" hace la magia.
Las tablas son perfectas para datos tabulares — información que naturalmente tiene filas y columnas. Horarios, comparativas de precios, estadísticas deportivas, clasificaciones...
Pero hay una tentación que debes resistir: no uses tablas para diseñar layouts. En los años 90, los desarrolladores usaban tablas para crear el diseño de las páginas. Era un desastre. Hoy tenemos CSS para eso — las tablas son solo para datos.
Crea una tabla con tus tres videojuegos, películas o libros favoritos. Incluye columnas para el título, el género y tu puntuación personal del 1 al 10.
Los datos sin estructura son ruido. Dale forma de tabla...