📘 HTML TABLES (TABLAS)

Ana Belén Hernández · Factoría F5 · 19 febrero 2026

Explicación para empezar desde cero · 5 minutos teoría + 2 minutos ejercicio

🔹 1. ¿Qué es una tabla en HTML?

Una tabla es una forma de ordenar información en filas (de izquierda a derecha) y columnas (de arriba a abajo). Por ejemplo:

Un horario de clases.
Una lista de precios.
Los resultados de un campeonato.

En HTML usamos etiquetas para construir la tabla. Una etiqueta es una palabra entre < > que le dice al navegador qué tipo de contenido es.

Etiquetas básicas (las más importantes):

<table> → envuelve toda la tabla.
<tr> → una fila (table row).
<td> → una celda con datos (table data).
<th> → una celda de encabezado (table header). El texto sale en negrita.

📌 Ejemplo mínimo (copia esto y pruébalo)

<table>
  <tr>
    <th>Nombre</th>   <!-- encabezado columna 1 -->
    <th>Edad</th>     <!-- encabezado columna 2 -->
  </tr>
  <tr>
    <td>Ana</td>      <!-- fila 1, dato columna 1 -->
    <td>30</td>       <!-- fila 1, dato columna 2 -->
  </tr>
</table>

Lo que se ve en el navegador (con bordes para que lo veas claro):

Nombre	Edad
Ana	30

🔹 2. Expandir filas y columnas

A veces queremos que una celda ocupe más de un espacio. Para eso usamos colspan (para columnas) y rowspan (para filas).

🔸 `colspan` → una celda ocupa VARIAS COLUMNAS

Se escribe dentro de la celda. Ejemplo: <td colspan="2"> ocupará dos columnas.

<table>
  <tr>
    <th>Producto</th>
    <th>Precio</th>
  </tr>
  <tr>
    <td>Manzanas</td>
    <td>2€</td>
  </tr>
  <tr>
    <td colspan="2">Oferta especial</td>  <!-- esta celda ocupa 2 columnas -->
  </tr>
</table>

Resultado:

Producto	Precio
Manzanas	2€
Oferta especial

La celda "Oferta especial" ocupa el espacio de las dos columnas.

🔸 `rowspan` → una celda ocupa VARIAS FILAS

Ejemplo: <td rowspan="2"> ocupará dos filas.

<table>
  <tr>
    <th>Categoría</th>
    <th>Producto</th>
  </tr>
  <tr>
    <td rowspan="2">Frutas</td>  <!-- esta celda ocupa 2 filas -->
    <td>Manzanas</td>
  </tr>
  <tr>
    <td>Plátanos</td>  <!-- en esta fila ya no hay celda para categoría, la de arriba se estira -->
  </tr>
</table>

Resultado:

Categoría	Producto
Frutas	Manzanas
Frutas	Plátanos

La celda "Frutas" abarca dos filas.

🔹 3. Organizar la tabla con `<thead>`, `<tbody>` y `<tfoot>`

Estas etiquetas ayudan a dividir la tabla en tres partes, aunque no cambian cómo se ve:

<thead> → para las filas de encabezado (los títulos de las columnas).
<tbody> → para las filas con los datos.
<tfoot> → para el pie (totales, resúmenes).

Ejemplo con 5 columnas y 3 películas (muy parecido al ejercicio):

<table>
  <thead>
    <tr>
      <th>Título</th>
      <th>Director</th>
      <th>Año</th>
      <th>Género</th>
      <th>Puntuación</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>El Padrino</td>
      <td>Francis Ford Coppola</td>
      <td>1972</td>
      <td>Drama</td>
      <td>9.2</td>
    </tr>
    <tr>
      <td>Star Wars</td>
      <td>George Lucas</td>
      <td>1977</td>
      <td>Ciencia ficción</td>
      <td>8.6</td>
    </tr>
    <tr>
      <td>Toy Story</td>
      <td>John Lasseter</td>
      <td>1995</td>
      <td>Animación</td>
      <td>8.3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4"><strong>Mejor puntuada:</strong></td>
      <td><strong>9.2</strong></td>
    </tr>
  </tfoot>
</table>

Resultado visual de este ejemplo:

Título	Director	Año	Género	Puntuación
El Padrino	Francis Ford Coppola	1972	Drama	9.2
Star Wars	George Lucas	1977	Ciencia ficción	8.6
Toy Story	John Lasseter	1995	Animación	8.3
Mejor puntuada:				9.2

Observa cómo el pie usa colspan="4" para que el texto ocupe las primeras cuatro columnas, dejando la quinta para la puntuación.

🎯 EJERCICIO PRÁCTICO (10 minutos)

Enunciado: Crear una tabla con los siguientes datos de películas.

Columnas (encabezados): Título, Director, Año, Género, Puntuación.

Películas (datos):

El Padrino · Francis Ford Coppola · 1972 · Drama · 9.2
Star Wars · George Lucas · 1977 · Ciencia ficción · 8.6
Toy Story · John Lasseter · 1995 · Animación · 8.3

Requisitos extra:

Usar <thead>, <tbody> y <tfoot>.
En el pie (<tfoot>), añadir una fila que ponga "Mejor puntuada: 9.2", pero usando colspan para que el texto ocupe las primeras 4 columnas y la nota quede en la quinta.

💡 Pista importante: En la celda del pie, escribe <td colspan="4">Mejor puntuada:</td> y luego otra celda con <td>9.2</td>.

⏳ Tiempo: 10 minutos. ¡Intentadlo!

🔍 SOLUCIÓN (código completo)

Aquí tienes el código de la tabla resuelta, con explicaciones en comentarios.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Solución: Tabla de películas</title>
</head>
<body>
    <h1>🎬 Películas favoritas</h1>
    <table>
        <!-- ENCABEZADO (títulos de columnas) -->
        <thead>
            <tr>
                <th>Título</th>
                <th>Director</th>
                <th>Año</th>
                <th>Género</th>
                <th>Puntuación</th>
            </tr>
        </thead>

        <!-- CUERPO (datos de cada película) -->
        <tbody>
            <tr>
                <td>El Padrino</td>
                <td>Francis Ford Coppola</td>
                <td>1972</td>
                <td>Drama</td>
                <td>9.2</td>
            </tr>
            <tr>
                <td>Star Wars</td>
                <td>George Lucas</td>
                <td>1977</td>
                <td>Ciencia ficción</td>
                <td>8.6</td>
            </tr>
            <tr>
                <td>Toy Story</td>
                <td>John Lasseter</td>
                <td>1995</td>
                <td>Animación</td>
                <td>8.3</td>
            </tr>
        </tbody>

        <!-- PIE (resumen, con colspan) -->
        <tfoot>
            <tr>
                <td colspan="4"><strong>Mejor puntuada:</strong></td>
                <td><strong>9.2</strong></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Así se ve la solución (con bordes para que veas la estructura):

Título	Director	Año	Género	Puntuación
El Padrino	Francis Ford Coppola	1972	Drama	9.2
Star Wars	George Lucas	1977	Ciencia ficción	8.6
Toy Story	John Lasseter	1995	Animación	8.3
Mejor puntuada:				9.2

Observa cómo la celda "Mejor puntuada:" ocupa cuatro columnas gracias a colspan="4".

📚 Resumen

<table> crea la tabla.
<tr> crea una fila.
<td> crea una celda de datos.
<th> crea una celda de encabezado (negrita).
colspan une columnas, rowspan une filas.
<thead>, <tbody>, <tfoot> organizan la tabla.

📖 Para seguir aprendiendo: MDN: Tablas HTML (es una referencia, no te asustes).

🙋‍♀️ ¿Alguna pregunta?