Programação
 › Algoritmo  › C/C++  › Java
Web
 › HTML/XHTML  › JavaScript  › PHP
Sistema Operacional
 › Comandos de DOS  › Windows  › Linux  › Mac/BSD
Office
 › Word / Writer  › Excel / Calc
Áreas do Site
 › Download  › Fórum  › Blog
Recomendamos
Computadores e Informática em Lisboa
TI Expert » Programação » Web » HTML/XHTML » Grupos de linha - tags THEAD, TFOOT e TBODY

Grupos de linhas

Existem formas avançadas de tratar uma tabela além da convencional: tabela, linha, célula. Uma delas é criar o que chamamos de grupos de linhas.

Os grupos de linhas servem para agrupar porções da tabela que tenham a mesma finalidade, como por exemplo células que pertencem a um cabeçalho da tabela.

Essas tags são opcionais, mas tornam seu documento HTML/XHTML mais atrativo e inteligente.

Cabeçalho de tabela - tag THEAD

O cabeçalho de tabela deve ser composto dentro da tag THEAD.

Quando definida, a tag THEAD deve vir antes do corpo de dados da tabela.

Toda THEAD deve conter pelo menos uma tag TR e uma tag TD ou TH.

Rodapé de tabela - tag TFOOT

O rodapé de tabela deve ser composto dentro da tag TFOOT.

Quando definida, a tag TFOOT, assim como a tag THEAD, deve vir antes do corpo de dados da tabela para que possa ser processada antes que sejam apresentadas as prováveis inúmeras linhas do corpo de dados.

Toda TFOOT deve conter pelo menos uma tag TR e uma tag TD ou TH.

A vantagem em utilizar cabeçalhos e rodapés de tabela é a possibilidade de que possam repetir durante a impressão de um documento, além de contribuir para um melhor entendimento do conteúdo apresentado por robôs (web semântica).

Corpo de dados de tabela - tag TBODY

A tag TBODY define o corpo de dados de uma tabela.

Um tabela pode possuir mais de uma TBODY.

O uso de TBODY é obrigatório sempre que utilizamos THEAD ou TFOOT. Sua omissão só é permitida quando não forem definidos os cabeçalhos e os rodapés, e apenas existir um corpo de dados.

Abaixo está um exemplo de uma relação de matrícula de alunos que está organizada em uma tabela.

...
<TABLE WIDTH="100%" CELLPADDING="2" CELLSPACING="0" BORDER="1">
<THEAD>
  <TR>
    <TH>Matrícula</TH>
    <TH>Nome</TH>
    <TH>Idade</TH>
    <TH>Ano letivo</TH>
  </TR>
</THEAD>
<TFOOT>
  <TR>
    <TD ALIGN="RIGHT" COLSPAN="4">Data: 06/04/2009</TD>
  </TR>
</TFOOT>
<TBODY>
  <TR>
    <TD>10001</TD>
    <TD>André</TD>
    <TD>12</TD>
    <TD>7</TD>
  </TR>
  <TR>
    <TD>10151</TD>
    <TD>Carla</TD>
    <TD>11</TD>
    <TD>6</TD>
  </TR>
  <TR>
    <TD>11021</TD>
    <TD>João</TD>
    <TD>7</TD>
    <TD>1</TD>
  </TR>
  <TR>
    <TD>10027</TD>
    <TD>Juliana</TD>
    <TD>10</TD>
    <TD>5</TD>
  </TR>
</TBODY>
</TABLE>
...

Visualmente, não há diferença de uma tabela simples. Mas, o que importa aqui é a qualidade semântica e a impressão do documento.

Creative Commons License
Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons.

Faça o download da versão em PDF Indique nosso site Gostou?
Indique nosso site!
Este artigo foi
lido 22146 vezes
Bookmark e Compartilhe

Páginas Relacionadas

Enquete
O Google Chrome OS irá desbancar o Microsoft Windows 7?
» ProgramaçãoAlgorítmo | C/C++ | Java

» WebHTML/XHTML | JavaScript | PHP

» Sistema OperacionalComandos de DOS | Windows | Linux | Mac/BSD

» OfficeWord/Wirter | Excel/Calc

» Áreas do SiteDownloads | Fórum | Blog