"Propagando Soluções"

Fazendo cabeçalho e rodapé para impressão no HTML

Filed under: Tecnologia, Desenvolvimento web, HTMLAdriano de Oliveira Gonçalves | 2 de Dezembro de 2007 @ 14:37:05 (Views: 13111)

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!

16 Comentários

  1. Comentário by andremamp:

    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!

  2. Comentário by Paulinho:

    Bah, muito bom mesmo esse comentário… estou há 3 horas de entregar um relatório, isso me salvou!

    valeuuuuu

  3. Comentário by WILSON GOIS CANDIDO:

    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

  4. Comentário by Fernando Fiaux de Moraes:

    Como faço para deixar o footer fixo no fim da página? Obrigado.

  5. Comentário by Adriano de Oliveira Gonçalves:

    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

  6. Comentário by Vitor:

    parabens pelo post…
    muito util mesmo
    e poucas pessoas sabem disso
    parabens mesmo amigao!!

  7. Comentário by César:

    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 +++++

  8. Comentário by MARCOS TEIXEIRA DOS SANTOS:

    Muito bom esse relatório, mas tem como eu gerar em PHP, fiz alguns testes e não obtive exito… pois queria utilizar banco de dados? Aguardo seu contato.

  9. Comentário by Marcos Santos:

    Como faço para deixar o rodapé ficar fixo no fim da página, papel A$?

  10. Comentário by Vinícius:

    Cara, fiquei muito tempo atrás disso, tive que responder aqui para parabenizá-lo…

    Uma coisa, na última página, o rodapé não fica no final da página, tem como fazer usando CSS, algo como position: fixed, bottom: 0 ?

  11. Comentário by Vinícius:

    PROBLEMAS RESOLVIDOS:

    www.iSecretaria.net/VReport/

    Abraços

  12. Comentário by Franklin:

    Cara… muito bom o post!!! Ajudou pra caramba!
    Abraço

  13. Comentário by Methalita:

    muito boa a solução… só que só funcionou no IE e no Netscape.. nos outros navegadores o rodapé não aparece só aparece na segunda página.. existe algo que corrija isso? Abraços

  14. Comentário by Adriano de Oliveira Gonçalves:

    Cara, faz um tempo que não tenho mexido com esse recurso, mas você pode tentar usar um @page: first pra tentar modelar isso… (http://www.w3.org/TR/CSS2/page.html#page-selectors)

  15. Comentário by Manoel:

    Cara, essa dica foi muito boa mesmo. Parabéns!

  16. Comentário by Conan:

    Muito bom, solução simples para um problema que estava quebrando a cabeça pra resolver!

Deixe um comentário


:: Adriano de Oliveira Gonçalves, 2004-2012 - contato@adrianoweb.com.br ::

Xoops PhP MySql ApaChe FireFox RSS