<!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>