-
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]