tadarank afiliados

28 novembro, 2006

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.

11 comentários:

  1. Conheci o teu blog pelo Rec6 e gostei.
    Bloglines nele!

    ResponderExcluir
  2. Matéria bem legal, desconhecia isto :D, mas é HTML 4.0 ou XHTML? Desculpe a ignorancia, mas este tipo de inf. é importante para os não experts :D

    ResponderExcluir
  3. Funciona ho HTML 4 e no XHTML.

    ResponderExcluir
  4. Bem legal a dica, dá pra fazer muita coisa legal com as novas tags de html 4.01, mas a gente não aproveita apenas por quê não pesquisa.... valeu!!!

    ResponderExcluir
  5. Opaa, no iiecaa não vai de manera alguma, algum truque?

    ResponderExcluir
  6. ótimo artigo... parabéns

    ResponderExcluir
  7. Cara! Valeu mesmo! Resolveu um problemão!!!

    Tenho outro problema que as linhas de tabela não imprimem background.

    tentei um monte de coisa, mas só fica com BG na tela... na impressão não sai...

    tem alguma idéia

    ResponderExcluir
  8. Isso é configuração do navegador. Quem desenvolve não tem poder pra alterar isso, só o usuário.

    ResponderExcluir
  9. João Rodrigo Moreira27 novembro, 2007 13:44

    Cara, a cada artigo teu que leio no site encontro outro mais interessante ainda. Essas "danadas" de thead, tfoot e tbody vão pintar e bordar daqui pra frente... Parabéns micox!

    ResponderExcluir
  10. Muito bom mas como faço para o rodape ficar no fim da pagin aindependendte do conteudo

    ResponderExcluir
  11. Eu tentei usar e nao funciona... nao repetiu o cabecalho, por que?

    ResponderExcluir

Resultado! Concursos