Efeito Zebrado na tabela com HTML e CSS;

[@arnaldopereiradeoliveira1826]

Olá Gustavo meu professor, sou aposentado tenho 59 anos e apenas digitava; incentivado por meu filho que trabalha com programação passei a assistir seus vídeos das aulas de JavaScript e me identifiquei muito com sua didática, olha, estou bem no início na 4ª aula e pretendo continuar… só quero lhe agradecer pela chance do aprendizado valeu fuiiiiii.

[@mr.reverie1984]

Continuou com o curso, sr? Muito massa você estar estudando isso por incentivo do seu filho

[@danieltauil5457]

Sensacional Arnaldo!!! Parabéns pela iniciativa!! E não desista... siga em frente!!! Abraço!

[@PatsFerrer]

Que legal de ler isso! Continue firme!

[@_Victor-Lourenco]

Em tabelas que possuem muitos dados, divididos em muitas colunas e ainda com letras pequenas, fica difícil para o nosso cérebro saber onde está um determinado dado... Um dos recursos muito utilizados para melhorar essa questão é o *efeito zebrado,* que é colocar _uma linha de cada cor_ dentro da sua tabela. Para criar o efeito zebrado dentro das linhas da sua tabela, é importante que determinemos em que parte da tabela queremos aplicar esse efeito, geralmente aplicamos somente nas linhas da parte do corpo da tabela (tbody). Para fazer isso, basicamente devemos abrir um seletor para o elemento " tbody ", indicado o seu filho direto que queremos formatar, que no caso é o " tr " (linha de tabela)... No elemento tr, iremos usar a pseudo-classe " *nth-child()* ". Para essa pseudo-classe, devemos inserir um valor dentro dos parênteses: O valor para aplicar o efeito zebrado é o " *2n* ", que faz com que o background-color configurado para a linha seja inserido de duas em duas linhas, uma sim e uma não (mude o valor numérico se desejar um intervalo maior de inserção). Ficaria assim: *tbody > tr:nth-child(2n) {* *background-color: lightgray;* *}* *Obs.:* Dentro do seletor exemplificado acima, temos uma declaração de especificação de background, a cor determinada nessa declaração que vai ser aplicada nas linhas zebradas. Na pseudo-classe " nth-child() ", ao invés de usarmos o valor " 2n ", também podemos usar os valores nominais " even " *OU* " odd " (par ou ímpar). Com um desses dois nomes como valor, podemos deixar toda linha que é ímpar (odd) com background, ou vice-versa, se for o valor even. O valor " 2n " seria equivalente ao valor nominal " even " (par) Entretanto, também temos o valor " *2n-1* ", que seria equivalente ao valor nominal " odd " (ímpar) Como já foi digo, dentro do seu seletor, você deve determinar uma cor para o background da linha, entretanto esse seletor só vai aplicar essa cor para as linhas pares (ou impares se for o caso), gerando o efeito zebrado... Dessa forma, uma dica é abrir um outro seletor, idêntico ao primeiro mas com um valor OPOSTO para a pseudo-classe " *nth-child()* " (se o valor do primeiro seletor é odd, para o segundo tem que ser even e vice-versa). E a cor do background configurada nesse segundo seletor tem que ser diferente. Assim você criará um efeito zebrado com cores que se alternam... Uma linha azul e outra amarela e assim por diante por exemplo. Com a pseudo-classe " nth-child() " exemplificamos o efeito zebrado com uma declaração de background-color dentro do seletor, entretanto, além da cor, dentro desse mesmo seletor você também pode fazer outras alterações que se manifestam de forma alternada (linha sim, linha não). Como por exemplo: Mudar o tamanho da letra, peso da letra, sublinhar e por aí vai... *Nota:* Você deve utilizar a técnica do efeito zebrado em tabelas que tem muitos dados lateralmente (muitas colunas), quando a letra é muito pequena e quando a tabela tem muitas linhas.

[@jonasadl1112]

Obrigado pelas suas anotações!

[@tiago.sampa_]

📝 LEMBRE-SE: *Usar a pseudo-classe* :nth-child( ) - Para linhas pares usar (even) ou (2n); - Para linhas ímpares usar (odd) ou (2n-1). *Ex:* tbody > tr:nth-child(odd) { background-color: white; (opcional quando o fundo já for branco) } tbody > tr:nth-child(even) { background-color: lightgray; }

[@Familyhayzn]

sempre pego seus resumos, obrigado

[@helensorayaprigoli4226]

Seus resumos são sempre muito bons, agradeço por contribuir conosco 🥰

[@jonasadl1112]

Obrigado pelo seu resumo!

[@PatsFerrer]

Amo o fato dele separar cada detalhe do assunto.. pq ajuda na fixação do conteúdo e simplesmente não é despejado todo de uma vez! Obrigada, professor!

[@cauancarlos5251]

curiosidade: "nth" quer dizer "enésimo", por isso você manipula o n para selecionar as tags as quais estilizar. 2n funciona pois o CSS pega os números naturais e multiplica por dois; você vai tendo 2, 4, 6, 8 e assim por diante, que são os números pares!! para os ímpares, você subtrai 1, assim "volta uma casa" em relação aos pares: 1, 3, 5, 7, ...

[@miruporai]

Excelente curso.. tô muito feliz que tô acompanhando bem. Já fiz marketing e agora vou começar js. Obrigada professor 💓

[@chuazinerd3340]

Fazendo o curso de algoritmos com portugol, fico muito grato por cada curso, saúde, paz e feliz natal e ano novo aidantado. Sucesso.

[@carolsougon4425]

Suas aulas são incríveis demais! Mas percebi que você comenta sobre o material de apoio do Cap 21, e fui procurar no seu GitHub, mas não encontrei nada lá. Lá só tem disponível até o Cap 20. 😶‍🌫 Mas, fora isso estou encantadas com os seus métodos! Parabéns!!!!!

[@miguelmassolardecarvalhopi9917]

Sim achei isso bem estranho também! Sua mensagem já tem cinco meses e até agora não ouve atualização do material...

[@disantosification]

esse comando já deixa a linha zebrada tbody tr:nth-child(even){ background-color: #ddd; } só usar ai pessoal

[@ovelhanerd]

Mesma coisa que falei no outro comentário, muito coerente!

[@cezarlobo]

Mesma coisa que ele fez

[@dennisro93]

impar é odd e par é even

[@tiago.sampa_]

Vc assistiu a aula amigo???

[@MPENT12]

Ótima aula professor!!!

[@ovelhanerd]

Mais um vídeo de qualidade, que ótimo que hajam esses vídeos curtos, que facilitam futuras revisões

[@lucianoluzembo1692]

Continue assim muita força, motivação feliz natal e um próspero ano novo #Angola

[@wandersonjunior4023]

valeu gustavão como sempre salvando os gafanhotos turma!!!

[@vitorfontes4202]

Obrigado

[@joaopoliceno8844]

Muito bom.

[@feliphe..]

Aulas muito boas, incrivel

[@fj6277]

Top

[@Unknown-rg1jj]

4:38 Eu fazendo colorido com as cores do Brasil e ouvi isso kkkk 5:02 kkkk Mas é só pra usar o que eu aprendi até agora. Não é como se eu fosse usar isso normalmente.

[@andretakayama2088]

Baita aula, como sempre

[@simoniltonfernandes6051]

Meu amigo Gustavo Guanabara. Adoro seus ensinos, mais seria melhor vc colocar um zoo igual o curso de algoritmo

[@gabrieltioberio]

adorei

[@GuilhermeSilva-yp4fe]

ótima aula!

[@MarcosFelipe-up9lc]

Muito bom!

[@bachelor9861]

Complicado essa parada de 2n, 3n aqui no RJ, se for programar na favela errada pode morrer kkkkk

[@enthonyalencar8205]

o material em pdf desse capitulo foi tirado do ar?

[@efmsrm]

Gustavo ótimo seus cursos! Uma dúvida pf, como faria pra destacar a linha na qual o mouse estivesse em cima?

[@ziul]

usando o hover no css

[@lucascabrellibr]

table tr:hover {} (Daí você define dentro das chaves o estilo que quiser dar.)

[@curtiuseucomentario6203]

@@lucascabrellibr tem como eu fazer isso de passar o mouse e a frase ficar maior com o :hover? Eu uso o font-size pra isso? E se eu quiser colocar uma transição mais suave de aumentar quando passar o mouse e diminuir quando retirar? Eu uso transition? E se for ele, eu uso ele dentro do hover msm?

[@anarktv8098]

@@curtiuseucomentario6203 tbody > tr:hover { font-size: *px; transition: font-size .5s;} Coloque um valor em * que seja maior que o valor atual da fonte.

[@curtiuseucomentario6203]

@@anarktv8098 opa, valeu ai mano

[@brunoeufrasio]

Não quer zebra quando coloco a pseudo classe. Mas quando só colo tbody > tr { background-color : light gray; Ai funciona mas pinta tudo

[@jorgehenrique2643]

tbm não consegui, estou pesquisando para saber como fazer. Caso eu encontre irei compartilhar aqui

[@jorgehenrique2643]

Bruno, resolvi o meu tirando o tr e uando a pseudo-classe no tbody: tbody:nth-child(odd) { background-color: white; } tbody:nth-child(even) { background-color: lightgray; }

[@bachelor9861]

Colocaram ponto e vírgula até no título kkkkk

[@renatoorosco]

Nem tinha reparado kkk

[@bachelor9861]

@@renatoorosco kkkkkkk

[@renanmacho]

alguém sabe onde estão os materiais de apoio (pdf) do capitulo 21? nesse link que o professor coloca nas descrições dos vídeos só tem até o capitulo 20.

[@luisbae123]

Como que eu faço pra dar comando pra mesma linha par ficar com cores diferentes? tipo uma linha par azul e outra linha par vermelha

[@flutterflowtc]

como coloco esse codigo direto no elemento no caso preciso usar o nth-child inline

[@davidandrade2412]

No contexto que estamos, março de 2022, o amarelo e azul lembram as cores da Ucrânia que luta pra não ser tomada pela Rússia.

[@renatoorosco]

É verdade.

[@Leossj1]

Lembrei isso na hora kkk

[@adrielpeter6695]

pq os videos demoram a entrar no site?

[@jefferson8055]

Eu tinha feito o efeito zebrado colocando classe manualmente 😂

[@eduardorosa2644]

[@clebersantos7519]

Posso, é possível fazer um calendário usando tabelas, recomendável?

[@davibastos3009]

ate dar, porém vai ficar pelas semanas, e nao pelos dias, nao sei se dar para fazer saltar lateralmente mas eu creio que deva dar sim!

[@vinicius.teipei]

Olá mandei direct para o Instagram. Não estou conseguindo acessar a prova do módulo 2 pelo site. Está ruim o site?

[@douglasmateusfranco8946]

Não sei pq mas o efeito está sendo aplicado na horizontal apenas

[@jairoprates4300]

Imagem embassada

[@curtiuseucomentario6203]

po, no 144p é foda tbm neh kkkk

[@simplicidadelegal]

Compre óculos

[@ramonrodrigues1926]

Nossa não acredito te tem um pseudo para facilitar a ordenar as cores. Eu fazendo um class para todas as que deveriam ter cor diferente

[@ZAKI44444]

Olá Gustavo meu professor, sou aposentado tenho 59 anos e apenas digitava; incentivado por meu filho que trabalha com programação passei a assistir seus vídeos das aulas de JavaScript e me identifiquei muito com sua didática, olha, estou bem no início na 4ª aula e pretendo continuar… só quero lhe agradecer pela chance do aprendizado valeu fuiiiiii.

[@ZAKI44444]

Fazendo o curso de algoritmos com portugol, fico muito grato por cada curso, saúde, paz e feliz natal e ano novo aidantado. Sucesso.