Definición destacada
¿Como funciona el comando en HTML5: 'tfoot'?
Última modificación: 2024-06-18
Descripción detallada del elemento <tfoot> en HTML5
El 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.
Atributos del elemento <tfoot>
El elemento <tfoot>, como muchos otros elementos en HTML5, soporta una variedad de atributos globales:
-
Atributos globales:
- accesskey: Proporciona una tecla de acceso directo para enfocar el elemento.
- class: Define uno o más nombres de clase para el elemento, permitiendo la asociación con estilos CSS.
- contenteditable: Indica si el contenido del elemento es editable.
- contextmenu: Especifica un menú contextual para el elemento.
- dir: Define la dirección del texto, pudiendo ser "ltr" (de izquierda a derecha) o "rtl" (de derecha a izquierda).
- draggable: Especifica si el elemento es arrastrable.
- hidden: Indica que el elemento no es relevante actualmente.
- id: Define un identificador único para el elemento.
- lang: Establece el idioma del contenido del elemento.
- spellcheck: Indica si el contenido debe ser revisado ortográficamente.
- style: Contiene declaraciones CSS para styles en línea.
- tabindex: Especifica el orden de tabulador del elemento.
- title: Proporciona un texto alternativo que suele mostrarse como un tooltip (consejo emergente) en el usuario descanso el cursor sobre el elemento.
- translate: Indica si el contenido del elemento debe ser traducido.
-
Atributos de eventos: Estos son atributos que permiten definir manejadores de eventos en el documento HTML para cubrir eventos como click, mouseover, focus, etc.
- onblur, onfocus, onclick, ondblclick, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, entre otros.
Uso del elemento <tfoot> en HTML5
Usualmente, 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.
Ejemplos sencillos de uso
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.
Consideraciones Finales
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.