Etiqueta HTML <tfoot>
La etiqueta <tfoot> define el pie de una tabla HTML. Se usa junto con <thead> y <tbody>. Ver ejemplos.
La etiqueta <tfoot> define el pie de una tabla HTML. Se usa junto con los elementos <thead> y <tbody>, que agrupan respectivamente las filas de encabezado y del cuerpo de la tabla.
El pie es el lugar natural para totales de columnas, sumas, promedios u otras filas de resumen que agregan los datos del cuerpo. Agrupar estas filas con <tfoot> en lugar de un simple <tr> otorga a la tabla una estructura semántica clara, lo que ayuda a las tecnologías de asistencia a describir la tabla a los usuarios de lectores de pantalla.
¿Por qué usar <tfoot> ?
- Semántica y resúmenes. El pie indica "estas filas resumen la tabla" — totales, subtotales, recuentos o notas. Con frecuencia, un único
<th>o<td>abarca todo el ancho concolspan. - Comportamiento al imprimir y al desplazarse. Cuando una tabla larga se imprime en varias páginas, algunos agentes de usuario repiten
<thead><tfoot>overflow), el pie puede permanecer fijo en la parte inferior. - Accesibilidad. Los grupos explícitos de encabezado, cuerpo y pie proporcionan a los lectores de pantalla una estructura más significativa que una lista plana de filas.
¿Dónde va <tfoot> ?
La etiqueta <tfoot> debe declararse dentro del elemento <table>, después de los elementos <caption> y <colgroup> (si los hay).
En HTML5, <tfoot> puede aparecer antes o después de <tbody> en el código fuente. La antigua regla de HTML4 que exigía que <tfoot> fuera antes de <tbody> está obsoleta. De cualquier manera, los navegadores siempre renderizan el pie en la parte inferior de la tabla, por lo que colocarlo al final (justo después del cuerpo) es la opción más legible.
La etiqueta <tfoot> debe contener al menos una etiqueta <tr>.
Los elementos <thead> , <tbody> y <tfoot> no afectan el diseño de la tabla de forma predeterminada. Use propiedades CSS para personalizar la apariencia de la tabla.
Sintaxis
La etiqueta <tfoot> va en pares. El contenido se escribe entre las etiquetas de apertura ( <tfoot> ) y cierre ( </tfoot> ).
Etiqueta HTML <tfoot>
<table>
<thead> ... </thead>
<tbody> ... </tbody>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
</table>Ejemplo con una fila de totales
Este ejemplo usa <thead> , <tbody> y <tfoot> juntos. El pie contiene una fila de resumen que totaliza los valores del cuerpo:
<!DOCTYPE html>
<html>
<head>
<title>tfoot totals row</title>
<style>
table { width: 360px; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
tfoot td { font-weight: bold; background-color: #f2f2f2; }
</style>
</head>
<body>
<table>
<caption>Monthly Sales</caption>
<thead>
<tr>
<th>Product</th>
<th>Units</th>
</tr>
</thead>
<tbody>
<tr>
<td>Keyboards</td>
<td>40</td>
</tr>
<tr>
<td>Mice</td>
<td>35</td>
</tr>
<tr>
<td>Monitors</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>
</table>
</body>
</html>Observe que <tfoot> se escribe después de <tbody> en el código fuente, y aun así el pie se renderiza al final — exactamente donde se lee.
Estructuración de tablas complejas
Use los elementos <thead> , <tbody> y <tfoot> para organizar tablas que contienen conjuntos de datos grandes o complejos. Facilitan la lectura del código fuente, permiten dar estilo a cada sección de forma independiente y mejoran la accesibilidad. Para habilitar el desplazamiento independiente del cuerpo manteniendo el encabezado y el pie visibles, aplique propiedades CSS overflow a <tbody> .
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| align | right, left, center, justify, char | Establece la alineación horizontal del contenido dentro del elemento <tfoot> . Este atributo no es compatible con HTML5. |
| bgcolor | bgcolor | Establece el color de fondo de las filas dentro del elemento <tfoot> . Este atributo no es compatible con HTML5. |
| char | character | Especifica la alineación del contenido dentro del elemento <tfoot> respecto a un carácter. Se usa solo cuando el atributo align="char". Este atributo no es compatible con HTML5. |
| charoff | number | Especifica el número de caracteres que el contenido dentro del elemento <tfoot> se alineará desde el carácter especificado por el atributo char. Se usa solo cuando el atributo align="char". Este atributo no es compatible con HTML5. |
| valign | top, bottom, middle, baseline | Especifica la alineación vertical del contenido dentro del elemento <tfoot> . Este atributo no es compatible con HTML5. |
Nota: Todos los atributos listados anteriormente están obsoletos en HTML5. Use CSS en su lugar. La tabla siguiente muestra el reemplazo moderno para cada uno:
| Atributo obsoleto | Reemplazo CSS |
|---|---|
align | text-align |
valign | vertical-align |
bgcolor | background-color |
La etiqueta <tfoot> también admite los Atributos Globales y los Atributos de Evento.
Cómo dar estilo a una etiqueta HTML <tfoot>
tfoot {
background-color: #f2f2f2; /* replaces bgcolor */
font-weight: bold;
text-align: right; /* replaces align */
vertical-align: middle; /* replaces valign */
}Consulte el capítulo Tablas CSS para conocer más formas de dar estilo a las secciones de una tabla.