Índice

Estructuración de la tabla

HTML5 proporciona etiquetas para estructurar de forma lógica el contenido de una tabla.

Estas etiquetas son:

  • <thead> para agrupar la información referente al encabezado de la tabla, como por ejemplo el título y el subtítulo de las columnas.

  • <tbody> para el cuerpo de la tabla, es decir, el conjunto de sus datos.

  • <tfoot> para el contenido del pie de página, como por ejemplo anotaciones o una leyenda.

Esta división lógica no afecta en nada a la presentación por defecto de la tabla, aunque puede retomarse en las propiedades de estilo para adornar dicha presentación.

Destaquemos que la etiqueta <tfoot> debe situarse antes de la etiqueta <tbody>, de modo que el navegador pueda prever el pie de página antes de la recepción de las filas con los datos.

Ejemplo

Apliquemos estas etiquetas a una tabla.

<!DOCTYPE html> 
<html lang="es"> 
<head> 
<title>Html5</title> 
<meta charset="UTF-8"> 
<style> 
table { border: 1px solid black; 
        border-collapse: collapse; 
        width: 250px;} 
td { border: 1px solid black;} 
</style> 
</head> 
<body> 
<table> 
<thead> 
<tr> 
<td colspan="2" style="text-align: center;">Fusión de filas y columnas</td> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<td colspan="2" ...