CSS Cores de linha alternativa

Podemos adicionar cor às linhas alternativas para tornar nossa tabela mais compreensível para o usuário, para que o usuário possa digitalizar facilmente os dados. Podemos mudar a cor das linhas alternativas usando CSS para obter mais atenção do usuário. No CSS, temos um seletor de estilo para mudar as linhas alternativas. É muito fácil alterar a cor das linhas alternativas usando o seletor de estilo CSS. Possui o seletor de Nth-Child () que obtém as linhas pares ou ímpares como um parâmetro e, em seguida, usa a propriedade cor de fundo dentro deste seletor de estilo para alterar a cor. Neste guia, mostraremos como usar o seletor de estilo CSS para alterar a cor de linhas alternativas. Vamos mudar a cor das linhas pares e ímpares de maneira diferente neste guia.

Sintaxe:

A sintaxe do seletor de estilo para alterar a cor de linhas alternativas é a seguinte:

: nth-child (par ou ímpar)
Declaração CSS;

Exemplo #1: Altere a cor das linhas uniformes

Crie o arquivo HTML para fazer tabelas contendo linhas e colunas e altere a cor das linhas alternativas usando o seletor de estilo CSS. O software que usamos para realizar esses exemplos é o Visual Code Studio. Temos que gerar o arquivo html e digitar o código do HTML que usamos para criar a tabela. Você pode ver o código para criar a tabela em html e este arquivo deve ser salvo com o “.Extensão de arquivo html ”.

Aqui, vamos projetar uma tabela e adicionar os dados nas linhas e colunas da tabela. O "”É usado para definir as células do cabeçalho da tabela. O "”É usado para definir as linhas em uma mesa. E a "”É para criar a célula de dados em linhas. Adicionamos seis linhas e três colunas a uma mesa. A primeira linha é a linha do cabeçalho, então usamos “

---

”Com as células do cabeçalho. Em seguida, adicionamos os dados nessas células dentro do “" marcação. Esses "”As tags estão dentro dos“”Que representa uma linha. Em seguida, adicionamos os dados em todas as linhas.

Quando esta tabela é criada, estilizamos esta tabela e alteramos a cor das linhas alternativas. Para isso, vamos projetar o arquivo CSS neste seguinte código do Visual Studio:

Código CSS:

Este código é para colorir as linhas alternativas da tabela que criamos. Este arquivo será salvo com o “.Extensão de arquivo CSS ”. Usaremos o arquivo CSS para aplicar o seletor de estilo CSS para alterar a cor alternativa das linhas.

Nós estilizamos a tabela usando a propriedade "colapso da borda" que define se a borda da tabela entra em colapso em uma única borda ou é separada. Aqui, definimos como "colapso". Ao usar esta propriedade, temos uma única borda da tabela. A largura desta tabela é definida como "100%". Então vem "Th" e "TD", que representam as células do cabeçalho e as células simples. Agora, nós os modelamos usando o "alinhamento de texto" que alinha o texto dentro das células à "esquerda" enquanto o colocamos para a "esquerda". Em seguida, usamos o seletor de estilo do CSS para alterar a cor das linhas alternativas. Aplicamos o “: nth-child ()” para que ele mude a cor das linhas uniformes da tabela. Colocamos a cor "verde claro" como a cor de fundo das linhas uniformes usando a propriedade CSS Background-Color.

Saída:

A saída é renderizada na tela pressionando "Alt+B" dentro do arquivo html que criamos anteriormente. A saída mostra a cor verde para todas as linhas uniformes, pois aplicamos o seletor de estilo às linhas uniformes da tabela.

Exemplo #2: Altere a cor das linhas ímpares

Neste exemplo, vamos mudar a cor das linhas estranhas da tabela anterior que projetamos no primeiro exemplo.

Código CSS:

A borda da tabela é desmoronada aqui, então aparece como uma única borda. A largura da tabela é "110%". O "alinhamento de texto" é usado para o alinhamento do texto. Coloca o texto dentro das células que queremos. Definimos o "alinhamento de texto" para o "centro" e o texto é colocado no centro da célula. O "preenchimento" gera o espaço entre a borda da tabela e o conteúdo escrito na tabela. Esse "preenchimento" é "10px", por isso é usado para gerar um espaço "10px" entre o conteúdo da tabela e a borda. Em seguida, passamos "estranho" para o seletor de estilo. Definimos a cor "rosa" como fundo das linhas estranhas, e a cor das linhas estranhas será renderizada como "rosa". Vamos verificar a seguinte saída:

Saída:

Aqui, vemos que a cor de fundo das linhas estranhas fica rosa porque mudamos a cor das linhas alternativas.

Exemplo # 3: Altere a cor das linhas pares e ímpares

Em nosso terceiro exemplo, mudaremos as cores das linhas pares e ímpares usando o mesmo seletor de estilo de CSS que também usamos nos exemplos anteriores. Mas aqui, usaremos pares e estranhos na tabela única.

Código CSS:

A largura é selecionada como "100%". A fronteira está definida como "colapso". O preenchimento é selecionado como "7px". A "borda" é "preta" em cores, sobre "2px" em largura, e o tipo de borda criado é "sólido". Primeiro, definimos a cor do fundo da linha como "rosa", mas quando usamos o seletor de estilo, a cor das linhas mudará. Aplicamos o seletor de estilo ao número "ímpar" de linhas. Isso mudará a cor das linhas estranhas em nossa mesa. Queremos alterar a cor de fundo das linhas ímpares para azul claro, então usamos a propriedade "cor de fundo" que é fornecida pelo CSS e definimos a "cor" como "azul claro". Então, também mudamos a cor das linhas "uniformes" para "amarelo-verde". Usamos o mesmo seletor de estilo novamente e, desta vez, o usamos para alterar a cor das linhas uniformes. Colocando a cor “verde-amarelo” para as linhas uniformes.

Saída:

Nesta saída, as linhas alternativas exibem cores diferentes. As fileiras estranhas são azuis claras e as fileiras pares são verde-amarelas. Esta é a maneira de mudar a cor das linhas alternativas usando o seletor de estilo CSS.

Conclusão

Este guia explicou o conceito de alterar as cores alternativas da linha usando o seletor CSS NTH-Child (). Explicamos como ele funciona com o número ímpar de linhas e também com o número par de linhas e como isso muda a cor usando a propriedade cor de fundo. Neste guia, usamos o seletor do Nth-Child () e aplicamos cores diferentes às linhas alternativas e explicamos cada código em detalhes. Fornecemos o HTML e o código CSS, juntamente com sua respectiva saída.