Fazendo cabeçalho e rodapé para impressão no HTML
Depois de alguns anos trabalhando com desenvolvimento web e de já ter desistido de tentar fazer isso, encontrei neste fórum como fazer cabeçalho e rodapé que saem nas páginas de impressão: http://forum.imasters.com.br/index.php?showtopic=218022.
O recurso na verdade é muito simples; trata-se de utilizar as tags <thead>, <tfoot> e <tbody> em uma tabela HTML. Essas tags servem para separar linhas (<tr>) de uma tabela e utilizá-la como cabeçalho, rodapé e corpo de uma tabela, respectivamente, de forma que o cabeçalho e rodapé sejam repetidos a cada página na impressão, se a altura da tabela estrapolar a altura da folha de papel. Desta forma, podemos aproveitar para montar o layout da página, assim:
<HTML>
<HEAD>
<STYLE>
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
</STYLE>
</HEAD>
<BODY>
<table border=0 align="center" width="100%">
<thead>
<tr>
<th width=100%>
AQUI FICA O CABEÇALHO
</th>
</tr>
</thead>
<tfoot>
<tr>
<td width=100%>
AQUI VEM O RODAPÉ
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td width="100%">
AQUI VEM TODO O RESTO DO CONTEÚDO, QUE AGORA PODE PASSAR DA ALTURA DA PÁGINA MANTENDO O RODAPÉ E CABEÇALHO
</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
Naturalmente só será possível notar o efeito se o conteúdo de <tbody> for maior que a altura de uma página, e é possível testar o funcionamento através do "visualizar impressão" do seu navegador. Testei no Internet Explorer 6 e 7 e no Mozilla Firefox 2; funcionou perfeitamente em todos eles. As instruções CSS presentes na tag <style> do código acima são para o recurso funcionar corretamente no Internet Explorer, se não ele não reconhece.
Então é isso; é um recurso interessante que estava na cara o tempo todo e eu não tinha percebido. Pretendo passar a utilizar em relatórios e algumas telas mais onde isso possa ser útil. Pode ser que essa aplicação de tabelas não esteja muito de acordo com web standards, mas tem momentos em que a gente precisa dar uma atropelada nos standards pra fazer a coisa funcionar… =)
Boa semana para todos!
6 de Dezembro de 2007 @ 08:43:10
Mutio show este recurso..
Depois de testar estou usando em todos os relário…
só tive problemas com o rodapé c/ mais de 1 linha.
Fora isso. o recurso é show!!
Valeu pelo Post!
10 de Junho de 2008 @ 15:15:08
Bah, muito bom mesmo esse comentário… estou há 3 horas de entregar um relatório, isso me salvou!
valeuuuuu
25 de Junho de 2008 @ 10:39:37
Cara muito obrigado, venho quebrando a cabeça com esse problema a muito tempo, já tentei fazer em PDF, mas quando se tratra de conteudo HTML+PHP, a coisa complica.
Muito obrigado mesmo, Valeu
15 de Julho de 2008 @ 10:56:07
Como faço para deixar o footer fixo no fim da página? Obrigado.
17 de Julho de 2008 @ 01:49:11
Olá Fernando,
Eu nunca tentei não, mas uma das pessoas que entrou em contato comigo depois de ler o post (o Álvaro), pesquisou e encontrou uma solução neste site -> http://developer.mozilla.org/pt/docs/CSS:Como_come%C3%A7ar:M%C3%ADdia .
Abraços,
Adriano
22 de Outubro de 2008 @ 21:52:18
parabens pelo post…
muito util mesmo
e poucas pessoas sabem disso
parabens mesmo amigao!!
7 de Dezembro de 2008 @ 21:40:39
Boa
Obrigadão
Passei um dia a ler coisas sobre como fazer com que os cabeçalho nas tabelas fossem impressos e só emcontrei aqui.
Excelente +++++