Ministério Vida Evangélica
O conhecimento é o melhor caminho para a liberdade.
Hacker Pyron.
Hacker Pyron.
Informatica - HTML5 - Tabelas
Elementos básicos utilizados na construção de tabelas
Se vamos falar de tabelas nada melhor que apresentar a matéria utilizando tabelas.
| Elementos básicos de uma tabela | |
|---|---|
| <table></table> | Elemento que abre e fecha uma tabela |
| <tr></tr> | Elemento que demarca as linhas de uma tabela |
| <th></th> | Define as células do cabeçalho |
| <td></td> | Define as células do do corpo da tabela |
Os textos do cabeçalho por padrão são em negrito.
As células delimitadas pelas tags <td> e </td> funcionam como um container.
As células podem conter textos, imagens, listas, outras tabelas, etc.
Elementos usados para mesclar células
| Atributos usados para mesclar células | |
|---|---|
| <Colspan> | Atrituto usado para entender uma célula por várias colunas, ou seja, mesclar várias colunas. |
| <Rowspan> | Estende uma célula por várias linhas, ou seja, mescla linhas |
Elementos que definem as seções de uma tabela
Os elementos <thead>, </thead>, <tbody>, </tbody>, <tfooter> e </tfooter> são usados apenas para destacar os campos da tabela. Não tem qualquer efeito sobre o visual da tabela. Serve para facilitar a leitura do código pelos desenvolvedores.
| Atributos que definem os campos da células | |
|---|---|
| <thead> </thead> | Define o cabeçalho da tabela |
| <tbody> </tbody> | Define o corpo da tabela |
| <tfooter> </tfooter> | Define o rodapé da tabela |
Elementos de identificação de uma tabela
Os elementos <caption>, </caption>, <alt>, <title> são usados para identificar uma tabela.
| Atributos que identificam uma tabela | |
|---|---|
| <caption> </caption> | Nome da tabela |
| alt | No caso de erro e a tabela não aparecer. O navegador mostrará uma mensagem |
| title | Mostra a identificação da tabela quando passa o mouse sobre a tabela. |
Espaçamentos na tabela
| Espaçamentos na tabela | |
|---|---|
| cellpadding | Distância entre a borda da célula e o seu conteúdo |
| cellspacing | Distância entre as células da tabela |
| Com Cellpadding | ||
|---|---|---|
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
| Com Cellspacing | ||
|---|---|---|
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
| Com Cellpadding e Cellspacing | ||
|---|---|---|
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |