HTML: Tabelas

Fiz esta página sobre meus
animais de estimação,

com uma lista de seus nomes.

Quando você olha para a lista,
o que você quer saber?

Eu tive animais de estimação chamados
"Black & White", "Daemon" e "Angel".

Mas que tipo de animais eles que eram?

Que cor eles tinham?

Quantos anos eles tinham?

Provavelmente deveria
lhe dar mais informações

sobre os animais nesta lista
para responder suas perguntas

Posso fazer isso por
fazer uma lista alinhada

ou talvez por colocar
informações entre parênteses

Black & White era um coelho,
Demon é um gato,

e Angel também é um gato.

Mas não gosto disso, porque
não fica muito organizado,

e não posso simplesmente rolar para baixo
e ver todas as espécies

em uma lista bem alinhada.

Na verdade isso é uma oportunidade
perfeita para uma tabela.

Com uma linha para cada animal

e colunas para cada atributo
sobre o animal de estimação

que eu quero compartilhar com você.

Para fazer tabelas em HTML,
precisamos de um monte de tags.

Então, prepare-se.

Mas não se preocupe em memorizar
todas essas tags.

Você sempre pode procurá-las depois.

Levei dez anos para memorizar
todas as tags da tabela,

sou profissional.

Tudo bem, prepare-se!

A primeira tag é apropriadamente
chamada de "< table >".

Em seguida precisamos de um cabeçalho para
manter os rótulos para cada coluna.

Então escrevemos "< thead >".

Dentro disso, normalmente só quero uma
única fileira de células de cabeçalho.

Toda vez que escrevermos uma linha na
tabela, usamos a tag "< tr >".

Dentro dessa linha, queremos
as células de cabeçalho.

Para uma única célula de cabeçalho,
escrevemos "< th >".

Qual será o primeiro rótulo da coluna?

Vai ser nomes de estimação, já que
é a coisa mais importante na linha,

e é o identificador para ela.

Agora vamos adicionar outra
coluna para a espécie.

E, finalmente, vamos adicionar
uma coluna para a cor.

Acho que essas colunas são suficientes,

então vamos adicionar alguns dados.

Começamos com as linhas de dados

com "< tbody >" embaixo do
nosso "< thead >"

e, em seguida, mais uma vez,
queremos uma linha,

então vamos usar essa tag "< tr >".

Mas aqui dentro, em vez de usar "< th >",

vamos usar o "< td >" porque
estamos no corpo.

Vamos dizer que "< td >" representa
os dados da tabela

e que é o valor que vai nesta
primeira célula

na primeira linha de dados.

Só vou olhar para a minha lista,

e ver que a primeira coisa na minha
lista era "Black & white",

e que isso é o nome do animal de estimação

então vou escrever "Black & White".

Agora, o segundo "< td >".

Podemos olhar para cima e ver que
a nossa segunda "< th >" foi as espécies,

e 'Black & White' era um coelho,

então vamos escrever, "coelho".

Finalmente, o terceiro "< th >".

Olhe para cima e veja que o
terceiro "< th >" era a cor.

Assim, o correspondente "< td >"...

Eu não era uma criança muito criativa
quando eu coloquei o nome deste coelho,

então você provavelmente
pode adivinhar as cores dele.

Vamos fazer outra linha.

Vou lhe mostrar um pequeno truque.

O que gosto de fazer
uma vez que eu fiz uma linha,

é selecionar a primeira linha,

e a copiar, usando um atalho de teclado,

que normalmente é "Ctrl+C" ou
"Command+C (⌘+C)"

dependendo do seu sistema operacional.

E, em seguida, vou colá-la, também
usando um atalho de teclado.

que normalmente é "Ctrl+V" ou
"Command+V (⌘+V)"

dependendo do seu sistema operacional.

E agora que eu colei,
só irei alterar os valores.

Então este será 'Daemon', 'gato' e 'preto'

então vamos fazer isso mais uma vez,

e este será 'Angel', 'gato' e 'laranja'.

Só fica muito chato

se realmente escrever os
"< tr >" e "< td >" toda vez,

de modo que o truque de copiar e colar
vai fazer tudo ficar muito menos chato.

E aí está: uma tabela.

Eu poderia facilmente adicionar
mais colunas

bastando adicionar outra
"< th >" no cabeçalho,

e em seguida "< td >" em cada
uma das linhas,

se quisesse compartilhar mais detalhes

sobre os meus animais de estimação.

Talvez se pergunte como mudar
a aparência da tabela

como a mudar as bordas, ou as cores
ou espaçamento.

Você pode fazer isso com as
propriedades do CSS,

que você já aprendeu,
ou vai aprender em breve.

Tente fazer uma página igual e faça
uma lista de seus animais de estimação

ou dos que você gostaria de ter.

Faça uma tabela com esses dados!

Traduzido por [Fernando dos Reis]