Tables

Sistema completo de tablas modernas con diseño mejorado, funcionalidades avanzadas, responsive design y componentes especializados para datos empresariales.

Tablas Básicas Mejoradas

Las tablas básicas incluyen mejoras visuales significativas: sombras modernas, bordes redondeados, mejor spacing y transiciones fluidas.

Nombre Email Rol Estado Acciones
AM
Ana Martín
ana.martin@empresa.com Smartphones 45 $1,199
#002 MacBook Air Laptops 23 $1,299
#003 AirPods Pro Audio 67 $249
#004 iPad Pro Tablets 12 $799 
<table class="table table-striped">
  <!-- Filas alternas con color de fondo -->
</table>

Tabla con Bordes

País Capital Población Continente
España Madrid 47.4M Europa
Francia París 67.4M Europa
Brasil Brasilia 215.3M América del Sur 
<table class="table table-bordered">
  <!-- Bordes en todas las celdas -->
</table>

<table class="table table-borderless">
  <!-- Sin bordes -->
</table>

Estados de Filas

Tarea Asignado Progreso Prioridad
Diseño completado Ana García 100% Alta
Revisión pendiente Carlos López 75% Media
Corrección urgente María Silva 25% Crítica
Documentación Juan Martín 50% Baja
En desarrollo activo Laura Chen 80% Media 
<!-- Estados disponibles para filas -->
<tr class="table-row-success">...</tr>  <!-- Verde: completado/éxito -->
<tr class="table-row-warning">...</tr>  <!-- Amarillo: advertencia -->
<tr class="table-row-error">...</tr>    <!-- Rojo: error/crítico -->
<tr class="table-row-info">...</tr>     <!-- Azul: información -->
<tr class="table-row-active">...</tr>   <!-- Gris: activo/seleccionado -->

Tabla Ordenable

Nombre ↓ Edad Departamento Salario ↑
Alejandra Ruiz 28 Desarrollo $85,000
Bruno Mendoza 34 Marketing $75,000
Carolina Vega 31 Diseño $72,000
Diego Santos 29 Desarrollo $88,000 
<table class="table table-sortable">
  <thead>
    <tr>
      <th class="sort-asc">Nombre</th>    <!-- Ordenado ascendente -->
      <th class="sort-desc">Fecha</th>   <!-- Ordenado descendente -->
      <th>Otro campo</th>              <!-- Sin ordenar -->
    </tr>
  </thead>
</table>

Tablas Responsive

Tabla Responsive Básica

Scroll horizontal automático cuando el contenido no cabe en pantalla.

ID Nombre Completo Email Teléfono Empresa Departamento Cargo Fecha Inicio Salario Estado Acciones
#001 Ana María García López ana.garcia@empresa.com +34 600 123 456 TechCorp Solutions Desarrollo Frontend Senior Developer 15 Ene 2022 $85,000 Activo
#002 Carlos Rodríguez Martín carlos.rodriguez@empresa.com +34 600 654 321 InnovateLab Inc Marketing Digital Marketing Manager 20 Mar 2021 $72,000 Activo 
<div class="table-responsive">
  <table class="table">
    <!-- Tabla con scroll horizontal automático -->
  </table>
</div>

<!-- Responsive en breakpoints específicos -->
<div class="table-responsive-sm">...</div> <!-- < 576px -->
<div class="table-responsive-md">...</div> <!-- < 768px -->
<div class="table-responsive-lg">...</div> <!-- < 992px -->

Tabla Mobile Stack

En dispositivos móviles, las filas se convierten en cards apiladas para mejor legibilidad.

Producto Precio Stock Estado Acciones
iPhone
iPhone 15 Pro
128GB - Titanio Natural
$1,199.00 23 unidades Disponible
MacBook
MacBook Air M3
512GB - Plata
$1,499.00 5 unidades Pocas existencias 
<table class="table table-mobile">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Email</th>
      <th>Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Nombre">Ana García</td>
      <td data-label="Email">ana@empresa.com</td>
      <td data-label="Estado">Activo</td>
    </tr>
  </tbody>
</table>

📱 Funcionamiento Mobile Stack

  • En móvil: Headers ocultos, cada fila se convierte en card
  • Atributo data-label se usa como etiqueta en móvil
  • Automático: Responsive sin configuración adicional
  • Accesible: Mantiene la semántica de tabla

Comparación Responsive

📊 Table Responsive

  • Scroll horizontal cuando no cabe
  • Mantiene estructura de tabla
  • Ideal para: Muchas columnas
  • UX: Familiar pero requiere scroll
Recomendado para desktop

📱 Table Mobile

  • Cards apiladas en móvil
  • Cambia estructura completamente
  • Ideal para: Consumo de datos
  • UX: Optimizada para touch
Recomendado para móvil

Componentes de Tabla

Avatar en Tabla

Usuario Rol Última conexión Estado
Avatar
Ana Silva
ana.silva@empresa.com
Administrador Hace 5 minutos En línea
JM
Juan Martínez
juan.martinez@empresa.com
Editor Hace 2 horas Ausente
LC
Laura Castro
laura.castro@empresa.com
Viewer Ayer Desconectado 
<td>
  <div class="table-avatar">
    <img src="avatar.jpg" class="avatar" alt="Usuario">
    <div>
      <div>Nombre Usuario</div>
      <small class="text-muted">email@empresa.com</small>
    </div>
  </div>
</td>

<!-- Con placeholder -->
<td>
  <div class="table-avatar">
    <div class="avatar-placeholder">AB</div>
    <span>Nombre Usuario</span>
  </div>
</td>

Indicadores de Estado

Servicio Estado Uptime Última revisión
API Gateway Operativo 99.9% Hace 1 minuto
Base de Datos Degradado 98.5% Hace 15 minutos
Servicio de Email Caído 85.2% Hace 2 horas
CDN Operativo 100% Hace 30 segundos 
<span class="table-status status-active">Activo</span>
<span class="table-status status-inactive">Inactivo</span>
<span class="table-status status-warning">Advertencia</span>
<span class="table-status status-error">Error</span>

Acciones de Tabla

Documento Tipo Tamaño Modificado Acciones
📄
Propuesta_Comercial.pdf
 PDF 2.4 MB Hace 2 horas
📊
Reporte_Ventas_Q1.xlsx
 Excel 890 KB Ayer 
<td>
  <div class="table-actions">
    <button class="btn btn-outline-primary btn-sm">Editar</button>
    <button class="btn btn-outline-secondary btn-sm">Ver</button>
    <button class="btn btn-outline-danger btn-sm">Eliminar</button>
  </div>
</td>

Caption y Utilidades

📈 Resumen de ventas del último trimestre
Datos actualizados cada hora
Producto Vendidos Ingresos Tendencia
iPhone 15 Pro Max 1,247 $1,496,530 📈
Admin Activo
JL
Juan López
juan.lopez@empresa.com Editor Activo
MC
María Chen
maria.chen@empresa.com Viewer Inactivo 
<!-- Tabla básica mejorada -->
<table class="table">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Email</th>
      <th>Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana Martín</td>
      <td>ana@empresa.com</td>
      <td>Activo</td>
    </tr>
  </tbody>
</table>

Mejoras Automáticas

🎨 Visuales

  • Sombras: Box-shadow suave y moderna
  • Bordes: Border-radius XL (1rem)
  • Overflow: Hidden para contenido limpio
  • Headers sticky: Se mantienen visibles al scroll
  • Transiciones: Efectos suaves en hover

📝 Tipografía

  • Headers: Texto uppercase con mejor spacing
  • Padding: Optimizado para legibilidad
  • Font weights: Jerarquía visual clara
  • Alineación: Vertical middle por defecto
  • Colores: Contraste mejorado

Tamaños de Tablas

Tabla Small
Producto Precio Stock
Auriculares $79.99 156
Teclado $129.99 89
Tabla Large
Proyecto Cliente Progreso Fecha límite
Rediseño Web TechCorp Inc. 75% 25 Mar 2024
App Mobile StartUp ABC 45% 15 Abr 2024 
<!-- Tamaños disponibles -->
<table class="table table-sm">...</table>  <!-- Padding reducido -->
<table class="table">...</table>         <!-- Padding estándar -->
<table class="table table-lg">...</table> <!-- Padding amplio -->

Con Header y Footer

Producto Cantidad Precio Unit. Total
Laptop Pro 2 $1,299.99 $2,599.98
Mouse Wireless 3 $49.99 $149.97
Monitor 4K 1 $599.99 $599.99
Subtotal $3,349.94
Impuestos (21%) $703.49
Total $4,053.43 
<table class="table">
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>$100</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <th>$100</th>
    </tr>
  </tfoot>
</table>

Variantes de Tablas

Tabla con Hover

Usuario Último acceso Sesiones Estado
JS
Julia Silva
Hace 2 minutos 156 Online
RM
Roberto Morales
Hace 15 minutos 89 Ausente
LC
Laura Castro
Hace 1 hora 234 Online 
<table class="table table-hover">
  <!-- Efecto hover con elevación sutil -->
</table>

Tabla con Rayas

ID Producto Categoría Stock Precio
#001 iPhone 15 Pro
En esta página