Pie de tabla HTML

04/Jun/2015 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,...

Para poder crear un pie de tabla HTML vamos a recurrir al agrupador ftoot. El elemento ftoot 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 1Cabecera 2Cabecera 3
Sumatorio 1Sumatorio 2Sumatorio 3
Celda 1.1Celda 1.2Celda 1.3
Celda 2.1Celda 2.2Celda 2.3
Celda 3.1Celda 3.2Celda 3.3

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:

  1. <td>Sumatorio 1</td>
  2. <td>Sumatorio 2</td>
  3. <td>Sumatorio 3</td>
  4. </tr>
  5. </tfoot>

Como podemos ver el elemento ftoot 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 ftoot 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:

  1. <th>Cabecera 1</th>
  2. <th>Cabecera 2</th>
  3. <th>Cabecera 3</th>
  4. </tr>
  5. </thead>
  6. <td>Sumatorio 1</td>
  7. <td>Sumatorio 2</td>
  8. <td>Sumatorio 3</td>
  9. </tr>
  10. </tfoot>
  11. <td>Celda 1.1</td>
  12. <td>Celda 1.2</td>
  13. <td>Celda 1.3</td>
  14. </tr>
  15. ...
  16. </table>

Vídeos sobre HTML


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D