Postado por Micox - Náiron J. C. G..

28 Novembro, 2006

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.

Marcadores: dicas, tabelas, webstandards

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (11 comentários)

11 Comentários:

dudu disse... 28 Novembro, 2006 19:27: Conheci o teu blog pelo Rec6 e gostei.
Bloglines nele!
Anônimo disse... 30 Novembro, 2006 09:35: 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
Micox disse... 30 Novembro, 2006 11:34: Funciona ho HTML 4 e no XHTML.
Gigio disse... 07 Dezembro, 2006 11:56: 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!!!
Daniel disse... 18 Maio, 2007 16:43: Opaa, no iiecaa não vai de manera alguma, algum truque?
Anônimo disse... 11 Setembro, 2007 15:43: ótimo artigo... parabéns
Experimental disse... 17 Outubro, 2007 17:21: 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
Micox - Náiron J. C. G. disse... 18 Outubro, 2007 07:18: Isso é configuração do navegador. Quem desenvolve não tem poder pra alterar isso, só o usuário.
João Rodrigo Moreira disse... 27 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!
Iria disse... 30 Junho, 2008 16:41: Muito bom mas como faço para o rodape ficar no fim da pagin aindependendte do conteudo
Anônimo disse... 12 Agosto, 2008 21:52: Eu tentei usar e nao funciona... nao repetiu o cabecalho, por que?

Escreva seu comentário (Leia abaixo).

Deixe seu email se quiser resposta por email também, pois o sistema de comentários do Blogger não me informa :( ... Ah, também pode deixar o endereço do seu blog ou site no comentário.
Já estou em outro sistema de blog melhor (wordpress). Se quiser comentar lá também :)
Dúvidas, só no fórum Webly.