Curso HTML 7.5 Estructura avanzada de tablas (caption, thead, tbody, tfoot)

7.5 Estructura avanzada de tablas: <caption>, <thead>, <tbody>, <tfoot>

Para mejorar la semántica, accesibilidad y control visual de tus tablas, HTML ofrece cuatro elementos especiales que permiten estructurar la información en bloques lógicos:

• <caption>: define un título o descripción de la tabla.
• <thead>: agrupa las filas de encabezado.
• <tbody>: agrupa las filas de datos principales.
• <tfoot>: agrupa las filas de pie o totales.

<caption>: el título semántico de la tabla

El elemento <caption> aparece como primer hijo de <table> (antes de cualquier <colgroup> o <thead>) y ofrece:

• Un texto descriptivo para usuarios de lectores de pantalla.
• Un título que puede posicionarse arriba o abajo según CSS (caption-side).
• Mejora la búsqueda y referencia de la tabla en el documento.

  
  
Resumen de ventas mensuales 2023
  

    

      
Mes
      
Ventas (€)
    
  
  

    
Enero
5 000
    
Febrero
4 800
  

  

<thead>: agrupando encabezados

<thead> permite separar claramente las filas de encabezado del resto de la tabla. Sus ventajas son:

• Facilita la aplicación de estilos (color de fondo, peso de fuente).
• Automatiza la repetición de encabezados en impresión multipágina.
• Mejora la lectura programática y la navegación en tablas extensas.

  
Inventario de stock
  

    

      
Categoría
      
Unidades
    
    

      
Disponibles
      
Reservadas
    
  
  

    
Electrónica
120
30
    
Muebles
85
10
  

  

<tbody>: bloques de datos principales

El cuerpo principal de la tabla se define con uno o varios <tbody>. Cada bloque:

• Organiza filas relacionadas, útil para agrupaciones lógicas o secciones dinámicas.
• Permite estilos alternos (striped rows) por cada <tbody>.
• Facilita la inserción/eliminación programática de conjuntos de filas.

  
Ingresos trimestrales
  

    

      
Trimestre
      
Ingresos (€)
    
  
  

    
Q1
15 000
    
Q1
16 200
  
  

    
Q2
18 500
    
Q2
17 900
  

  

<tfoot>: filas de pie o totales

<tfoot> agrupa las filas de resumen o totales. Aporta:

• Un lugar semántico para cálculos finales (sumas, medias).
• Repetición automática en impresión de grandes tablas.
• Posibilidad de colocarlo en el código antes de <tbody> para rendering progresivo (histórico).

  
Gastos trimestrales
  

    

      
Trimestre
      
Gastos (€)
    
  
  
  

    

      
Total
      
67 450
    
  
  

    
Q1
22 300
    
Q2
23 150
    
Q3
21 000
  

  

Combinación completa y buenas prácticas

Para una tabla robusta y accesible, sigue este patrón:

• Inicia con <table> y un <caption> descriptivo.
• Define <colgroup> si necesitas anchos o estilos de columna.
• Añade <thead> con todos los encabezados.
• Incluye <tfoot> antes o después de <tbody> según tus necesidades.
• Utiliza uno o varios <tbody> para secciones de datos.

  
Informe anual de indicadores
  
    
    
    
    
    
  
  

    

      
Indicador
      
Q1
      
Q2
      
Q3
      
Total
    
  
  

    

      
Media
      
75%
      
80%
      
78%
      
77.7%
    
  
  

    
Ventas
70%
82%
79%
77%
    
Satisfacción
80%
78%
76%
78%
    
Retención
75%
80%
79%
78%
  

  

Con esta estructura, tu tabla será semántica, accesible y fácil de mantener. Aprovecha cada elemento para organizar tu información de forma clara y coherente.