Curso HTML Completo: Aula 09 - Tabelas

E aí Olá tudo bem pessoal agora Que Nós aprendemos a fazer aqui e usar as imagens a gente vai aprender também um recurso muito útil dentro do HTML que são as tabelas a gente usa muito tabelas né Para a gente visualizar dados para a gente ter ali a um painel administrativo onde a gente tem informações de clientes e coisas assim vamos ver então como que a gente cria uma tabelinha entender a lógica aqui do funcionamento das tags de uma tabela eu vou apagar essas imagenzinhas que a gente deixou aqui da última aula Vou deixar só

essa parte de cima porque tá legal Zinho deixamos o ícone aqui para ser representante da nossa tag de imagens que a gente aprendeu e aqui embaixo eu vou criar aqui um título dois com o nome tabelas e aqui dentro nós vamos criar aqui embaixo isso aqui nós vamos criar as nossas tabelinha certo até que a gente usa para criar uma tabela é a tag table assim tablet se escreve né e dentro da tag table a gente precisa colocar aqui o conteúdo da tabela certidão controle svq o seu nada quando eu fiz a minha tag table

até que tem boa ela tem uma maneira de você trabalhar um padrão que é como a gente faria uma tabela realmente um papel a gente não faria linhas e colunas então com a tabela funciona da mesma forma a gente tem uma tag chamada TR que significa uma linha Então o que eu colocar dentro dessa tag TR quer dizer que eu quero fazer uma linha e nessa primeira linha que eu tô colocando na minha tabela eu sempre vou colocar Quais que são os títulos das colunas então uma coluna é um th ou seja um table header

esse aqui é o título de uma coluna A gente só usa é esse th aqui essa tag tem a garça abertura de fechamento de entrega th no 1º TR ou seja na primeira linha então por exemplo vocês vão entender que eu vou fazer esse nome a idade bom e é peso sei lá o Olá já apareceu o nome idade e peso Ok então eu acabei de criar aqui três colunas coluna nome idade e peso agora para colocar um conteúdo dentro aqui do nome idade e peso eu preciso de fazer mais uma linha então vou fazer

um pr e dentro desse TR mais uma linha eu vou colocar um dado que seria um te de ou table data um um dado uma informação certo então em nome eu vou colocar aqui Dimitri a idade eu vou colocar 30 em peso eu vou colocar 85kg ok olá nome idade e peso se eu fosse fazer mais uma linha eu vou copiar esse TR aqui e vou colocar aqui em baixo Vou colocar aqui em João idade 34 anos 95 kg vamos supor lá coloquei mais uma linha entendeu a lógica TR é uma linha e a gente

usa o primeiro TR sempre para colocar os te hagas que seriam as colunas com os títulos que a gente vai ter lá em cima que sempre são a base da nossa tabela depois embaixo a gente vai colocar os Terres com as linhas que vão ter informações essas informações são sempre colocadas dentro dessas tags do tipo TD ou table data e assim a gente vai formando a nossa tabelinha se eu precisasse fazer mais uma coluna colocaria aqui ó mais um th ó e vou colocar assim ó linguagem e aqui eu vou colocar oh oh oh você

dá um salvar ficou mais uma coluna chamada linguagem selvagem já ia falar e aí aqui dentro eu coloco a informação por exemplo html e na próxima linha aqui no João eu vou colocar aqui o CSS né Ó então eu tô acrescentando mais uma coluna e mais alguns dados a gente vai aprender na no Próximo módulo a trabalhar com CSS CSS vai ser responsável por deixar nosso site bonito o o HTML como a gente já viu ele é só o esqueleto do site ele não trabalha a parte estética Então é só o conteúdo puro por isso

a gente só tá entendendo aqui a estrutura da tabela sem deixar ela assim estilizada mais bonitinho mas tem alguns recursos que a gente pode colocar que só alguns atributos que vem junto com a tag table e que a gente pode usar aqui que não são diretamente CSS são atributos que já são originais dessa dessa tag que é por exemplo Edit como no caso da imagem a gente pode colocar com Edith é 100 porcento Ou seja a largura eu quero que seja 100 porcento tá vendo ficou sem por cento outro atributo que a gente tem aqui

nativo da tag e é border a gente pode colocar borda igual "duplas um é dizer uma borda de um pixel E aí ele vai fazer essa gordinha aqui é ficar desse jeito ok então essa é uma forma da gente fazer uma tabelinha tá vendo que não ficou Centralizado aqui os nossos dados né só que os títulos ficarão centralizadas nossos dados não ficaram então a gente poderia colocar aqui um estilo Style isso aqui já SSS tá isso não é um atributo próprio da tabela já SSS mas só para gente deixar um pouquinho mais bonitinho não nosso

a nossa tabelinha a gente pode colocar aqui ó text-align que alinhamento do texto ao centro E aí eu dou um contra o s Olá ficou tudo alinhadinho no centro Beleza então é assim que a gente faz as nossas tabelas essa parte utilização não se preocupa muito que a gente ainda não começou a ver sobre a utilização de CSS aqui no curso Oi gente a você saber a construção de uma tabela Então a gente tem a tag table temos aqui uma linha com TR temos aqui as colunas principais sempre com t h e todos os outros

dados vão ctrz Contender com conteúdo bem tranquilo né pessoal então eu quero te dar assim eu te procuro uma tarefa um desafiozinho dessa aula aqui que às vezes quando a gente tá fazendo a primeira vez essa questão das tabelas dá um Nozinho na cabeça Nessas questões de linha e coluna e tudo mais tr-tr com t h a terra e com tb às vezes dá uma embaralhado um pouco então quero que você faça um exercício aí na sua casa para você também construir a sua tabelinha eu quero que você faça embaixo dessa tabelinha de exemplo aqui

que a gente usou você dá um BR lá e faça uma outra tabela pegando talvez algum item que você tenha na cozinha da sua casa uma tabela nutricional já viu que vem sempre nas embalagens né dizendo lá Quantas calorias tem né quanto à quantidade de vitamina valor calórico e as coisas do tipo pega um pacote de alguma coisa você acha aí na tua cozinha e tenta fazer essa tabelinha aqui então HTML para ver se você consegue fixar bem na sua mente como funciona aqui as tags do tipo table Beleza Espero que você tenha gostado dessa

aula se você gostou deixa aquele seu like continua assistindo esse curso clicando aqui num desses vídeos que vai estar aqui na tela para você continuar assistindo a Playlist e vendas outras aulas desse curso se inscreve no canal se não for escrito e até a próxima aula Valeu o