1
00:00:00,279 --> 00:00:02,635
Fiz esta página sobre meus
animais de estimação,

2
00:00:02,635 --> 00:00:04,115
com uma lista de seus nomes.

3
00:00:04,321 --> 00:00:06,795
Quando você olha para a lista,
o que você quer saber?

4
00:00:07,017 --> 00:00:10,953
Eu tive animais de estimação chamados
"Black & White", "Daemon" e "Angel".

5
00:00:11,094 --> 00:00:12,991
Mas que tipo de animais eles que eram?

6
00:00:13,134 --> 00:00:14,413
Que cor eles tinham?

7
00:00:14,525 --> 00:00:15,924
Quantos anos eles tinham?

8
00:00:16,113 --> 00:00:18,316
Provavelmente deveria
lhe dar mais informações

9
00:00:18,316 --> 00:00:21,027
sobre os animais nesta lista
para responder suas perguntas

10
00:00:21,195 --> 00:00:23,457
Posso fazer isso por
fazer uma lista alinhada

11
00:00:23,457 --> 00:00:27,012
ou talvez por colocar 
informações entre parênteses

12
00:00:27,166 --> 00:00:32,002
Black & White era um coelho,
Demon é um gato,

13
00:00:32,002 --> 00:00:34,173
e Angel também é um gato.

14
00:00:34,495 --> 00:00:37,605
Mas não gosto disso, porque 
não fica muito organizado,

15
00:00:37,605 --> 00:00:40,906
e não posso simplesmente rolar para baixo
e ver todas as espécies

16
00:00:40,906 --> 00:00:42,586
em uma lista bem alinhada.

17
00:00:43,111 --> 00:00:47,116
Na verdade isso é uma oportunidade
perfeita para uma tabela.

18
00:00:47,401 --> 00:00:49,130
Com uma linha para cada animal

19
00:00:49,130 --> 00:00:51,858
e colunas para cada atributo
sobre o animal de estimação

20
00:00:51,858 --> 00:00:53,764
que eu quero compartilhar com você.

21
00:00:54,053 --> 00:00:58,390
Para fazer tabelas em HTML,
precisamos de um monte de tags.

22
00:00:58,618 --> 00:00:59,836
Então, prepare-se.

23
00:00:59,968 --> 00:01:02,551
Mas não se preocupe em memorizar
todas essas tags.

24
00:01:02,551 --> 00:01:04,394
Você sempre pode procurá-las depois.

25
00:01:04,427 --> 00:01:07,192
Levei dez anos para memorizar
todas as tags da tabela,

26
00:01:07,192 --> 00:01:08,038
sou profissional.

27
00:01:08,575 --> 00:01:10,186
Tudo bem, prepare-se!

28
00:01:10,486 --> 00:01:14,890
A primeira tag é apropriadamente
chamada de "< table >".

29
00:01:15,104 --> 00:01:19,927
Em seguida precisamos de um cabeçalho para
manter os rótulos para cada coluna.

30
00:01:20,023 --> 00:01:22,463
Então escrevemos "< thead >".

31
00:01:23,268 --> 00:01:27,874
Dentro disso, normalmente só quero uma
única fileira de células de cabeçalho.

32
00:01:27,988 --> 00:01:31,959
Toda vez que escrevermos uma linha na
tabela, usamos a tag "< tr >".

33
00:01:32,632 --> 00:01:35,287
Dentro dessa linha, queremos 
as células de cabeçalho.

34
00:01:36,016 --> 00:01:40,907
Para uma única célula de cabeçalho,
escrevemos "< th >".

35
00:01:42,232 --> 00:01:44,839
Qual será o primeiro rótulo da coluna?

36
00:01:45,099 --> 00:01:49,252
Vai ser nomes de estimação, já que
é a coisa mais importante na linha,

37
00:01:49,252 --> 00:01:51,096
e é o identificador para ela.

38
00:01:51,292 --> 00:01:54,551
Agora vamos adicionar outra
coluna para a espécie.

39
00:01:55,269 --> 00:01:58,583
E, finalmente, vamos adicionar
uma coluna para a cor.

40
00:01:59,342 --> 00:02:01,532
Acho que essas colunas são suficientes,

41
00:02:01,532 --> 00:02:03,525
então vamos adicionar alguns dados.

42
00:02:03,903 --> 00:02:05,951
Começamos com as linhas de dados

43
00:02:05,951 --> 00:02:09,473
com "< tbody >" embaixo do
nosso "< thead >"

44
00:02:09,473 --> 00:02:11,847
e, em seguida, mais uma vez,
queremos uma linha,

45
00:02:11,847 --> 00:02:14,002
então vamos usar essa tag "< tr >".

46
00:02:14,341 --> 00:02:16,717
Mas aqui dentro, em vez de usar "< th >",

47
00:02:16,717 --> 00:02:19,815
vamos usar o "< td >" porque 
estamos no corpo.

48
00:02:20,057 --> 00:02:23,136
Vamos dizer que "< td >" representa
os dados da tabela

49
00:02:23,136 --> 00:02:26,471
e que é o valor que vai nesta
primeira célula

50
00:02:26,471 --> 00:02:27,937
na primeira linha de dados.

51
00:02:28,266 --> 00:02:30,261
Só vou olhar para a minha lista,

52
00:02:30,261 --> 00:02:33,801
e ver que a primeira coisa na minha
lista era "Black & white",

53
00:02:33,801 --> 00:02:36,019
e que isso é o nome do animal de estimação

54
00:02:36,019 --> 00:02:39,318
então vou escrever "Black & White".

55
00:02:40,425 --> 00:02:42,334
Agora, o segundo "< td >".

56
00:02:42,686 --> 00:02:46,726
Podemos olhar para cima e ver que
a nossa segunda "< th >" foi as espécies,

57
00:02:46,726 --> 00:02:49,730
e 'Black & White' era um coelho,

58
00:02:49,914 --> 00:02:52,111
então vamos escrever, "coelho".

59
00:02:52,697 --> 00:02:55,164
Finalmente, o terceiro "< th >".

60
00:02:55,309 --> 00:02:58,127
Olhe para cima e veja que o
terceiro "< th >" era a cor.

61
00:02:58,229 --> 00:03:00,177
Assim, o correspondente "< td >"...

62
00:03:00,177 --> 00:03:04,430
Eu não era uma criança muito criativa
quando eu coloquei o nome deste coelho,

63
00:03:04,430 --> 00:03:07,935
então você provavelmente
pode adivinhar as cores dele.

64
00:03:08,476 --> 00:03:10,527
Vamos fazer outra linha.

65
00:03:10,925 --> 00:03:12,967
Vou lhe mostrar um pequeno truque.

66
00:03:13,099 --> 00:03:15,514
O que gosto de fazer
uma vez que eu fiz uma linha,

67
00:03:15,514 --> 00:03:17,126
é selecionar a primeira linha,

68
00:03:17,126 --> 00:03:19,394
e a copiar, usando um atalho de teclado,

69
00:03:19,394 --> 00:03:22,588
que normalmente é "Ctrl+C" ou
"Command+C (⌘+C)"

70
00:03:22,588 --> 00:03:24,438
dependendo do seu sistema operacional.

71
00:03:24,626 --> 00:03:28,637
E, em seguida, vou colá-la, também
usando um atalho de teclado.

72
00:03:28,637 --> 00:03:31,082
que normalmente é "Ctrl+V" ou
"Command+V (⌘+V)"

73
00:03:31,082 --> 00:03:33,041
dependendo do seu sistema operacional.

74
00:03:33,185 --> 00:03:36,976
E agora que eu colei, 
só irei alterar os valores.

75
00:03:37,040 --> 00:03:41,779
Então este será 'Daemon', 'gato' e 'preto'

76
00:03:41,779 --> 00:03:44,397
então vamos fazer isso mais uma vez,

77
00:03:44,397 --> 00:03:52,395
e este será 'Angel', 'gato' e 'laranja'.

78
00:03:52,966 --> 00:03:55,607
Só fica muito chato

79
00:03:55,607 --> 00:03:59,068
se realmente escrever os
"< tr >" e "< td >" toda vez,

80
00:03:59,068 --> 00:04:03,002
de modo que o truque de copiar e colar
vai fazer tudo ficar muito menos chato.

81
00:04:03,529 --> 00:04:05,723
E aí está: uma tabela.

82
00:04:05,950 --> 00:04:08,041
Eu poderia facilmente adicionar
mais colunas

83
00:04:08,041 --> 00:04:10,548
bastando adicionar outra
"< th >" no cabeçalho,

84
00:04:10,548 --> 00:04:12,827
e em seguida "< td >" em cada
uma das linhas,

85
00:04:12,827 --> 00:04:15,105
se quisesse compartilhar mais detalhes

86
00:04:15,105 --> 00:04:17,383
sobre os meus animais de estimação.

87
00:04:17,383 --> 00:04:19,781
Talvez se pergunte como mudar
a aparência da tabela

88
00:04:19,781 --> 00:04:22,189
como a mudar as bordas, ou as cores
ou espaçamento.

89
00:04:22,358 --> 00:04:24,673
Você pode fazer isso com as
propriedades do CSS,

90
00:04:24,673 --> 00:04:27,753
que você já aprendeu, 
ou vai aprender em breve.

91
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

92
00:04:31,522 --> 00:04:33,261
ou dos que você gostaria de ter.

93
00:04:33,494 --> 00:04:35,152
Faça uma tabela com esses dados!

94
00:04:35,152 --> 00:04:36,000
Traduzido por [Fernando dos Reis]