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.

Tabela 1
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

Tabela 2
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.

Tabela 3
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.

Tabela 4
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

Tabela 5
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

Tabela 6 - Espaçamento na tabela com cellpadding
Com Cellpadding
hello	hello	hello
hello	hello	hello
hello	hello	hello

Tabela 5 - Espaçamentos na tabela com cellspacing
Com Cellspacing
hello	hello	hello
hello	hello	hello
hello	hello	hello

Tabela 7 - Espaçamentos na tabela - Com Cellspacing e Cellpadding
Com Cellpadding e Cellspacing
hello	hello	hello
hello	hello	hello
hello	hello	hello