Tablas HTML: Cabeceras y Pié de tablas, 'thead', 'tbody' y 'tfoot'

A veces, cuando las tablas son muy largas, es conveniente ponerles cabeceras (<thead>) tanto al principio como al final, estás ultimas, pié (<tfoot>) de tabla. Cuando a una tabla se le pone cabecera y/o pié de tabla, el resto de las celdas de datos de la tabla deben definirse como cuerpo (<tbody>) de la tabla:

Estos nuevos elementos se definen de la siguiente manera:

• La cabecera de una tabla se sitúa justo después de la etiqueta de apertura de la tabla (<table>) o, si se da el caso, justo después de la etiqueta de cierre de </caption>:
  <table>
  <thead>
  <tr>
  <th> contenido de cabecera 1 </th>
  <th> contenido de cabecera 2 </th>
  ...
  ...
  </thead>
  <tbody>
  ... resto de celdas contenido de la tabla ...
  </tbody>
  </table>
  
• El pié de una tabla se sitúa justo después de la etiqueta de apertura de la tabla (<table>) o, si se da el caso, justo después de la etiqueta de cierre de </caption>, o también, justo después de la etiqueta de cierre de cabecera (</thead>):
  <table>
  <thead>
  <tr>
  <th> contenido de cabecera 1 </th>
  <th> contenido de cabecera 2 </th>
  ...
  ...
  </thead>
  <tfoot>
  <tr>
  <th> contenido de cabecera 1 </th>
  <th> contenido de cabecera 2 </th>
  ...
  ...
  </tfoot>
  <tbody>
  ... resto de celdas contenido de la tabla ...
  </tbody>
  </table>
  

Una tabla puede tener más de un cuerpo </tbody>, en el momento de visualizar la tabla con un navegador web no implicará nada, pero si a nivel de accesibilidad. Por otro lado, solo podemos tener una cabecera (</thead>) y un pié (</tfoot>) por tabla.

La definición de cada elemento dentro de la tabla debe ir en el ordén:

1. Cabecera </thead>
2. Pié </tfoot>
3. Cuerpo </tbody>

Después la tabla se visualizará así:

Tabla con cabecera, cuerpo y pié

rowspan="2"	Fila de cabecera con colspan="4"
	Cabecera 1	Cabecera 2	Cabecera 3	Cabecera 4
rowspan="2"	Pié 1	Pié 2	Pié 3	Pié 4
	Fila de pié con colspan="4"
1,1	1,2	1,3	1,4	1,5
2,1	2,2	2,3	2,4	2,5
3,1	3,2	3,3	3,4	3,5
4,1	4,2	4,3	4,4	4,5

En este último ejemplo se han empleado dos filas tanto para la cabecera como para el pié, la primera celda de ambas tienen fusionadas las filas con rowspan="2". La fila superior de la cabecera tiene las últimas cuatro celdas fusionadas con un colspan="4", al igual que la fila inferior del pié de la tabla. Y hasta aquí todo lo que hay sobre las tablas HTML.