Pie de tabla HTML

Ya hemos visto cómo podemos poner una cabecera a una tabla HTML, ahora vamos a poner un pie de tabla HTML. Los pie de tabla HTML se suelen utilizar para poner resúmenes, totalizadores,…

Elemento tfoot para el pie de tabla

Para poder crear un pie de tabla HTML vamos a recurrir al agrupador tfoot. El elemento tfoot será el que agrupe a las filas que representen el pie de tabla HTML.

Lo primero será echar un vistazo a la tabla que queremos representar y ver como hacer el pie de tabla HTML.

Cabecera 1	Cabecera 2	Cabecera 3
Celda 1.1	Celda 1.2	Celda 1.3
Celda 2.1	Celda 2.2	Celda 2.3
Celda 3.1	Celda 3.2	Celda 3.3
Sumatorio 1	Sumatorio 2	Sumatorio 3

undefined En este ejemplo el pie de página HTML a implementar sería el que tiene los sumatorios.

El código HTML que necesitamos es el siguiente:

<tfoot>
<tr>
  <td>Sumatorio 1</td>
  <td>Sumatorio 2</td>
  <td>Sumatorio 3</td>
</tr>
</tfoot>

Como podemos ver el elemento tfoot agrupa una fila definida por el elemento tr y las celdas td. Con lo cual vemos que es sencillo modificar una tabla tipo.

Pero hay que tener una cosa en cuenta. Y es que el elemento tfoot deberá de ir justo detrás del elemento thead. Es decir, la fila de sumatorios NO será la última de nuestro código, si no la segunda.

Así para tener un pie de tabla HTML deberemos de codificar de la siguiente forma:

<table>
<thead>
<tr>
  <th>Cabecera 1</th>
  <th>Cabecera 2</th>
  <th>Cabecera 3</th>
</tr>
</thead>
<tfoot>
<tr>
  <td>Sumatorio 1</td>
  <td>Sumatorio 2</td>
  <td>Sumatorio 3</td>
</tr>
</tfoot>
<tr>
  <td>Celda 1.1</td>
  <td>Celda 1.2</td>
  <td>Celda 1.3</td>
</tr>
...
</table>