HTML tfoot

La etiqueta <tfoot> en HTML se utiliza para definir un pie de tabla. El contenido dentro de esta etiqueta se mostrará en una fila o conjunto de filas al final de la tabla. Es comúnmente utilizado para mostrar subtotales, totales o una leyenda de la tabla.

Es importante tener en cuenta que el navegador puede mostrar el contenido de <tfoot> antes de que el contenido de <tbody> para mejorar el acceso a la información de resumen. Es importante tener en cuenta que solo puede haber una etiqueta <tfoot> dentro de una etiqueta <table> y debe ser colocada después de <tbody>.

Ejemplo de uso

Un ejemplo de uso de la etiqueta <tfoot> en HTML podría ser el siguiente:

<table>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
      <th>Cantidad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lápiz</td>
      <td>$0.50</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Borrador</td>
      <td>$0.25</td>
      <td>10</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$3.00</td>
    </tr>
  </tfoot>
</table>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se crea una tabla con una cabecera, un cuerpo y un pie de tabla. La etiqueta <thead> define la cabecera de la tabla, <tbody> define el cuerpo de la tabla y <tfoot> define el pie de tabla. En este caso el pie de tabla muestra el total de gastos.

Atributos

La etiqueta <tfoot> de HTML no tiene atributos específicos, pero puede tener los atributos globales de HTML como “id”, “class”, “style”, entre otros.

Ejemplo

Aquí te muestro un ejemplo completo de cómo utilizar la etiqueta <tfoot> con algunos de los atributos globales de HTML:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
  <tfoot id="my-table-footer" class="table-footer" style="background-color: #eee;">
    <tr>
      <td colspan="2">This is the table footer</td>
    </tr>
  </tfoot>
</table>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se utilizan los atributos “id”, “class” y “style” para dar estilos personalizados al pie de tabla. El atributo “colspan” se usa para unir varias celdas en una sola.