Ava tads
Como você deve ter visto no exemplo acima, este foi o código HTML mais complicado que escrevemos até agora. Vamos analisar isto por partes e explicar as diferentes tags:
3 tags básicas são usadas para inserir tabelas: começa e termina uma tabela. Evidente. significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela. Também evidente. significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da tabela. Tudo simples e evidente.
Eis o acontece no Exemplo 1: a tabela começa com , segue-se uma , que indica o início de uma nova linha. Duas células são então inseridas na linha: Célula 1 e Célula 2. A linha termina com e uma nova linha começa imediatamente a seguir. A nova linha também contém duas células. A tabela termina com .
Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células:
Célula 1
Célula 2
Célula 3
Célula 4
Célula 1 e Célula 2 formam uma linha. Célula 1 e Célula 3 formam uma coluna.
No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número ilimitado de linhas e colunas.
Exemplo 2:
Célula 1 Célula 2 Célula 3 Célula 4
Célula 5 Célula 6 Célula 7 Célula 8
Célula 9 Célula 10 Célula 11 Célula 12
Será renderizado no navegador assim:
Célula 1
Célula 2
Célula 3
Célula 4
Célula 5
Célula 6
Célula 7
Célula 8
Célula 9
Célula 10
Célula 11
Célula 12
Existem atributos?
Claro! existem atributos. Por exemplo, o atributo border que é usado para definir a espessura de uma borda em volta da tabela:
Exemplo 3:
Célula 1 Célula 2
Célula 3 Célula 4
Será renderizado no navegador assim:
Célula 1
Célula 2
Célula 3
Célula 4
A espessura da borda é especificada em pixels (Ver lição 9)
Tal como fizemos com as imagens, podemos definir width - largura - em