WEBVTT

00:00:00.279 --> 00:00:02.635
Fiz esta página sobre meus
animais de estimação,

00:00:02.635 --> 00:00:04.115
com uma lista de seus nomes.

00:00:04.321 --> 00:00:06.795
Quando você olha para a lista,
o que você quer saber?

00:00:07.017 --> 00:00:10.953
Eu tive animais de estimação chamados
"Black & White", "Daemon" e "Angel".

00:00:11.094 --> 00:00:12.991
Mas que tipo de animais eles que eram?

00:00:13.134 --> 00:00:14.413
Que cor eles tinham?

00:00:14.525 --> 00:00:15.924
Quantos anos eles tinham?

00:00:16.113 --> 00:00:18.316
Provavelmente deveria
lhe dar mais informações

00:00:18.316 --> 00:00:21.027
sobre os animais nesta lista
para responder suas perguntas

00:00:21.195 --> 00:00:23.457
Posso fazer isso por
fazer uma lista alinhada

00:00:23.457 --> 00:00:27.012
ou talvez por colocar 
informações entre parênteses

00:00:27.166 --> 00:00:32.002
Black & White era um coelho,
Demon é um gato,

00:00:32.002 --> 00:00:34.173
e Angel também é um gato.

00:00:34.495 --> 00:00:37.605
Mas não gosto disso, porque 
não fica muito organizado,

00:00:37.605 --> 00:00:40.906
e não posso simplesmente rolar para baixo
e ver todas as espécies

00:00:40.906 --> 00:00:42.586
em uma lista bem alinhada.

00:00:43.111 --> 00:00:47.116
Na verdade isso é uma oportunidade
perfeita para uma tabela.

00:00:47.401 --> 00:00:49.130
Com uma linha para cada animal

00:00:49.130 --> 00:00:51.858
e colunas para cada atributo
sobre o animal de estimação

00:00:51.858 --> 00:00:53.764
que eu quero compartilhar com você.

00:00:54.053 --> 00:00:58.390
Para fazer tabelas em HTML,
precisamos de um monte de tags.

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

00:00:59.968 --> 00:01:02.551
Mas não se preocupe em memorizar
todas essas tags.

00:01:02.551 --> 00:01:04.394
Você sempre pode procurá-las depois.

00:01:04.427 --> 00:01:07.192
Levei dez anos para memorizar
todas as tags da tabela,

00:01:07.192 --> 00:01:08.038
sou profissional.

00:01:08.575 --> 00:01:10.186
Tudo bem, prepare-se!

00:01:10.486 --> 00:01:14.890
A primeira tag é apropriadamente
chamada de "< table >".

00:01:15.104 --> 00:01:19.927
Em seguida precisamos de um cabeçalho para
manter os rótulos para cada coluna.

00:01:20.023 --> 00:01:22.463
Então escrevemos "< thead >".

00:01:23.268 --> 00:01:27.874
Dentro disso, normalmente só quero uma
única fileira de células de cabeçalho.

00:01:27.988 --> 00:01:31.959
Toda vez que escrevermos uma linha na
tabela, usamos a tag "< tr >".

00:01:32.632 --> 00:01:35.287
Dentro dessa linha, queremos 
as células de cabeçalho.

00:01:36.016 --> 00:01:40.907
Para uma única célula de cabeçalho,
escrevemos "< th >".

00:01:42.232 --> 00:01:44.839
Qual será o primeiro rótulo da coluna?

00:01:45.099 --> 00:01:49.252
Vai ser nomes de estimação, já que
é a coisa mais importante na linha,

00:01:49.252 --> 00:01:51.096
e é o identificador para ela.

00:01:51.292 --> 00:01:54.551
Agora vamos adicionar outra
coluna para a espécie.

00:01:55.269 --> 00:01:58.583
E, finalmente, vamos adicionar
uma coluna para a cor.

00:01:59.342 --> 00:02:01.532
Acho que essas colunas são suficientes,

00:02:01.532 --> 00:02:03.525
então vamos adicionar alguns dados.

00:02:03.903 --> 00:02:05.951
Começamos com as linhas de dados

00:02:05.951 --> 00:02:09.473
com "< tbody >" embaixo do
nosso "< thead >"

00:02:09.473 --> 00:02:11.847
e, em seguida, mais uma vez,
queremos uma linha,

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

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

00:02:16.717 --> 00:02:19.815
vamos usar o "< td >" porque 
estamos no corpo.

00:02:20.057 --> 00:02:23.136
Vamos dizer que "< td >" representa
os dados da tabela

00:02:23.136 --> 00:02:26.471
e que é o valor que vai nesta
primeira célula

00:02:26.471 --> 00:02:27.937
na primeira linha de dados.

00:02:28.266 --> 00:02:30.261
Só vou olhar para a minha lista,

00:02:30.261 --> 00:02:33.801
e ver que a primeira coisa na minha
lista era "Black & white",

00:02:33.801 --> 00:02:36.019
e que isso é o nome do animal de estimação

00:02:36.019 --> 00:02:39.318
então vou escrever "Black & White".

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

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

00:02:46.726 --> 00:02:49.730
e 'Black & White' era um coelho,

00:02:49.914 --> 00:02:52.111
então vamos escrever, "coelho".

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

00:02:55.309 --> 00:02:58.127
Olhe para cima e veja que o
terceiro "< th >" era a cor.

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

00:03:00.177 --> 00:03:04.430
Eu não era uma criança muito criativa
quando eu coloquei o nome deste coelho,

00:03:04.430 --> 00:03:07.935
então você provavelmente
pode adivinhar as cores dele.

00:03:08.476 --> 00:03:10.527
Vamos fazer outra linha.

00:03:10.925 --> 00:03:12.967
Vou lhe mostrar um pequeno truque.

00:03:13.099 --> 00:03:15.514
O que gosto de fazer
uma vez que eu fiz uma linha,

00:03:15.514 --> 00:03:17.126
é selecionar a primeira linha,

00:03:17.126 --> 00:03:19.394
e a copiar, usando um atalho de teclado,

00:03:19.394 --> 00:03:22.588
que normalmente é "Ctrl+C" ou
"Command+C (⌘+C)"

00:03:22.588 --> 00:03:24.438
dependendo do seu sistema operacional.

00:03:24.626 --> 00:03:28.637
E, em seguida, vou colá-la, também
usando um atalho de teclado.

00:03:28.637 --> 00:03:31.082
que normalmente é "Ctrl+V" ou
"Command+V (⌘+V)"

00:03:31.082 --> 00:03:33.041
dependendo do seu sistema operacional.

00:03:33.185 --> 00:03:36.976
E agora que eu colei, 
só irei alterar os valores.

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

00:03:41.779 --> 00:03:44.397
então vamos fazer isso mais uma vez,

00:03:44.397 --> 00:03:52.395
e este será 'Angel', 'gato' e 'laranja'.

00:03:52.966 --> 00:03:55.607
Só fica muito chato

00:03:55.607 --> 00:03:59.068
se realmente escrever os
"< tr >" e "< td >" toda vez,

00:03:59.068 --> 00:04:03.002
de modo que o truque de copiar e colar
vai fazer tudo ficar muito menos chato.

00:04:03.529 --> 00:04:05.723
E aí está: uma tabela.

00:04:05.950 --> 00:04:08.041
Eu poderia facilmente adicionar
mais colunas

00:04:08.041 --> 00:04:10.548
bastando adicionar outra
"< th >" no cabeçalho,

00:04:10.548 --> 00:04:12.827
e em seguida "< td >" em cada
uma das linhas,

00:04:12.827 --> 00:04:15.105
se quisesse compartilhar mais detalhes

00:04:15.105 --> 00:04:17.383
sobre os meus animais de estimação.

00:04:17.383 --> 00:04:19.781
Talvez se pergunte como mudar
a aparência da tabela

00:04:19.781 --> 00:04:22.189
como a mudar as bordas, ou as cores
ou espaçamento.

00:04:22.358 --> 00:04:24.673
Você pode fazer isso com as
propriedades do CSS,

00:04:24.673 --> 00:04:27.753
que você já aprendeu, 
ou vai aprender em breve.

00:04:27.918 --> 00:04:31.522
Tente fazer uma página igual e faça
uma lista de seus animais de estimação

00:04:31.522 --> 00:04:33.261
ou dos que você gostaria de ter.

00:04:33.494 --> 00:04:35.152
Faça uma tabela com esses dados!

00:04:35.152 --> 00:04:36.000
Traduzido por [Fernando dos Reis]