Clase 5: Tablas en HTML y Bootstrap

Estructura de tablas, elementos, estilos de Bootstrap y ejemplos prácticos

"Las tablas organizan datos de forma clara y estructurada, facilitando su lectura y comprensión"

Introducción Sintaxis Ejemplos Bootstrap Prácticos Cuestionario

1) Introducción a las Tablas HTML

Una tabla es un elemento HTML que organiza datos en filas y columnas, facilitando su lectura y comparación. Son ideales para mostrar información estructurada como listas de productos, horarios, estadísticas y otros datos tabulares.

¿Cuándo usar tablas?

Componentes básicos de una tabla:

  • <table> - Contenedor principal
  • <thead> - Encabezados (cabecera)
  • <tbody> - Cuerpo de datos
  • <tfoot> - Pie de tabla (totales, notas)
  • <tr> - Fila (table row)
  • <th> - Celda de encabezado
  • <td> - Celda de dato

2) Estructura y Sintaxis de Tablas

Tabla Básica

La estructura más simple de una tabla en HTML:

HTML
<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>Ciudad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Juan</td>
      <td>28</td>
      <td>Madrid</td>
    </tr>
    <tr>
      <td>María</td>
      <td>32</td>
      <td>Barcelona</td>
    </tr>
  </tbody>
</table>

Explicación

<table> - Envuelve toda la tabla

<thead> - Contiene los encabezados (se repite en cada página si se imprime)

<tbody> - Contiene las filas de datos

<tr> - Define una fila (table row)

<th> - Celda de encabezado (table header) - aparece en negrita y centrada

<td> - Celda de dato (table data) - contenido regular

Tabla con Pie de Tabla (tfoot)

Útil para totales o notas finales:

HTML
<table>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
      <th>Cantidad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$800</td>
      <td>5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total:</th>
      <td>5 unidades</td>
    </tr>
  </tfoot>
</table>

Atributos Importantes

colspan - Combina celdas horizontalmente. Ej: colspan="2"

rowspan - Combina celdas verticalmente. Ej: rowspan="3"

border - Establece bordes. Ej: border="1"

3) Ejemplos de Tablas Básicas

Ejemplo 1: Tabla de Calificaciones

Estudiante Matemáticas Español Inglés Promedio
Carlos 85 90 88 87.67
Ana 92 88 95 91.67
Luis 78 82 80 80

Ejemplo 2: Tabla con rowspan y colspan

Información Personal Contacto
Nombre Edad
Pedro García 35 pedro@email.com
Sofia López 28 sofia@email.com

Ejemplo 3: Tabla de Precios

Producto Precio Stock Disponible
Monitor 24" $250 15 Sí
Teclado Mecánico $120 0 No
Mouse Inalámbrico $35 42 Sí
Total de productos 3 tipos 57 unidades

4) Tablas con Bootstrap

Bootstrap proporciona clases CSS predefinidas que mejoran significativamente la apariencia y funcionalidad de las tablas sin necesidad de escribir CSS adicional.

Clase Base: .table

La clase .table es obligatoria para todas las tablas de Bootstrap:

HTML
<table class="table">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Email</th>
    </tr>
  </thead>
</table>

Tabla Bootstrap Básica

Producto Categoría Precio Estado
Laptop HP Electrónica $899 Disponible
Webcam Logitech Accesorios $79 Disponible
Monitor ASUS Electrónica $299 Agotado

Clases de Bootstrap para Tablas

1. Estilos de Encabezado

.table-dark - Encabezado oscuro

.table-light - Encabezado claro

Comparación:

Con .table-dark

Nombre Rol
Juan Desarrollador

Con .table-light

Nombre Rol
Ana Diseñadora

2. Colores de Filas

.table-primary - Azul

.table-success - Verde (éxito)

.table-danger - Rojo (peligro)

.table-warning - Amarillo (advertencia)

.table-info - Cian (información)

.table-secondary - Gris

.table-light - Claro

.table-dark - Oscuro

Estado Ejemplo
Primary Información importante
Success Operación completada
Danger Error o peligro
Warning Precaución
Info Información adicional

3. Estilos Adicionales

.table-striped - Alterna colores de filas (efecto cebra)

.table-hover - Resalta fila al pasar el mouse

.table-bordered - Agrega bordes a todas las celdas

.table-borderless - Elimina todos los bordes

.table-sm - Tabla compacta (menos relleno)

.table-responsive - Se adapta a pantallas pequeñas

Tabla Striped (Rayas)

ID Cliente Compra Total
001 Juan Martinez Monitor LG $350
002 Sofia García Teclado $95
003 Carlos López Mouse $40
004 Maria Pérez Webcam $85

Tabla Hover (Interactiva)

Curso Instructor Estudiantes
HTML Básico Pedro Sánchez 25
CSS Avanzado Laura García 18
JavaScript Roberto López 32
React.js Diana Martínez 21

Tabla Bordered (Con Bordes)

Mes Ventas Gastos Ganancia
Enero $5,000 $2,000 $3,000
Febrero $6,500 $2,500 $4,000
Marzo $7,200 $3,000 $4,200

Tabla Responsiva

Nota: La clase .table-responsive hace que la tabla sea scrolleable en dispositivos pequeños.

Producto Descripción Precio Stock Proveedor
Laptop Dell Computadora portátil 15" $899 12 Dell Inc
Mouse Logitech Mouse inalámbrico $45 50 Logitech

Combinación de Clases

HTML
<table class="table table-striped table-hover table-bordered">
  <thead class="table-dark">
    ...
  </thead>
</table>
Evento Fecha Lugar Asistentes
Conferencia Tech 15/06/2024 Madrid 200
Taller CSS 22/06/2024 Barcelona 45
Meetup JavaScript 29/06/2024 Valencia 60

5) Ejemplos Prácticos Completos

Ejemplo 1: Tabla de Empleados Completa

ID Nombre Puesto Departamento Salario Estado
E001 Juan Carlos Desarrollador Senior IT $4,500 Activo
E002 María García Diseñadora UX Diseño $3,800 Activo
E003 Roberto López Project Manager Gestión $4,200 Activo
E004 Ana Martínez Especialista QA Testing $3,500 En Vacaciones
Total Departamentos: 4 Nómina Total: $16,000

Ejemplo 2: Tabla de Productos E-commerce

SKU Nombre Producto Categoría Precio Stock Disponibilidad
PRD-001 Laptop Gamer ASUS Electrónica $1,299 8 En Stock
PRD-002 Monitor 4K LG Periféricos $499 15 En Stock
PRD-003 Teclado Mecánico RGB Accesorios $199 0 Agotado
PRD-004 Mouse Inalámbrico Pro Accesorios $79 32 En Stock

Ejemplo 3: Calendario de Eventos

JUNIO 2024
Lun Mar Mié Jue Vie Sáb Dom
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16

6) Cuestionario

Responde las siguientes preguntas para verificar tu comprensión.

Pregunta 1: ¿Cuál es la etiqueta correcta para crear una tabla en HTML?

Pregunta 2: ¿Cuál es la diferencia entre <th> y <td>?

Pregunta 3: ¿Qué hace la clase Bootstrap .table-striped?

Pregunta 4: ¿Para qué sirve el atributo colspan?

Pregunta 5: ¿Cuál de estas clases de Bootstrap añade efectos hover a las filas?

Pregunta 6: ¿Qué debe contener la etiqueta <thead>?

Pregunta 7: ¿Cuál es la clase Bootstrap mínima requerida para estilizar una tabla?

Pregunta 8: ¿Qué clase Bootstrap hace que la tabla sea responsiva en dispositivos pequeños?

Pregunta 9: ¿Cuál es el atributo que combina celdas verticalmente?

Pregunta 10: ¿Cuál es el propósito principal de una tabla HTML?