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]