Tabela - Título < caption >, Corpo < tbody>, Cabeçalhos < thead >, Rodapé < tfoot > e células cabeçalho < th >

Agora que já sabemos o que é uma tabela e como criar uma tabela com linhas e colunas, vamos explicar neste tutorial de nossa apostila de HTML como incrementar nossas tables com diversos recursos, como: título, cabeçalho e rodapé.

<caption> - Títulos em tabelas

Uma das várias possibilidade que o HTML nos fornece para trabalhar com tabelas, é a possibilidade se criar um título, que geralmente é usado como um breve resumo, uma explicação sobre o que será exibido na tabela.

Esse título será agregado, como se fizesse parte da tabela.
Ele vai ficar na parte superior da tabela.

Para usar a tag caption, basta colocar o título que quer dar à sua tabela entre as tags:
<caption> O título de sua tabela aqui </caption>

Por exemplo, uma tabela com a caption "Linguagens", que exibe uma tabela 4x2 ( 4 linhas e 2 colunas), exibindo linguagens para desenvolvimento Web e para desenvolvimento desktop seria:

<table border="1">
   <caption>Linguagens</caption>
   <tr><td>Web</td> <td>Desktop</td> </tr>
   <tr><td>HTML</td> <td>C</td> </tr>
   <tr><td>JavaScript</td> <td>C++</td> </tr>
   <tr><td>PHP</td> <td>Java</td> </tr>
</table>


O resultado é a seguinte tabela.
Linguagens
Web Desktop
HTML C
JavaScript C++
PHP Java


Note que as tags caption estão aninhadas na tag table, que está aninhada na tag body.
Os captions ou títulos de tabela também são usados para catalogar, identificar a tabela.
Ex: Tabela 1, Informações, Unidade versus Preço etc

<theader> - Cabeçalho de uma tabela

Vamos agora aprender a divisão de uma tabela.
Como dissemos no artigo inicial desta seção de nosso curso de HTML, as tabelas podem ser usadas para criar o layout (formato, design, desenho) do site.

E como um site, dividimos a tabela em três partes:
  • o cabeçalho
  • o corpo
  • o rodapé

Para criar um cabeçalho, usamos as tags: <thead> </thead>
Colocamos dentro da tag <table>, abaixo da <caption>.

Ao fazer isso, o HTML vai criar uma espécie de célula em cima, geralmente do tamanho de todas as colunas.
Como se fosse o cabeçalho da tabela, e como sabemos do estudo da tag head, ela é usada para fornecer informações daquele elemento.

No nosso exemplo das linguagens, vamos identificar a tabela como "Tabela 1.1", e o theader fornece a informações existentes naquela tabela "Tipos de linguagem".
Ou seja, o cabeçalho de nossa tabela é uma única linha e coluna.
Nosso código fica assim:
<table border="1">
   <caption>Tabela 1.1</caption>
   <thead>
      <tr><td>Tipos de linguagem</td></tr>
   </thead>
   <tr><td>Web</td> <td>Desktop</td></tr>
   <tr><td>HTML</td> <td>C </td> </tr>
   <tr><td>JavaScript</td> <td>C++</td> </tr>
   <tr><td>PHP</td> <td>Java</td> </tr>
</table>

O efeito produzido é este:
Tabela 1.1
Tipos de linguagem
Web Desktop
HTML C
JavaScript C++
PHP Java




<tbody> - O corpo de uma tabela

Criado o título (caption) e cabeçalho (thead), vamos ao corpo da tabela.
O corpo, body, nada mais é que o conjunto de informações, os dados.

No nosso caso, o corpo da tabela é tudo aquilo exceto o caption e head, ou seja, as informações sobre as linguagens.
Então vamos englobar esse trecho entre as tags:
<tbody> </tbody>

Veja como fica nosso código:
<table border="1">
   <caption>Linguagens</caption>
   <thead>
      <tr><td>Tipos de linguagem</td></tr>
   </thead>
   
   <tbody>
      <tr><td>Web</td> <td>Desktop</td></tr>
      <tr><td>HTML</td> <td>C </td> </tr>
      <tr><td>JavaScript</td> <td>C++</td> </tr>
      <tr><td>PHP</td> <td>Java</td> </tr>
   </tbody>
</table>

Embora não tenha muito efeito na tabela em si, ela estará mais organizada e definida:

Linguagens
Tipos de linguagem
Web Desktop
HTML C
JavaScript C++
PHP Java

<tfoot> - O rodapé de uma tabela

E por fim, nem mais nem menos importante, existe o rodapé de uma tabela.
Assim como no rodapé de um site, ele fica lá embaixo e geralmente contém alguma informação sobre o site/tabela ou autor/webmaster.

Para criar um rodapé, basta escrever o que queremos que apareça na base da tabela dentro das tags:
<tfoot> </tfoot>

Vamos escrever "by HTML Progressivo" em nosso rodapé:
<table border="1">
   <caption>Tabela 1.1</caption>
   <thead>
      <tr><td>Tipos de linguagem</td></tr>
   </thead>
   
   <tbody>
      <tr><td>Web</td> <td>Desktop</td></tr>
      <tr><td>HTML</td> <td>C </td> </tr>
      <tr><td>JavaScript</td> <td>C++</td> </tr>
      <tr><td>PHP</td> <td>Java</td> </tr>
   </tbody>

   <tfoot>
      <tr><td>by HTML Progressivo</td></tr>
   </tfoot>
</table>

Veja como ficou a tabela:
Tabela 1.1
Tipos de linguagem
Web Desktop
HTML C
JavaScript C++
PHP Java
by HTML Progressivo

Note também que colocamos na ordem: thead, tbody e tfoot
Porém, isso não é obrigatório, pois o navegador é inteligente o suficiente para saber que o cabeçalho fica em cima, o rodapé ao fim, e tudo entre esses dois é o corpo da tabela.

Então, se invertermos essa ordem, o resultado é o seguinte código (que produz a mesma tabela):
<table border="1">
   <caption>Tabela 1.1</caption>
   <thead>
      <tr><td>Tipos de linguagem</td></tr>
   </thead>
   
   <tbody>
      <tr><td>Web</td> <td>Desktop</td></tr>
      <tr><td>HTML</td> <td>C </td> </tr>
      <tr><td>JavaScript</td> <td>C++</td> </tr>
      <tr><td>PHP</td> <td>Java</td> </tr>
   </tbody>

   <tfoot>
      <tr><td>by HTML Progressivo</td></tr>
   </tfoot>
</table>

<th> - Células de cabeçalho no corpo

Algumas vezes queremos que algumas células do corpo sejam destacadas, como se fossem principais ou que contenham uma informação diferenciada ou mesmo uma informação sobre uma linha ou coluna.

No exemplo passado, nem "Web" nem "Desktop" eram tipos de linguagens.
Elas serviam para classificar as células que estavam abaixo delas, na mesma coluna.
Seria interessante poder diferenciar estas duas, já que elas são diferentes das outras.
Elas não são dados ou informações, elas servem para classificar as demais.

É possível transformar essas células normais em células especiais de cabeçalho.
Isso é feito colocando as células entre as tags: <th> e </th>

No caso, queremos transformar a coluna da "Web" e da "Desktop" em um tipo de especial de célula, então vamos substituir a tag <td> por <th>, nosso código fica:
<table border="1">
   <caption>Linguagens</caption>
   <thead>
      <tr><td>Tipos de linguagem</td></tr>
   </thead>

   <tfoot>
      <tr><td>by HTML Progressivo</td></tr>
   </tfoot>

   <tbody>
      <tr><th>Web</th> <th>Desktop</th></tr>
      <tr><td>HTML</td> <td>C </td> </tr>
      <tr><td>JavaScript</td> <td>C++</td> </tr>
      <tr><td>PHP</td> <td>Java</td> </tr>
   </tbody>

</table>

Olhe como ficou a tabela, com as colunas destacadas (elas agora são células cabeçalho):
Tabela 1.1
Tipos de linguagem
by HTML Progressivo
Web Desktop
HTML C
JavaScript C++
PHP Java

E se quiséssemos que a as primeiras células das linhas fossem headers, assim como as primeiras células das colunas foram?
Basta substituir o <td> dessa célula em questão por <th>.
Primeiro vamos colocar uma coluna a mais, na esquerda, que vai armazenar o nome todas as linguagens, e esses nomes serão headers daquela linha.

Vamos usar células cabeçalho tanto na primeira linha como na primeira coluna.
Veja como ficou o código:
<table border="1">
   <caption>Tabela 1.1</caption>
   <thead>
      <tr><td>Tipos de linguagem</td></tr>
   </thead>

   <tfoot>
      <tr><td>by HTML Progressivo</td></tr>
   </tfoot>

   <tbody>
      <tr><td>Linguagem\Uso</td><th>Web</th> <th>Desktop</th></tr>
      <tr><th>HTML</th>       <td>X</td> <td></td> </tr>
      <tr><th>JavaScript</th> <td>X</td> <td></td> </tr>
      <tr><th>C</th>          <td></td>  <td>X</td> </tr>
      <tr><th>C++</th>        <td></td>  <td>X</td> </tr>
      <tr><th>PHP</th>        <td>X</td> <td></td> </tr>
      <tr><th>Java</th>       <td></td>  <td>X</td> </tr>
   </tbody>

</table>

E o resultado:
Tabela 1.1
Tipos de linguagem
by HTML Progressivo
Linguagem\UsoWeb Desktop
HTML X
JavaScript X
C X
C++ X
PHP X
Java X

Bacana, não?
Está quase perfeito! Em breve vamos aprender como alterar o tamanho da célula, pois isso seria útil para fazer com que a thead e a tfoot ocupassem suas linhas inteiras.

6 comentários:

felipe lima disse...

muito obrigado foi de grande ajuda!

Cidadão S/A disse...

Olá boa tarde,

Gostaria de cirar uma tabela no rodapé do meu blog pra colocar uns 4 ou 5 botões linkados dentro dela. Mas criar umas tabelas sem as bordas...é possível?

ATT Ricardo Bassman
vlw

Cidadão S/A disse...

Olá boa tarde,

Gostaria de cirar uma tabela no rodapé do meu blog pra colocar uns 4 ou 5 botões linkados dentro dela. Mas criar umas tabelas sem as bordas...é possível?

ATT Ricardo Bassman
vlw

vanderson gomes Araujo disse...

olá,gostaria de saber as tags para criar um layout usando tabelas em html..sou vanderson

J.Alencar disse...

Sim, basta retirar a instrução "border" ou instruir border="0" para que as bordas sumam.
Para linkar basta colocar a tag "a" dentro da célula "td".

Anônimo disse...

Como colocar uma tabela como a que tá nessa página?