<tfoot> en HTML5El elemento <tfoot> es parte de la especificación HTML5 y se utiliza para agrupar el contenido del pie de una tabla. Específicamente, <tfoot> contiene una o más filas de resumen o agregación, como totales, promedios u otra información que desea destacar como la conclusión de los datos presentados en la tabla.
<tfoot>El elemento <tfoot>, como muchos otros elementos en HTML5, soporta una variedad de atributos globales:
Atributos globales:
Atributos de eventos: Estos son atributos que permiten definir manejadores de eventos en el documento HTML para cubrir eventos como click, mouseover, focus, etc.
<tfoot> en HTML5Usualmente, el elemento <tfoot> se incluye después del elemento <thead> y antes del elemento <tbody>. Esto permite a los navegadores renderizar la tabla en conjunto y eventualmente desplazarse, separando los pies de columna de los datos para proporcionar capacidades de scrolling más eficientes.
Ejemplo 1: Tabla con titulo, encabezado, cuerpo y pie de tabla en HTML 5
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de `<tfoot>`</title>
<style>
table { border-collapse: collapse; width: 50%; }
th, td { border: 1px solid black; padding: 8px; text-align: left; }
tfoot { font-weight: bold; }
</style>
</head>
<body>
<table>
<caption>Informe de Ventas</caption>
<thead>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Producto 1</td>
<td>$10</td>
<td>2</td>
<td>$20</td>
</tr>
<tr>
<td>Producto 2</td>
<td>$15</td>
<td>3</td>
<td>$45</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total General</td>
<td>$65</td>
</tr>
</tfoot>
</table>
</body>
</html>En este ejemplo, utilizamos <tfoot> para agregar una fila al final de la tabla que resume el total general de la suma de los productos listados. La propiedad colspan en el elemento <td> dentro del <tfoot> se utiliza para que la columna "Total General" abarque tres celdas.
Ejemplo 2: Tabla con estilos diferenciados para el pie de tabla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tabla con `<tfoot>` estilizado</title>
<style>
table {
border-collapse: collapse;
width: 70%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: right;
}
thead tr {
background-color: #f2f2f2;
}
tfoot tr {
background-color: #f9f9f9;
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>Presupuesto de Proyectos</caption>
<thead>
<tr>
<th>Proyecto</th>
<th>Costo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proyecto A</td>
<td>$2000</td>
</tr>
<tr>
<td>Proyecto B</td>
<td>$3500</td>
</tr>
<tr>
<td>Proyecto C</td>
<td>$1500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$7000</td>
</tr>
</tfoot>
</table>
</body>
</html>En este caso, hemos añadido estilos específicos a <tfoot> para que el pie de la tabla tenga un fondo distinto y un texto diferente. Esto mejora la legibilidad y destacan el total presupuestario.
El uso de <tfoot> es un estándar en la estructuración de datos tabulares que permite a los desarrolladores de HTML5 proveer una sección definida y estructurada para las conclusiones y resúmenes de las tablas. Esto no solamente mejora la organización del código HTML sino que también ofrece una mejor accesibilidad y manejo semántico de datos tabulares para tecnologías de apoyo y usuarios finales.