Elementos de HTML: <tfoot>

Elemento de tablas en el diseño de páginas web en HTML

¿Qué hace <tfoot>?

El elemento <tfoot> identifica uno o más elementos <tr>, los cuales contienen contenido de resumen de las columnas de una tabla. Así cada columna se identifica por el elemento <tr>. Sin embargo, el elemento <tfoot> debe ser el descendiente directo de un elemento <table>. En HTML5, <tfoot> se puede colocar antes o después de los elementos <tbody> y <tr>, pero debe aparecer después de cualquier elemento <caption>, <colgroup> y <thead>.

Contenido

1 Ejemplo de código

2 Sumar el contenido de la tabla

Ejemplo de código

<table>

  <thead>

    <tr>

      <th> Números </th>

      <th> Cartas </th>

      <th> Colores </th>

    </tr>

  </thead>

  <tfoot>

    <tr>

      <td> 6 </td>

      <td> ABC </td>

      <td> Primario </td>

    </tr>

  </tfoot>

  <tbody>

    <tr>

      <td> 1 </td>

      <td> A </td>

      <Td> Rojo </td>

    </tr>

    <tr>

      <td> 2 </td>

      <td> B </td>

Diseño de paginas web

      <td> Amarillo </td>

    </tr>

    <tr>

      <td> 3 </td>

      <td> C </td>

      <td> Azul </td>

    </tr>

  </tbody>

</table>

El elemento <tfoot> se utiliza para proporcionar información resumida sobre el contenido de una tabla HTML. Puede aparecer antes o después del elemento tbody de la tabla, pero se renderizará en la parte inferior de la tabla independientemente de dónde aparezca en el HTML (a menos que se sustituya el comportamiento predeterminado por CSS).

Es una buena idea usar <tfoot>, <tbody> y <thead> para organizar tablas que contienen conjuntos de datos complejos. Estos elementos pueden ser utilizados por navegadores y desarrolladores para permitir a los usuarios desplazar el contenido de la tabla independientemente del encabezado y pie de página, proporcionando una mejor experiencia de usuario en general.

Además podrá anexarse líneas a una tabla con un poco de trabajo en CSS, por lo cual te suguerimos que tomes un curso de CSS. Esto de ayudará atener una comprensión más clara del uso de estas plataformas de diseño web.