< Return to Video

HTML: Tabelas

  • 0:00 - 0:03
    Fiz esta página sobre meus
    animais de estimação,
  • 0:03 - 0:04
    com uma lista de seus nomes.
  • 0:04 - 0:07
    Quando você olha para a lista,
    o que você quer saber?
  • 0:07 - 0:11
    Eu tive animais de estimação chamados
    "Black & White", "Daemon" e "Angel".
  • 0:11 - 0:13
    Mas que tipo de animais eles que eram?
  • 0:13 - 0:14
    Que cor eles tinham?
  • 0:15 - 0:16
    Quantos anos eles tinham?
  • 0:16 - 0:18
    Provavelmente deveria
    lhe dar mais informações
  • 0:18 - 0:21
    sobre os animais nesta lista
    para responder suas perguntas
  • 0:21 - 0:23
    Posso fazer isso por
    fazer uma lista alinhada
  • 0:23 - 0:27
    ou talvez por colocar
    informações entre parênteses
  • 0:27 - 0:32
    Black & White era um coelho,
    Demon é um gato,
  • 0:32 - 0:34
    e Angel também é um gato.
  • 0:34 - 0:38
    Mas não gosto disso, porque
    não fica muito organizado,
  • 0:38 - 0:41
    e não posso simplesmente rolar para baixo
    e ver todas as espécies
  • 0:41 - 0:43
    em uma lista bem alinhada.
  • 0:43 - 0:47
    Na verdade isso é uma oportunidade
    perfeita para uma tabela.
  • 0:47 - 0:49
    Com uma linha para cada animal
  • 0:49 - 0:52
    e colunas para cada atributo
    sobre o animal de estimação
  • 0:52 - 0:54
    que eu quero compartilhar com você.
  • 0:54 - 0:58
    Para fazer tabelas em HTML,
    precisamos de um monte de tags.
  • 0:59 - 1:00
    Então, prepare-se.
  • 1:00 - 1:03
    Mas não se preocupe em memorizar
    todas essas tags.
  • 1:03 - 1:04
    Você sempre pode procurá-las depois.
  • 1:04 - 1:07
    Levei dez anos para memorizar
    todas as tags da tabela,
  • 1:07 - 1:08
    sou profissional.
  • 1:09 - 1:10
    Tudo bem, prepare-se!
  • 1:10 - 1:15
    A primeira tag é apropriadamente
    chamada de "< table >".
  • 1:15 - 1:20
    Em seguida precisamos de um cabeçalho para
    manter os rótulos para cada coluna.
  • 1:20 - 1:22
    Então escrevemos "< thead >".
  • 1:23 - 1:28
    Dentro disso, normalmente só quero uma
    única fileira de células de cabeçalho.
  • 1:28 - 1:32
    Toda vez que escrevermos uma linha na
    tabela, usamos a tag "< tr >".
  • 1:33 - 1:35
    Dentro dessa linha, queremos
    as células de cabeçalho.
  • 1:36 - 1:41
    Para uma única célula de cabeçalho,
    escrevemos "< th >".
  • 1:42 - 1:45
    Qual será o primeiro rótulo da coluna?
  • 1:45 - 1:49
    Vai ser nomes de estimação, já que
    é a coisa mais importante na linha,
  • 1:49 - 1:51
    e é o identificador para ela.
  • 1:51 - 1:55
    Agora vamos adicionar outra
    coluna para a espécie.
  • 1:55 - 1:59
    E, finalmente, vamos adicionar
    uma coluna para a cor.
  • 1:59 - 2:02
    Acho que essas colunas são suficientes,
  • 2:02 - 2:04
    então vamos adicionar alguns dados.
  • 2:04 - 2:06
    Começamos com as linhas de dados
  • 2:06 - 2:09
    com "< tbody >" embaixo do
    nosso "< thead >"
  • 2:09 - 2:12
    e, em seguida, mais uma vez,
    queremos uma linha,
  • 2:12 - 2:14
    então vamos usar essa tag "< tr >".
  • 2:14 - 2:17
    Mas aqui dentro, em vez de usar "< th >",
  • 2:17 - 2:20
    vamos usar o "< td >" porque
    estamos no corpo.
  • 2:20 - 2:23
    Vamos dizer que "< td >" representa
    os dados da tabela
  • 2:23 - 2:26
    e que é o valor que vai nesta
    primeira célula
  • 2:26 - 2:28
    na primeira linha de dados.
  • 2:28 - 2:30
    Só vou olhar para a minha lista,
  • 2:30 - 2:34
    e ver que a primeira coisa na minha
    lista era "Black & white",
  • 2:34 - 2:36
    e que isso é o nome do animal de estimação
  • 2:36 - 2:39
    então vou escrever "Black & White".
  • 2:40 - 2:42
    Agora, o segundo "< td >".
  • 2:43 - 2:47
    Podemos olhar para cima e ver que
    a nossa segunda "< th >" foi as espécies,
  • 2:47 - 2:50
    e 'Black & White' era um coelho,
  • 2:50 - 2:52
    então vamos escrever, "coelho".
  • 2:53 - 2:55
    Finalmente, o terceiro "< th >".
  • 2:55 - 2:58
    Olhe para cima e veja que o
    terceiro "< th >" era a cor.
  • 2:58 - 3:00
    Assim, o correspondente "< td >"...
  • 3:00 - 3:04
    Eu não era uma criança muito criativa
    quando eu coloquei o nome deste coelho,
  • 3:04 - 3:08
    então você provavelmente
    pode adivinhar as cores dele.
  • 3:08 - 3:11
    Vamos fazer outra linha.
  • 3:11 - 3:13
    Vou lhe mostrar um pequeno truque.
  • 3:13 - 3:16
    O que gosto de fazer
    uma vez que eu fiz uma linha,
  • 3:16 - 3:17
    é selecionar a primeira linha,
  • 3:17 - 3:19
    e a copiar, usando um atalho de teclado,
  • 3:19 - 3:23
    que normalmente é "Ctrl+C" ou
    "Command+C (⌘+C)"
  • 3:23 - 3:24
    dependendo do seu sistema operacional.
  • 3:25 - 3:29
    E, em seguida, vou colá-la, também
    usando um atalho de teclado.
  • 3:29 - 3:31
    que normalmente é "Ctrl+V" ou
    "Command+V (⌘+V)"
  • 3:31 - 3:33
    dependendo do seu sistema operacional.
  • 3:33 - 3:37
    E agora que eu colei,
    só irei alterar os valores.
  • 3:37 - 3:42
    Então este será 'Daemon', 'gato' e 'preto'
  • 3:42 - 3:44
    então vamos fazer isso mais uma vez,
  • 3:44 - 3:52
    e este será 'Angel', 'gato' e 'laranja'.
  • 3:53 - 3:56
    Só fica muito chato
  • 3:56 - 3:59
    se realmente escrever os
    "< tr >" e "< td >" toda vez,
  • 3:59 - 4:03
    de modo que o truque de copiar e colar
    vai fazer tudo ficar muito menos chato.
  • 4:04 - 4:06
    E aí está: uma tabela.
  • 4:06 - 4:08
    Eu poderia facilmente adicionar
    mais colunas
  • 4:08 - 4:11
    bastando adicionar outra
    "< th >" no cabeçalho,
  • 4:11 - 4:13
    e em seguida "< td >" em cada
    uma das linhas,
  • 4:13 - 4:15
    se quisesse compartilhar mais detalhes
  • 4:15 - 4:17
    sobre os meus animais de estimação.
  • 4:17 - 4:20
    Talvez se pergunte como mudar
    a aparência da tabela
  • 4:20 - 4:22
    como a mudar as bordas, ou as cores
    ou espaçamento.
  • 4:22 - 4:25
    Você pode fazer isso com as
    propriedades do CSS,
  • 4:25 - 4:28
    que você já aprendeu,
    ou vai aprender em breve.
  • 4:28 - 4:32
    Tente fazer uma página igual e faça
    uma lista de seus animais de estimação
  • 4:32 - 4:33
    ou dos que você gostaria de ter.
  • 4:33 - 4:35
    Faça uma tabela com esses dados!
  • 4:35 - 4:36
    Traduzido por [Fernando dos Reis]
Title:
HTML: Tabelas
Video Language:
English
Duration:
04:36

Portuguese, Brazilian subtitles

Revisions