0:00:00.279,0:00:02.635
Fiz esta página sobre meus[br]animais de estimação,

0:00:02.635,0:00:04.115
com uma lista de seus nomes.

0:00:04.321,0:00:06.795
Quando você olha para a lista,[br]o que você quer saber?

0:00:07.017,0:00:10.953
Eu tive animais de estimação chamados[br]"Black & White", "Daemon" e "Angel".

0:00:11.094,0:00:12.991
Mas que tipo de animais eles que eram?

0:00:13.134,0:00:14.413
Que cor eles tinham?

0:00:14.525,0:00:15.924
Quantos anos eles tinham?

0:00:16.113,0:00:18.316
Provavelmente deveria[br]lhe dar mais informações

0:00:18.316,0:00:21.027
sobre os animais nesta lista[br]para responder suas perguntas

0:00:21.195,0:00:23.457
Posso fazer isso por[br]fazer uma lista alinhada

0:00:23.457,0:00:27.012
ou talvez por colocar [br]informações entre parênteses

0:00:27.166,0:00:32.002
Black & White era um coelho,[br]Demon é um gato,

0:00:32.002,0:00:34.173
e Angel também é um gato.

0:00:34.495,0:00:37.605
Mas não gosto disso, porque [br]não fica muito organizado,

0:00:37.605,0:00:40.906
e não posso simplesmente rolar para baixo[br]e ver todas as espécies

0:00:40.906,0:00:42.586
em uma lista bem alinhada.

0:00:43.111,0:00:47.116
Na verdade isso é uma oportunidade[br]perfeita para uma tabela.

0:00:47.401,0:00:49.130
Com uma linha para cada animal

0:00:49.130,0:00:51.858
e colunas para cada atributo[br]sobre o animal de estimação

0:00:51.858,0:00:53.764
que eu quero compartilhar com você.

0:00:54.053,0:00:58.390
Para fazer tabelas em HTML,[br]precisamos de um monte de tags.

0:00:58.618,0:00:59.836
Então, prepare-se.

0:00:59.968,0:01:02.551
Mas não se preocupe em memorizar[br]todas essas tags.

0:01:02.551,0:01:04.394
Você sempre pode procurá-las depois.

0:01:04.427,0:01:07.192
Levei dez anos para memorizar[br]todas as tags da tabela,

0:01:07.192,0:01:08.038
sou profissional.

0:01:08.575,0:01:10.186
Tudo bem, prepare-se!

0:01:10.486,0:01:14.890
A primeira tag é apropriadamente[br]chamada de "< table >".

0:01:15.104,0:01:19.927
Em seguida precisamos de um cabeçalho para[br]manter os rótulos para cada coluna.

0:01:20.023,0:01:22.463
Então escrevemos "< thead >".

0:01:23.268,0:01:27.874
Dentro disso, normalmente só quero uma[br]única fileira de células de cabeçalho.

0:01:27.988,0:01:31.959
Toda vez que escrevermos uma linha na[br]tabela, usamos a tag "< tr >".

0:01:32.632,0:01:35.287
Dentro dessa linha, queremos [br]as células de cabeçalho.

0:01:36.016,0:01:40.907
Para uma única célula de cabeçalho,[br]escrevemos "< th >".

0:01:42.232,0:01:44.839
Qual será o primeiro rótulo da coluna?

0:01:45.099,0:01:49.252
Vai ser nomes de estimação, já que[br]é a coisa mais importante na linha,

0:01:49.252,0:01:51.096
e é o identificador para ela.

0:01:51.292,0:01:54.551
Agora vamos adicionar outra[br]coluna para a espécie.

0:01:55.269,0:01:58.583
E, finalmente, vamos adicionar[br]uma coluna para a cor.

0:01:59.342,0:02:01.532
Acho que essas colunas são suficientes,

0:02:01.532,0:02:03.525
então vamos adicionar alguns dados.

0:02:03.903,0:02:05.951
Começamos com as linhas de dados

0:02:05.951,0:02:09.473
com "< tbody >" embaixo do[br]nosso "< thead >"

0:02:09.473,0:02:11.847
e, em seguida, mais uma vez,[br]queremos uma linha,

0:02:11.847,0:02:14.002
então vamos usar essa tag "< tr >".

0:02:14.341,0:02:16.717
Mas aqui dentro, em vez de usar "< th >",

0:02:16.717,0:02:19.815
vamos usar o "< td >" porque [br]estamos no corpo.

0:02:20.057,0:02:23.136
Vamos dizer que "< td >" representa[br]os dados da tabela

0:02:23.136,0:02:26.471
e que é o valor que vai nesta[br]primeira célula

0:02:26.471,0:02:27.937
na primeira linha de dados.

0:02:28.266,0:02:30.261
Só vou olhar para a minha lista,

0:02:30.261,0:02:33.801
e ver que a primeira coisa na minha[br]lista era "Black & white",

0:02:33.801,0:02:36.019
e que isso é o nome do animal de estimação

0:02:36.019,0:02:39.318
então vou escrever "Black & White".

0:02:40.425,0:02:42.334
Agora, o segundo "< td >".

0:02:42.686,0:02:46.726
Podemos olhar para cima e ver que[br]a nossa segunda "< th >" foi as espécies,

0:02:46.726,0:02:49.730
e 'Black & White' era um coelho,

0:02:49.914,0:02:52.111
então vamos escrever, "coelho".

0:02:52.697,0:02:55.164
Finalmente, o terceiro "< th >".

0:02:55.309,0:02:58.127
Olhe para cima e veja que o[br]terceiro "< th >" era a cor.

0:02:58.229,0:03:00.177
Assim, o correspondente "< td >"...

0:03:00.177,0:03:04.430
Eu não era uma criança muito criativa[br]quando eu coloquei o nome deste coelho,

0:03:04.430,0:03:07.935
então você provavelmente[br]pode adivinhar as cores dele.

0:03:08.476,0:03:10.527
Vamos fazer outra linha.

0:03:10.925,0:03:12.967
Vou lhe mostrar um pequeno truque.

0:03:13.099,0:03:15.514
O que gosto de fazer[br]uma vez que eu fiz uma linha,

0:03:15.514,0:03:17.126
é selecionar a primeira linha,

0:03:17.126,0:03:19.394
e a copiar, usando um atalho de teclado,

0:03:19.394,0:03:22.588
que normalmente é "Ctrl+C" ou[br]"Command+C (⌘+C)"

0:03:22.588,0:03:24.438
dependendo do seu sistema operacional.

0:03:24.626,0:03:28.637
E, em seguida, vou colá-la, também[br]usando um atalho de teclado.

0:03:28.637,0:03:31.082
que normalmente é "Ctrl+V" ou[br]"Command+V (⌘+V)"

0:03:31.082,0:03:33.041
dependendo do seu sistema operacional.

0:03:33.185,0:03:36.976
E agora que eu colei, [br]só irei alterar os valores.

0:03:37.040,0:03:41.779
Então este será 'Daemon', 'gato' e 'preto'

0:03:41.779,0:03:44.397
então vamos fazer isso mais uma vez,

0:03:44.397,0:03:52.395
e este será 'Angel', 'gato' e 'laranja'.

0:03:52.966,0:03:55.607
Só fica muito chato

0:03:55.607,0:03:59.068
se realmente escrever os[br]"< tr >" e "< td >" toda vez,

0:03:59.068,0:04:03.002
de modo que o truque de copiar e colar[br]vai fazer tudo ficar muito menos chato.

0:04:03.529,0:04:05.723
E aí está: uma tabela.

0:04:05.950,0:04:08.041
Eu poderia facilmente adicionar[br]mais colunas

0:04:08.041,0:04:10.548
bastando adicionar outra[br]"< th >" no cabeçalho,

0:04:10.548,0:04:12.827
e em seguida "< td >" em cada[br]uma das linhas,

0:04:12.827,0:04:15.105
se quisesse compartilhar mais detalhes

0:04:15.105,0:04:17.383
sobre os meus animais de estimação.

0:04:17.383,0:04:19.781
Talvez se pergunte como mudar[br]a aparência da tabela

0:04:19.781,0:04:22.189
como a mudar as bordas, ou as cores[br]ou espaçamento.

0:04:22.358,0:04:24.673
Você pode fazer isso com as[br]propriedades do CSS,

0:04:24.673,0:04:27.753
que você já aprendeu, [br]ou vai aprender em breve.

0:04:27.918,0:04:31.522
Tente fazer uma página igual e faça[br]uma lista de seus animais de estimação

0:04:31.522,0:04:33.261
ou dos que você gostaria de ter.

0:04:33.494,0:04:35.152
Faça uma tabela com esses dados!

0:04:35.152,0:04:36.000
Traduzido por [Fernando dos Reis]