Elemento tfoot en HTML

Un elemento html tfoot define un conjunto de líneas que resumen las columnas del elemento <table>.

Ejemplo de una tabla con tres secciones: encabezado (a través del elemento <thead>), cuerpo (a través del elemento <tbody>) y pie de página (a través del elemento <tfoot>):

< table > 
  < thead > 
    < tr > 
      < th > encabezado 1 </ th > 
      < th > encabezado 2 </ th > 
    </ tr > 
  </ thead > 
  < tbody > 
    < tr > 
      < td > celda normal 1 </ td > 
      < td > celda normal 2 </ td > 
    </ tr > 
  </ tbody >
  < tfoot > 
    < tr > 
      < th > Apéndice 1 </ th > 
      < th > Apéndice 2 </ th > 
    </ tr > 
  </ tfoot > 
</ table >

Para ver otros ejemplos de este elemento, consulte la página del elemento <table>.

Etiqueta html tfoot

Clasificaciones de contenido	No hay.
Contenido permitido	Elemento `<tr>` cero veces o más.
Acrónimo	No se puede omitir la etiqueta de inicio.La etiqueta final de un elemento se puede omitir `<tfoot>` si no hay otro contenido en el elemento `<table>` principal.
Elementos del padre	El elemento `<table>`, y el elemento `<tfoot>` deben estar después de cualquier `<caption>`, `<colgroup>`, `<thead>`, `<tbody>` y `<tr>` tenga en cuenta que esto es obligatorio en HTML5.
Interfaz DOMO	`HTMLTableSectionElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento html tfoot se pueden utilizar propiedades globales.

`align`

Esta propiedad se utiliza para especificar cómo se alinea cada celda del grupo y acepta uno de los siguientes valores:

left: Muestra el contenido a la izquierda de la celda
center: centra el contenido en la celda
right: Muestra el contenido a la derecha de la celda
justify: Muestra el contenido de la línea completa.

Vale la pena señalar que esta característica ha sido descuidada en HTML 4 y eliminada en HTML5, y no está permitido su uso, pero debe formatearse usando CSS, asignando uno de los valores left o center o right o justify a la propiedad text-align.

`bgcolor`

Esta propiedad define el color de fondo de cada celda del conjunto y puede aceptar valores hexadecimales sRGB, precedidos por un carácter #. Se pueden utilizar los siguientes nombres de colores predefinidos:

`black` = «# 000000»	`green` = «# 008000»
`silver` = «# C0C0C0»	`lime` = «# 00FF00»
`gray` = «# 808080»	`olive` = «# 808000»
`white` = «#FFFFFF»	`yellow` = «# FFFF00»
`maroon` = «# 800000»	`navy` = «# 000080»
`red` = «# FF0000»	`blue` = «# 0000FF»
`purple` = «# 800080»	`teal` = «# 008080»
`fuchsia` = «# FF00FF»	`aqua` = «# 00FFFF»

Vale la pena señalar que esta función no es estándar y solo la utilizan algunas versiones de Internet Explorer, pero el elemento debe formatearse <tfoot> con CSS. Se puede aplicar un efecto similar a esta propiedad mediante la propiedad background-color en celdas <td> o celdas <th>.

`valign`

Esta propiedad se utiliza para especificar cómo es la alineación vertical de cada celda del conjunto y acepta uno de los siguientes valores:

baseline: Muestra el contenido lo más cerca posible de la parte inferior de la celda, pero la alineación estará en la línea de base de los caracteres en lugar de en la parte inferior, y si los caracteres son del mismo tamaño, este valor tendrá el mismo efecto que el valor bottom.
bottom: Muestra el contenido lo más cerca posible de la parte inferior de la celda.
middle: Centra el texto en la celda verticalmente.
top: Muestra el contenido lo más cerca posible de la parte superior de la celda.

Vale la pena señalar que esta función se ha descuidado en HTML 4 y se ha eliminado en HTML5, y no está permitido su uso, pero debe formatearse con CSS a través de la propiedad vertical-align.

Formato predeterminado

La mayoría de los navegadores muestran el elemento <tfoot> con la propiedad establecida display en table-footer-group, centrada verticalmente ( vertical-align) y heredando el valor de la propiedad border-color:

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