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:

html<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>

csstfoot {
  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:

html<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>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Ver también