<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tablas en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 760px;">
    <div class="card shadow-sm border-0 rounded-4 overflow-hidden bg-white">
      <div class="card-header bg-dark text-white p-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-0 fw-bold">Estudiantes de Kilopolis Academia</h5>
        <span class="badge bg-primary">Ciclo Activo</span>
      </div>

      <div class="table-responsive">
        <table class="table table-striped table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Estudiante</th>
              <th scope="col">Curso</th>
              <th scope="col" class="text-center">Progreso</th>
              <th scope="col" class="text-end">Estado</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">101</th>
              <td class="fw-semibold">Elena Rodríguez</td>
              <td>CSS3 &amp; Grid</td>
              <td class="text-center">95%</td>
              <td class="text-end">
                <span class="badge bg-success-subtle text-success">Aprobado</span>
              </td>
            </tr>
            <tr>
              <th scope="row">102</th>
              <td class="fw-semibold">Carlos Mendoza</td>
              <td>JavaScript ES6+</td>
              <td class="text-center">82%</td>
              <td class="text-end">
                <span class="badge bg-success-subtle text-success">Aprobado</span>
              </td>
            </tr>
            <tr>
              <th scope="row">103</th>
              <td class="fw-semibold">Valeria Soto</td>
              <td>Bootstrap 5</td>
              <td class="text-center">60%</td>
              <td class="text-end">
                <span class="badge bg-warning-subtle text-warning-emphasis">En curso</span>
              </td>
            </tr>
            <tr>
              <th scope="row">104</th>
              <td class="fw-semibold">Andrés Pineda</td>
              <td>PHP 8.3 &amp; MySQL</td>
              <td class="text-center">40%</td>
              <td class="text-end">
                <span class="badge bg-info-subtle text-info">Iniciando</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</body>
</html>