Etiqueta <tfoot> HTML

definición y uso

<tfoot> etiqueta se utiliza para agrupar el contenido del pie de página en una tabla HTML.

<tfoot> elemento con <thead> y <tbody> elementos combinados para especificar cada parte de la tabla (pie de página, cabecera, cuerpo).

los navegadores pueden usar estos elementos para que las cabeceras y pies de página se muestren independientemente mientras se desplaza el contenido de la tabla. Además, al imprimir tablas grandes que se extienden a múltiples páginas, estos elementos pueden hacer que las cabeceras y pies de página se impriman en la parte superior e inferior de cada página.

nota: El elemento <tfoot> debe contener uno o más <tr> etiqueta.

<tfoot> la etiqueta debe usarse en el contexto siguiente: como <table> los elementos hijos, en cualquier <caption>,<colgroup>,<thead> y <tbody> después de los elementos.

consejo:Por defecto, <thead>, <tbody> y <tfoot> los elementos no afectan el diseño de la tabla. Sin embargo, puedes usar CSS para definir sus estilos (ver ejemplos a continuación)!

ejemplo

ejemplo 1

tabla HTML que contiene <thead>, <tbody> y <tfoot>:

<table>
  <thead>
    <tr>
      <th>mes</th>
      <th>ahorros</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>enero</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Febrero</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Importe total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prueba por ti mismo

ejemplo 2

Configurar estilos de <thead>, <tbody> y <tfoot> utilizando CSS:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>mes</th>
      <th>ahorros</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>enero</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Febrero</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Importe total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prueba por ti mismo

ejemplo 3

cómo alinear <tfoot> el contenido (utilizando CSS):

<table style="width:100%">
  <tr>
    <th>mes</th>
    <th>ahorros</th>
  </tr>
  <tr>
    <td>enero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Importe total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prueba por ti mismo

ejemplo 4

cómo alinear verticalmente <tfoot> el contenido (utilizando CSS):

<table style="width:100%">
  <tr>
    <th>mes</th>
    <th>ahorros</th>
  </tr>
  <tr>
    <td>enero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Importe total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prueba por ti mismo

Atributos globales

<tfoot> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<tfoot> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <tfoot> Elemento:

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte