Tabelas: exibindo o cabeçalho em todas as páginas na impressão

Olá povo, hoje gostaria falar de mais uma tag excluida mas que é bastante útil: thead (e suas irmãs tfoot e tbody).

A tbody já é conhecida e bem usada devido a alguns bugs javascript quando não se usa ela. Ela indica onde estão os dados na tabela, bem simples. Agora neste post, veremos mais sobre as outras duas: thead e tfoot.

Um problema comum é quando agente tem uma pancada de dados a serem exibidos em uma página Web para serem impressos.
Na primeira página da impressão fica tudo beleza com cabeçalho bonitinho e talz, mas a segunda página faz agente perder os cabelos pois a dita cuja não está com cabeçalho de cada coluna indicando os dados!!!

Como resolver isso?
Simples, com as tags esquecidas: thead (cabeçalho da tabela em todas as páginas) e tfoot (rodapé da tabela em todas as páginas).

Vamos ver o que a W3C diz sobre as pobres:

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.
The table head and table foot should contain information about the table's columns. The table body should contain rows of table data.

Olha o exemplo:

<TABLE>
<THEAD>
<TR> ...header information...
</THEAD>
<TFOOT>
<TR> ...footer information...
</TFOOT>
<TBODY>
<TR> ...first row of block one data...
<TR> ...second row of block one data...
</TBODY>
<TBODY>
<TR> ...first row of block two data...
<TR> ...second row of block two data...
<TR> ...third row of block two data...
</TBODY>
</TABLE>

(Sim, a tfoot deve vir antes da tbody).

"Que beleza!!! Agora todas as páginas da impressão sairão com cabeçalho e rodape mico?" Siiimmm! Faça o teste. Gere uma tabela grande e depois vá em visualizar impressão.

Mais info sobre as danadas você encontra aqui e aqui.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.