Tablas

Estructura básica de tables y estilos predefinidos

Las tablas en Bootstrap transforman el elemento HTML <table> estándar en componentes visuales organizados y profesionales. Bootstrap proporciona un sistema completo de estilos que mantiene la estructura semántica de las tablas mientras mejora significativamente su apariencia y legibilidad.

Tabla básica con .table

La clase fundamental .table es el punto de partida para cualquier tabla en Bootstrap. Esta clase aplica espaciado interno consistente, bordes sutiles y tipografía optimizada a todos los elementos de la tabla.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Producto</th>
      <th scope="col">Categoría</th>
      <th scope="col">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Laptop Dell XPS</td>
      <td>Electrónicos</td>
      <td>€1,299</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Smartphone iPhone</td>
      <td>Electrónicos</td>
      <td>€899</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Auriculares Sony</td>
      <td>Audio</td>
      <td>€199</td>
    </tr>
  </tbody>
</table>

La estructura mantiene los elementos semánticos estándar: <thead> para los encabezados, <tbody> para el contenido principal, y <th> y <td> para las celdas correspondientes.

Estilos predefinidos fundamentales

Bootstrap incluye variaciones visuales que se pueden combinar con la clase base .table para crear diferentes efectos visuales según las necesidades del diseño.

Tabla con rayas alternas (.table-striped):

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Usuario</th>
      <th scope="col">Email</th>
      <th scope="col">Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Ana García</td>
      <td>ana@ejemplo.com</td>
      <td>Activo</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Carlos López</td>
      <td>carlos@ejemplo.com</td>
      <td>Inactivo</td>
    </tr>
    <tr>
      <td>003</td>
      <td>María Rodríguez</td>
      <td>maria@ejemplo.com</td>
      <td>Activo</td>
    </tr>
  </tbody>
</table>

La clase .table-striped aplica un color de fondo alternado a las filas impares, facilitando la lectura de datos en tablas extensas.

Tabla con bordes (.table-bordered):

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Mes</th>
      <th scope="col">Ventas</th>
      <th scope="col">Objetivo</th>
      <th scope="col">Diferencia</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Enero</td>
      <td>€45,000</td>
      <td>€40,000</td>
      <td>+€5,000</td>
    </tr>
    <tr>
      <td>Febrero</td>
      <td>€38,500</td>
      <td>€42,000</td>
      <td>-€3,500</td>
    </tr>
  </tbody>
</table>

Esta variación añade bordes visibles a todas las celdas, creando una separación clara entre cada elemento de datos.

Tabla con efecto hover (.table-hover):

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Código</th>
      <th scope="col">Descripción</th>
      <th scope="col">Stock</th>
      <th scope="col">Proveedor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>PRD001</td>
      <td>Monitor 24 pulgadas</td>
      <td>15 unidades</td>
      <td>TechSupply</td>
    </tr>
    <tr>
      <td>PRD002</td>
      <td>Teclado mecánico</td>
      <td>8 unidades</td>
      <td>GamerZone</td>
    </tr>
    <tr>
      <td>PRD003</td>
      <td>Mouse inalámbrico</td>
      <td>23 unidades</td>
      <td>OfficeMax</td>
    </tr>
  </tbody>
</table>

La clase .table-hover resalta la fila sobre la que se posiciona el cursor, mejorando la navegabilidad visual de los datos.

Combinación de estilos

Los estilos predefinidos se pueden combinar entre sí para crear tablas que aprovechen múltiples características visuales simultáneamente:

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th scope="col">Empleado</th>
      <th scope="col">Departamento</th>
      <th scope="col">Salario</th>
      <th scope="col">Antigüedad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pedro Martínez</td>
      <td>Desarrollo</td>
      <td>€45,000</td>
      <td>3 años</td>
    </tr>
    <tr>
      <td>Laura Fernández</td>
      <td>Marketing</td>
      <td>€38,000</td>
      <td>2 años</td>
    </tr>
    <tr>
      <td>Diego Ruiz</td>
      <td>Ventas</td>
      <td>€41,000</td>
      <td>5 años</td>
    </tr>
  </tbody>
</table>

Esta combinación proporciona rayas alternas, bordes definidos y efecto hover simultáneamente, creando una experiencia visual rica y funcional.

Tablas con encabezados destacados

Bootstrap permite personalizar la apariencia de los encabezados de tabla usando las clases de color que ya conoces:

<table class="table table-striped">
  <thead class="table-dark">
    <tr>
      <th scope="col">Proyecto</th>
      <th scope="col">Cliente</th>
      <th scope="col">Progreso</th>
      <th scope="col">Fecha límite</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Web Corporativa</td>
      <td>Empresa ABC</td>
      <td>75%</td>
      <td>15/03/2024</td>
    </tr>
    <tr>
      <td>App Mobile</td>
      <td>StartUp XYZ</td>
      <td>45%</td>
      <td>22/03/2024</td>
    </tr>
  </tbody>
</table>

También puedes usar .table-light para un encabezado con fondo claro que destaque sutilmente del resto de la tabla, manteniendo la legibilidad mientras proporciona diferenciación visual entre el encabezado y el contenido de datos.

Variaciones de diseño y estados visuales

Bootstrap ofrece múltiples variaciones de diseño que permiten adaptar las tablas a diferentes contextos y necesidades visuales. Estas variaciones van más allá de los estilos básicos, proporcionando control granular sobre la apariencia y comunicación visual de los datos.

Estados contextuales en filas

Las clases de color contextual que ya conoces se pueden aplicar directamente a las filas de las tablas para comunicar diferentes estados o prioridades de información. Esto es especialmente útil para destacar elementos importantes o categorizar datos visualmente.

<table class="table">
  <thead>
    <tr>
      <th scope="col">Pedido</th>
      <th scope="col">Cliente</th>
      <th scope="col">Total</th>
      <th scope="col">Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>#001</td>
      <td>María López</td>
      <td>€150.00</td>
      <td>Completado</td>
    </tr>
    <tr class="table-danger">
      <td>#002</td>
      <td>Juan García</td>
      <td>€75.50</td>
      <td>Cancelado</td>
    </tr>
    <tr class="table-warning">
      <td>#003</td>
      <td>Ana Martínez</td>
      <td>€200.25</td>
      <td>Pendiente</td>
    </tr>
    <tr class="table-info">
      <td>#004</td>
      <td>Carlos Ruiz</td>
      <td>€95.00</td>
      <td>En proceso</td>
    </tr>
    <tr>
      <td>#005</td>
      <td>Laura Díaz</td>
      <td>€125.75</td>
      <td>Nuevo</td>
    </tr>
  </tbody>
</table>

Cada clase contextual proporciona un código de color inmediatamente reconocible: .table-success para estados positivos, .table-danger para alertas o errores, .table-warning para advertencias, y .table-info para información adicional.

Estados contextuales en celdas individuales

La flexibilidad del sistema permite aplicar estados visuales a celdas específicas en lugar de filas completas, proporcionando un control más preciso sobre qué información destacar:

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Empleado</th>
      <th scope="col">Proyecto A</th>
      <th scope="col">Proyecto B</th>
      <th scope="col">Proyecto C</th>
      <th scope="col">Evaluación</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pedro Sánchez</td>
      <td class="table-success">Completado</td>
      <td class="table-warning">En progreso</td>
      <td class="table-info">Planificado</td>
      <td class="table-success">Excelente</td>
    </tr>
    <tr>
      <td>Elena Torres</td>
      <td class="table-success">Completado</td>
      <td class="table-success">Completado</td>
      <td class="table-danger">Atrasado</td>
      <td class="table-warning">Revisar</td>
    </tr>
    <tr>
      <td>Miguel Herrera</td>
      <td class="table-warning">En progreso</td>
      <td class="table-info">Planificado</td>
      <td class="table-info">Planificado</td>
      <td class="table-info">Nuevo</td>
    </tr>
  </tbody>
</table>

Esta aproximación permite crear matrices de estado donde cada celda comunica información específica sin afectar el resto de la fila.

Variaciones de tamaño

Bootstrap proporciona la clase .table-sm para crear tablas más compactas, reduciendo el espaciado interno de las celdas cuando necesitas mostrar más información en menos espacio:

<table class="table table-sm table-striped">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Producto</th>
      <th scope="col">SKU</th>
      <th scope="col">Stock</th>
      <th scope="col">Precio</th>
      <th scope="col">Categoría</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Ratón inalámbrico</td>
      <td>MW-2024-01</td>
      <td>45</td>
      <td>€29.99</td>
      <td>Periféricos</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Teclado mecánico</td>
      <td>KM-2024-02</td>
      <td>12</td>
      <td>€89.99</td>
      <td>Periféricos</td>
    </tr>
    <tr>
      <td>003</td>
      <td>Monitor 27"</td>
      <td>MN-2024-03</td>
      <td>8</td>
      <td>€299.99</td>
      <td>Pantallas</td>
    </tr>
    <tr>
      <td>004</td>
      <td>Webcam HD</td>
      <td>WC-2024-04</td>
      <td>23</td>
      <td>€59.99</td>
      <td>Audio/Video</td>
    </tr>
  </tbody>
</table>

Las tablas compactas son ideales para dashboards, listados administrativos, o cualquier contexto donde necesites optimizar el espacio vertical disponible.

Combinación de estados y variaciones

Puedes combinar estados contextuales con las variaciones de diseño para crear tablas que comuniquen información compleja de manera visualmente organizada:

<table class="table table-sm table-hover">
  <thead class="table-dark">
    <tr>
      <th scope="col">Tarea</th>
      <th scope="col">Asignado</th>
      <th scope="col">Prioridad</th>
      <th scope="col">Fecha límite</th>
      <th scope="col">Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-danger">
      <td>Revisar código</td>
      <td>Ana García</td>
      <td>Alta</td>
      <td>Hoy</td>
      <td>Vencida</td>
    </tr>
    <tr class="table-warning">
      <td>Actualizar documentación</td>
      <td>Carlos López</td>
      <td>Media</td>
      <td>Mañana</td>
      <td>En progreso</td>
    </tr>
    <tr class="table-success">
      <td>Pruebas unitarias</td>
      <td>María Torres</td>
      <td>Alta</td>
      <td>15/03/2024</td>
      <td>Completada</td>
    </tr>
    <tr>
      <td>Diseño de interfaz</td>
      <td>Pedro Ruiz</td>
      <td>Baja</td>
      <td>20/03/2024</td>
      <td>Pendiente</td>
    </tr>
  </tbody>
</table>

Estados activos y deshabilitados

Similar a otros componentes de Bootstrap, las tablas pueden mostrar estados específicos para filas que requieren atención especial:

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">Usuario</th>
      <th scope="col">Email</th>
      <th scope="col">Rol</th>
      <th scope="col">Último acceso</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <td>admin@empresa.com</td>
      <td>admin@empresa.com</td>
      <td>Administrador</td>
      <td>Hace 5 minutos</td>
    </tr>
    <tr>
      <td>usuario1@empresa.com</td>
      <td>usuario1@empresa.com</td>
      <td>Editor</td>
      <td>Hace 2 horas</td>
    </tr>
    <tr class="text-muted">
      <td>inactivo@empresa.com</td>
      <td>inactivo@empresa.com</td>
      <td>Visitante</td>
      <td>Hace 30 días</td>
    </tr>
  </tbody>
</table>

La clase .table-active resalta la fila seleccionada o actual, mientras que .text-muted indica elementos deshabilitados o inactivos, proporcionando jerarquía visual clara en la información presentada.

Tablas responsivas y elementos integrados

Las tablas responsivas resuelven uno de los mayores desafíos del diseño web moderno: mostrar datos tabulares complejos en dispositivos con pantallas pequeñas. Bootstrap proporciona un sistema elegante que mantiene la funcionalidad completa de las tablas mientras adapta su presentación a diferentes tamaños de pantalla.

Sistema de tablas responsivas

La clase .table-responsive envuelve cualquier tabla en un contenedor con scroll horizontal automático cuando el contenido excede el ancho disponible de la pantalla:

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Nombre del producto</th>
        <th scope="col">Descripción completa</th>
        <th scope="col">Categoría</th>
        <th scope="col">Precio unitario</th>
        <th scope="col">Stock disponible</th>
        <th scope="col">Proveedor</th>
        <th scope="col">Fecha de actualización</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>PRD001</td>
        <td>Portátil Dell Inspiron 15</td>
        <td>Ordenador portátil de 15.6" con procesador Intel Core i5</td>
        <td>Informática</td>
        <td>€699.99</td>
        <td>12 unidades</td>
        <td>TechDistrib S.L.</td>
        <td>15/03/2024</td>
      </tr>
      <tr>
        <td>PRD002</td>
        <td>Monitor Samsung 27"</td>
        <td>Monitor LED de 27 pulgadas con resolución 4K</td>
        <td>Periféricos</td>
        <td>€299.99</td>
        <td>8 unidades</td>
        <td>ElectroMax S.A.</td>
        <td>14/03/2024</td>
      </tr>
    </tbody>
  </table>
</div>

El contenedor responsivo permite que los usuarios deslicen horizontalmente para acceder a todas las columnas sin perder la estructura tabular ni comprometer la legibilidad de los datos.

Breakpoints específicos para responsividad

Bootstrap ofrece clases responsivas específicas que activan el scroll horizontal solo en determinados tamaños de pantalla, proporcionando un control más granular:

<!-- Responsiva solo en pantallas pequeñas -->
<div class="table-responsive-sm">
  <table class="table table-hover">
    <thead class="table-light">
      <tr>
        <th scope="col">Usuario</th>
        <th scope="col">Email</th>
        <th scope="col">Teléfono</th>
        <th scope="col">Departamento</th>
        <th scope="col">Rol</th>
        <th scope="col">Estado</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ana García López</td>
        <td>ana.garcia@empresa.com</td>
        <td>+34 612 345 678</td>
        <td>Marketing Digital</td>
        <td>Especialista Senior</td>
        <td>Activo</td>
      </tr>
      <tr>
        <td>Carlos Martínez Ruiz</td>
        <td>carlos.martinez@empresa.com</td>
        <td>+34 698 765 432</td>
        <td>Desarrollo Web</td>
        <td>Developer Full Stack</td>
        <td>Activo</td>
      </tr>
    </tbody>
  </table>
</div>

Las opciones disponibles incluyen .table-responsive-sm, .table-responsive-md, .table-responsive-lg, y .table-responsive-xl, cada una activando el comportamiento responsivo hasta su breakpoint correspondiente.

Integración de badges en celdas

Los badges se integran naturalmente dentro de las celdas de tabla para mostrar estados, categorías o información adicional de forma visual y compacta:

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Proyecto</th>
        <th scope="col">Cliente</th>
        <th scope="col">Estado</th>
        <th scope="col">Prioridad</th>
        <th scope="col">Progreso</th>
        <th scope="col">Equipo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Rediseño web corporativa</td>
        <td>TechStart Solutions</td>
        <td><span class="badge bg-success">Completado</span></td>
        <td><span class="badge bg-warning text-dark">Media</span></td>
        <td>100%</td>
        <td><span class="badge bg-primary">Frontend</span> <span class="badge bg-info">UX/UI</span></td>
      </tr>
      <tr>
        <td>App móvil de delivery</td>
        <td>RestaurantChain S.A.</td>
        <td><span class="badge bg-primary">En desarrollo</span></td>
        <td><span class="badge bg-danger">Alta</span></td>
        <td>75%</td>
        <td><span class="badge bg-primary">Mobile</span> <span class="badge bg-secondary">Backend</span></td>
      </tr>
      <tr>
        <td>Sistema de gestión</td>
        <td>LogiCorp Ltd.</td>
        <td><span class="badge bg-warning text-dark">Revisión</span></td>
        <td><span class="badge bg-success">Baja</span></td>
        <td>90%</td>
        <td><span class="badge bg-secondary">Backend</span></td>
      </tr>
    </tbody>
  </table>
</div>

Los badges múltiples en una misma celda permiten categorizar información compleja manteniendo la claridad visual y aprovechando los colores semánticos que ya conoces.

Botones integrados en tablas

La integración de botones básicos dentro de las celdas proporciona acciones contextual directamente relacionadas con cada fila de datos:

<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Factura</th>
        <th scope="col">Cliente</th>
        <th scope="col">Importe</th>
        <th scope="col">Fecha</th>
        <th scope="col">Estado</th>
        <th scope="col">Acciones</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>FAC-2024-001</td>
        <td>Construcciones García</td>
        <td>€2,450.00</td>
        <td>10/03/2024</td>
        <td><span class="badge bg-success">Pagada</span></td>
        <td>
          <button type="button" class="btn btn-outline-primary btn-sm me-1">Ver</button>
          <button type="button" class="btn btn-outline-secondary btn-sm">PDF</button>
        </td>
      </tr>
      <tr>
        <td>FAC-2024-002</td>
        <td>Servicios Digitales Pro</td>
        <td>€890.50</td>
        <td>12/03/2024</td>
        <td><span class="badge bg-warning text-dark">Pendiente</span></td>
        <td>
          <button type="button" class="btn btn-outline-primary btn-sm me-1">Ver</button>
          <button type="button" class="btn btn-outline-warning btn-sm">Recordar</button>
        </td>
      </tr>
      <tr>
        <td>FAC-2024-003</td>
        <td>Marketing Solutions</td>
        <td>€1,275.25</td>
        <td>14/03/2024</td>
        <td><span class="badge bg-danger">Vencida</span></td>
        <td>
          <button type="button" class="btn btn-outline-primary btn-sm me-1">Ver</button>
          <button type="button" class="btn btn-outline-danger btn-sm">Gestionar</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Los botones pequeños con .btn-sm mantienen proporciones apropiadas dentro de las celdas, mientras que las utilidades de espaciado como .me-1 proporcionan separación adecuada entre elementos.

Combinación de elementos enriquecidos

Las tablas pueden integrar múltiples elementos simultáneamente para crear interfaces de datos complejas pero organizadas:

<div class="table-responsive-md">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr>
        <th scope="col">Producto</th>
        <th scope="col">Imagen</th>
        <th scope="col">Información</th>
        <th scope="col">Estado</th>
        <th scope="col">Valoración</th>
        <th scope="col">Acciones</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <strong>Auriculares Bluetooth Pro</strong><br>
          <small class="text-muted">SKU: AUD-BT-001</small>
        </td>
        <td>
          <img src="https://via.placeholder.com/60x60" alt="Producto" class="img-thumbnail" style="width: 60px;">
        </td>
        <td>
          <span class="badge bg-primary">Electrónicos</span><br>
          <small class="text-muted">€129.99 | Stock: 45</small>
        </td>
        <td>
          <span class="badge bg-success">Disponible</span><br>
          <small class="text-success">En almacén</small>
        </td>
        <td>
          <span class="text-warning">★★★★☆</span><br>
          <small class="text-muted">4.2/5 (87 reseñas)</small>
        </td>
        <td>
          <button type="button" class="btn btn-outline-primary btn-sm mb-1">Editar</button><br>
          <button type="button" class="btn btn-outline-secondary btn-sm">Stock</button>
        </td>
      </tr>
      <tr>
        <td>
          <strong>Cámara Digital 4K</strong><br>
          <small class="text-muted">SKU: CAM-4K-002</small>
        </td>
        <td>
          <img src="https://via.placeholder.com/60x60" alt="Producto" class="img-thumbnail" style="width: 60px;">
        </td>
        <td>
          <span class="badge bg-info">Fotografía</span><br>
          <small class="text-muted">€599.99 | Stock: 3</small>
        </td>
        <td>
          <span class="badge bg-warning text-dark">Stock bajo</span><br>
          <small class="text-warning">Reordenar pronto</small>
        </td>
        <td>
          <span class="text-warning">★★★★★</span><br>
          <small class="text-muted">4.8/5 (156 reseñas)</small>
        </td>
        <td>
          <button type="button" class="btn btn-outline-primary btn-sm mb-1">Editar</button><br>
          <button type="button" class="btn btn-outline-warning btn-sm">Reponer</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Texto enriquecido y estructura de contenido

Las celdas pueden contener contenido estructurado usando las utilidades tipográficas que ya dominas:

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Empleado</th>
        <th scope="col">Contacto</th>
        <th scope="col">Proyectos actuales</th>
        <th scope="col">Rendimiento</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="d-flex align-items-center">
            <div>
              <strong>María Elena Torres</strong><br>
              <small class="text-muted">Desarrolladora Senior</small><br>
              <span class="badge bg-primary">Full Stack</span>
            </div>
          </div>
        </td>
        <td>
          <strong>Email:</strong> maria.torres@empresa.com<br>
          <strong>Teléfono:</strong> +34 612 345 678<br>
          <small class="text-muted">Ext. 1234</small>
        </td>
        <td>
          <span class="badge bg-success mb-1">E-commerce Platform</span><br>
          <span class="badge bg-info mb-1">API REST</span><br>
          <span class="badge bg-warning text-dark">Mobile App</span>
        </td>
        <td>
          <div class="text-center">
            <strong class="text-success">95%</strong><br>
            <small class="text-muted">Objetivos cumplidos</small><br>
            <span class="badge bg-success">Excelente</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Esta aproximación permite crear interfaces de datos ricas que mantienen la organización tabular mientras proporcionan toda la información necesaria de forma visualmente coherente y accesible en cualquier dispositivo.