Etiqueta tfoot
La etiqueta tfoot define el pie de una tabla.
Se utiliza para agrupar filas de tal
manera que se puedan aplicar estilos CSS
a un grupo de forma inmediata. Solo puede haber
una etiqueta tfoot por tabla.
La etiqueta tfoot se utiliza a menudo junto
con thead
y tbody
para definir la cabecera, el cuerpo principal
y el pie de una tabla HTML. Por defecto,
el navegador colocará el contenido de tfoot
en la parte inferior de la tabla, y thead -
en la superior.
Ejemplo
Apliquemos el color rojo al texto del grupo de filas
agrupadas por la etiqueta tfoot
utilizando la propiedad color:
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Salario</th>
</tr>
</thead>
<tbody>
<tr>
<td>nombre1</td>
<td>apellido1</td>
<td>200$</td>
</tr>
<tr>
<td>nombre2</td>
<td>apellido2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>total: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Ejemplo
Y aquí, veamos cómo thead
no está en la parte superior, y tfoot no está en la inferior,
sin embargo, el navegador los coloca en sus
posiciones correctas:
<table>
<tfoot>
<tr>
<td>total: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>nombre1</td>
<td>apellido1</td>
<td>200$</td>
</tr>
<tr>
<td>nombre2</td>
<td>apellido2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Salario</th>
</tr>
</thead>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
