Tema 11 · Tablas y Listas

Tablas Semánticas y Fusión de Celdas

Aprende a estructurar datos tabulares accesibles con <table>, <caption>, <thead>, <tbody>, <tfoot>, y domina la combinación de celdas con colspan y rowspan.

Listas Ordenadas, Desordenadas y Glosarios Elementos Block vs Inline

¿Para qué sirven las Tablas en HTML5?

En HTML moderno, las tablas se utilizan únicamente para presentar datos tabulares (como inventarios, listas de precios, estadísticas o informes financieros). Nunca deben usarse para maquetar el diseño o estructura general de una página web.

Anatomía Semántica de una Tabla Completa

Etiqueta Descripción
<table> Contenedor principal de la tabla.
<caption> Título descriptivo de la tabla; colocado siempre como primer hijo. Es crucial para lectores de pantalla.
<thead> Agrupa el bloque de encabezado con los títulos de las columnas.
<tbody> Contiene el cuerpo principal con las filas de datos reales.
<tfoot> Pie de tabla; usualmente reservado para filas de totales, sumatorias o notas al pie.
<tr> Table Row: Representa una fila horizontal dentro de la tabla.
<th> Table Header: Celda de encabezado. El texto se centra y se muestra en negrita por defecto. Usa scope="col" o scope="row".
<td> Table Data: Celda estándar que contiene un dato individual.

Fusión de Celdas: colspan y rowspan

Cuando necesitas que una celda ocupe el espacio de varias columnas o filas adyacentes, utilizas estos atributos:

  • colspan="2": Hace que la celda se expanda horizontalmente abarcando 2 columnas.
  • rowspan="3": Hace que la celda se expanda verticalmente abarcando 3 filas sucesivas.

⚡ Tabla Semántica con Fusión de Columnas y Filas

Observa cómo se organiza un informe de ventas mensual con encabezados, cebra en las filas y total en el pie:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Tabla de Datos HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .tabla-datos {
      width: 100%;
      max-width: 600px;
      border-collapse: collapse;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }
    .tabla-datos caption {
      font-weight: bold;
      font-size: 1.1rem;
      margin-bottom: 10px;
      text-align: left;
      color: #0f172a;
    }
    .tabla-datos th, .tabla-datos td {
      padding: 12px 16px;
      border: 1px solid #e2e8f0;
      text-align: left;
    }
    .tabla-datos thead th {
      background-color: #0284c7;
      color: white;
      font-weight: 600;
    }
    .tabla-datos tbody tr:nth-child(even) {
      background-color: #f1f5f9;
    }
    .tabla-datos tfoot {
      background-color: #e0f2fe;
      font-weight: bold;
      color: #0369a1;
    }
    .text-end { text-align: right; }
  </style>
</head>
<body>

  <table class="tabla-datos">
    <caption>Resumen de Cursos Inscritos · 2026</caption>
    <thead>
      <tr>
        <th scope="col">Curso</th>
        <th scope="col">Nivel</th>
        <th scope="col" class="text-end">Estudiantes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HTML5 &amp; CSS3 Moderno</td>
        <td>Principiante</td>
        <td class="text-end">1,450</td>
      </tr>
      <tr>
        <td>JavaScript ES6+ Avanzado</td>
        <td>Intermedio</td>
        <td class="text-end">980</td>
      </tr>
      <tr>
        <td>PHP 8.3 y MySQL Relacional</td>
        <td>Avanzado</td>
        <td class="text-end">730</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <!-- Fusión de 2 columnas con colspan -->
        <td colspan="2">Total Estudiantes Activos:</td>
        <td class="text-end">3,160</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.