<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.
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
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:
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:
O efeito produzido é este:
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:
Embora não tenha muito efeito na tabela em si, ela estará mais organizada e definida:
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é:
Veja como ficou a tabela:
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):
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:
Olhe como ficou a tabela, com as colunas destacadas (elas agora são células cabeçalho):
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:
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.
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
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:
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:
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:
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):
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:Tipos de linguagem | ||
by HTML Progressivo | ||
Linguagem\Uso | Web | 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.
7 comentários:
muito obrigado foi de grande ajuda!
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
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
olá,gostaria de saber as tags para criar um layout usando tabelas em html..sou vanderson
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".
Como colocar uma tabela como a que tá nessa página?
Adorei... Uma maravilha...
Obrigado.
Postar um comentário