Etiqueta tfoot

Índice

Ejemplos:

La etiqueta tfoot incluye a un bloque de filas <tr> lo cual representa a la parte del pie de la tabla <table>. Esta etiqueta puede ser de gran utilidad para poner celdas que facilita al cuerpo de la tabla <tbody>, resúmenes o resultados para la información o dato de cada columna del cuerpo <tbody>.

Esta etiqueta tfoot solamente podría estar declarado una vez en la tabla y su ubicación debe de estar justamente después del cuerpo de la tabla <tbody>.

Importante: En versiones previas del estándar, la etiqueta tfoot tenía diferentes atributos de presentación que han sido quitadas en HTML5. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Antes, en HTML5 permitía que tfoot presidia(antes) al cuerpo <tbody> en el código de la tabla, poniendo en manos de los navegadores su corrección al final de la tabla durante la ejecución. Esta conducta ya no es válida, en conclusion la etiqueta tfoot debería ir siempre luego del cuerpo de la tabla.

indice del tema

Ejemplos:

En este presente ejemplo tenemos a una tabla <table> cuenta con una parte de encabezado <thead>, Y un pie <tfoot> en esta parte nos mostrará una repetición de la cabecera, mientras más contenido tengamos en el cuerpo de la tabla no podremos ver la cabecera de la columna, para ello nos facilitará verlas, así también podría tener un resultado de cada columna.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tabla</title>
</head>
<style type="text/css">
    table,tr,th ,td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    table {
        color: green;
    }
    th{
        text-align: center;
    }
    td{
        text-align: center;
    }
</style>
<body>
    <table style="width: 100%; background-color: white">
      <thead style="background-color: black;">
       <tr>
           <th>ID</th>
           <th>nombre</th>
           <th>cantidad</th>
       </tr>
       </thead>
       <tbody>
        <tr>
            <td>1</td>
            <td>pedro</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>rosa</td>
            <td>3</td>
        </tr>
        </tbody>
        <tfoot></tfoot>
        <tfoot style="background-color: black">
            <tr>
           <th>ID</th>
           <th>nombre</th>
           <th>cantidad</th>
       </tr>
        </tfoot>
    </table>
</body>
</html>

Nota: A la hora de hacer una tabla con mayor información es muy importante tener una parte de pie de la tabla, porque mientras más contenido tengas se perderá la cabecera de cada columna, por lo tanto pondrías en el pie de la tabla las cabeceras de cada columna tal como está en cabecera. Como también podríamos poner un resumen del contenido, si es un información de cantidad lo podríamos poner el total en el pie de la página y entre otras cosas más.