Tabela - Título < caption >, Corpo < tbody>, Cabeçalhos < thead >, Rodapé < tfoot > e células cabeçalho < th >
Autor: Cristiano Palhares | Publicado: 2015-12-04T07:40:00-08:00


Vejamos como incrementar nossas&nbsp;tables&nbsp;com diversos recursos, como: título, cabeçalho e rodapé.


&lt;caption&gt;&nbsp;- 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&nbsp;tag caption, basta colocar o título que quer dar à sua tabela entre as tags:

&lt;caption&gt;&nbsp;O título de sua tabela aqui&nbsp;&lt;/caption&gt;



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

&lt;table border="1"&gt;
   &lt;caption&gt;Linguagens&lt;/caption&gt;
   &lt;tr&gt;&lt;td&gt;Web&lt;/td&gt; &lt;td&gt;Desktop&lt;/td&gt; &lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;HTML&lt;/td&gt; &lt;td&gt;C&lt;/td&gt; &lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;JavaScript&lt;/td&gt; &lt;td&gt;C++&lt;/td&gt; &lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;PHP&lt;/td&gt; &lt;td&gt;Java&lt;/td&gt; &lt;/tr&gt;
&lt;/table&gt;






O resultado é a seguinte tabela.
Linguagens
WebDesktop
HTMLC
JavaScriptC++
PHPJava





Note que as tags&nbsp;caption&nbsp;estão aninhadas na tag&nbsp;table, que está aninhada na tag&nbsp;body.Os&nbsp;captions&nbsp;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
&lt;theader&gt;&nbsp;- Cabeçalho de uma tabela


Vamos agora aprender a divisão de uma tabela.Como dissemos no artigo inicial desta seção de nosso&nbsp;curso de HTML, as tabelas podem ser usadas para criar o&nbsp;layout&nbsp;(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:&nbsp;&lt;thead&gt;&nbsp;&lt;/thead&gt;Colocamos dentro da tag&nbsp;&lt;table&gt;, abaixo da&nbsp;&lt;caption&gt;.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&nbsp;tag head, ela é usada para fornecer informações daquele elemento.No nosso exemplo das linguagens, vamos identificar a tabela como "Tabela 1.1", e otheader&nbsp;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:&lt;table border="1"&gt;
   &lt;caption&gt;Tabela 1.1&lt;/caption&gt;
   &lt;thead&gt;
      &lt;tr&gt;&lt;td&gt;Tipos de linguagem&lt;/td&gt;&lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tr&gt;&lt;td&gt;Web&lt;/td&gt; &lt;td&gt;Desktop&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;HTML&lt;/td&gt; &lt;td&gt;C &lt;/td&gt; &lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;JavaScript&lt;/td&gt; &lt;td&gt;C++&lt;/td&gt; &lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;PHP&lt;/td&gt; &lt;td&gt;Java&lt;/td&gt; &lt;/tr&gt;
&lt;/table&gt;
O efeito produzido é este:Tabela 1.1
Tipos de linguagem

WebDesktop
HTMLC
JavaScriptC++
PHPJava











&lt;tbody&gt;&nbsp;- O corpo de uma tabela
Criado o título (caption) e cabeçalho (thead), vamos ao corpo da tabela.O corpo,&nbsp;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:&lt;tbody&gt;&nbsp;&lt;/tbody&gt;Veja como fica nosso código:&lt;table border="1"&gt;
   &lt;caption&gt;Linguagens&lt;/caption&gt;
   &lt;thead&gt;
      &lt;tr&gt;&lt;td&gt;Tipos de linguagem&lt;/td&gt;&lt;/tr&gt;
   &lt;/thead&gt;
   
   &lt;tbody&gt;
      &lt;tr&gt;&lt;td&gt;Web&lt;/td&gt; &lt;td&gt;Desktop&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;HTML&lt;/td&gt; &lt;td&gt;C &lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;JavaScript&lt;/td&gt; &lt;td&gt;C++&lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;PHP&lt;/td&gt; &lt;td&gt;Java&lt;/td&gt; &lt;/tr&gt;
   &lt;/tbody&gt;
&lt;/table&gt;
Embora não tenha muito efeito na tabela em si, ela estará mais organizada e definida:Linguagens
Tipos de linguagem

WebDesktop
HTMLC
JavaScriptC++
PHPJava


&lt;tfoot&gt;&nbsp;- 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:&lt;tfoot&gt;&nbsp;&lt;/tfoot&gt;Vamos escrever "by HTML Progressivo" em nosso rodapé:&lt;table border="1"&gt;
   &lt;caption&gt;Tabela 1.1&lt;/caption&gt;
   &lt;thead&gt;
      &lt;tr&gt;&lt;td&gt;Tipos de linguagem&lt;/td&gt;&lt;/tr&gt;
   &lt;/thead&gt;
   
   &lt;tbody&gt;
      &lt;tr&gt;&lt;td&gt;Web&lt;/td&gt; &lt;td&gt;Desktop&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;HTML&lt;/td&gt; &lt;td&gt;C &lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;JavaScript&lt;/td&gt; &lt;td&gt;C++&lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;PHP&lt;/td&gt; &lt;td&gt;Java&lt;/td&gt; &lt;/tr&gt;
   &lt;/tbody&gt;

   &lt;tfoot&gt;
      &lt;tr&gt;&lt;td&gt;by HTML Progressivo&lt;/td&gt;&lt;/tr&gt;
   &lt;/tfoot&gt;
&lt;/table&gt;
Veja como ficou a tabela:Tabela 1.1
Tipos de linguagem

WebDesktop
HTMLC
JavaScriptC++
PHPJava

by HTML Progressivo

Note também que colocamos na ordem:&nbsp;thead, tbody&nbsp;e&nbsp;tfootPoré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):&lt;table border="1"&gt;
   &lt;caption&gt;Tabela 1.1&lt;/caption&gt;
   &lt;thead&gt;
      &lt;tr&gt;&lt;td&gt;Tipos de linguagem&lt;/td&gt;&lt;/tr&gt;
   &lt;/thead&gt;
   
   &lt;tbody&gt;
      &lt;tr&gt;&lt;td&gt;Web&lt;/td&gt; &lt;td&gt;Desktop&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;HTML&lt;/td&gt; &lt;td&gt;C &lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;JavaScript&lt;/td&gt; &lt;td&gt;C++&lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;PHP&lt;/td&gt; &lt;td&gt;Java&lt;/td&gt; &lt;/tr&gt;
   &lt;/tbody&gt;

   &lt;tfoot&gt;
      &lt;tr&gt;&lt;td&gt;by HTML Progressivo&lt;/td&gt;&lt;/tr&gt;
   &lt;/tfoot&gt;
&lt;/table&gt;

&lt;th&gt;&nbsp;- 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:&nbsp;&lt;th&gt;&nbsp;e&nbsp;&lt;/th&gt;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&nbsp;&lt;td&gt;&nbsp;por&nbsp;&lt;th&gt;, nosso código fica:&lt;table border="1"&gt;
   &lt;caption&gt;Linguagens&lt;/caption&gt;
   &lt;thead&gt;
      &lt;tr&gt;&lt;td&gt;Tipos de linguagem&lt;/td&gt;&lt;/tr&gt;
   &lt;/thead&gt;

   &lt;tfoot&gt;
      &lt;tr&gt;&lt;td&gt;by HTML Progressivo&lt;/td&gt;&lt;/tr&gt;
   &lt;/tfoot&gt;

   &lt;tbody&gt;
      &lt;tr&gt;&lt;th&gt;Web&lt;/th&gt; &lt;th&gt;Desktop&lt;/th&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;HTML&lt;/td&gt; &lt;td&gt;C &lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;JavaScript&lt;/td&gt; &lt;td&gt;C++&lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;PHP&lt;/td&gt; &lt;td&gt;Java&lt;/td&gt; &lt;/tr&gt;
   &lt;/tbody&gt;

&lt;/table&gt;
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

WebDesktop
HTMLC
JavaScriptC++
PHPJava

E se quiséssemos que a as primeiras células das linhas fossem&nbsp;headers, assim como as primeiras células das colunas foram?Basta substituir o&nbsp;&lt;td&gt;&nbsp;dessa célula em questão por&nbsp;&lt;th&gt;.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:&lt;table border="1"&gt;
   &lt;caption&gt;Tabela 1.1&lt;/caption&gt;
   &lt;thead&gt;
      &lt;tr&gt;&lt;td&gt;Tipos de linguagem&lt;/td&gt;&lt;/tr&gt;
   &lt;/thead&gt;

   &lt;tfoot&gt;
      &lt;tr&gt;&lt;td&gt;by HTML Progressivo&lt;/td&gt;&lt;/tr&gt;
   &lt;/tfoot&gt;

   &lt;tbody&gt;
      &lt;tr&gt;&lt;td&gt;Linguagem\Uso&lt;/td&gt;&lt;th&gt;Web&lt;/th&gt; &lt;th&gt;Desktop&lt;/th&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;th&gt;HTML&lt;/th&gt;       &lt;td&gt;X&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;th&gt;JavaScript&lt;/th&gt; &lt;td&gt;X&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;th&gt;C&lt;/th&gt;          &lt;td&gt;&lt;/td&gt;  &lt;td&gt;X&lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;th&gt;C++&lt;/th&gt;        &lt;td&gt;&lt;/td&gt;  &lt;td&gt;X&lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;th&gt;PHP&lt;/th&gt;        &lt;td&gt;X&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;&lt;th&gt;Java&lt;/th&gt;       &lt;td&gt;&lt;/td&gt;  &lt;td&gt;X&lt;/td&gt; &lt;/tr&gt;
   &lt;/tbody&gt;

&lt;/table&gt;


E o resultado:Tabela 1.1
Tipos de linguagem

by HTML Progressivo

Linguagem\UsoWebDesktop
HTMLX
JavaScriptX
CX
C++X
PHPX
JavaX