Tema 7 · Tablas

Tablas Estilizadas y Responsivas

Aprende a maquetar datos tabulares con la clase base .table, filas alternadas (striped), filas interactivas (hover), bordes y tablas con desplazamiento responsivo con .table-responsive.

Paleta Temática y Fondos de Bootstrap Imágenes Fluidas, Miniaturas y Figuras

La Clase Base .table

En HTML puro, las tablas carecen de espaciado y bordes legibles. Con solo aplicar la clase .table a la etiqueta <table>, Bootstrap aplica espaciado interno (padding) coherente, bordes separadores horizontales y alineación tipográfica limpia.

Variantes de Estilo para Tablas

Clase Utilitaria Efecto Visual
.table-striped Agrega sombreado grisáceo alternado a las filas impares (efecto cebra).
.table-hover Resalta suavemente el fondo de la fila sobre la que se sitúa el cursor del usuario.
.table-bordered Dibuja bordes completos alrededor de la tabla y en cada una de sus celdas.
.table-borderless Elimina todas las líneas divisorias para un diseño minimalista y abierto.
.table-sm Reduce a la mitad el padding de las celdas para condensar gran volumen de datos.

Tablas Responsivas con .table-responsive

En dispositivos móviles, las tablas con muchas columnas rompen el diseño empujando la pantalla hacia afuera. Para solucionarlo, envuelve la tabla dentro de un <div class="table-responsive">: 

<div class="table-responsive">
  <table class="table table-striped table-hover">
    ...
  </table>
</div>

⚡ Tabla de Calificaciones con Efecto Hover y Striped

Observa la legibilidad de las filas alternadas (table-striped), el resaltado interactivo al pasar el cursor (table-hover) y las insignias de estado:

index.html
Solo lectura 
<!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>
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 Bootstrap 5.3 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.