CSS Table Alternative Row Color

Podemos colorir as linhas alternativas para tornar nossa tabela mais fácil de usar e permitir que o usuário vá rapidamente os dados. Podemos usar a propriedade CSS para modificar a cor das linhas alternativas para chamar a atenção do usuário. Um seletor de estilo no CSS é usado para alterar as linhas alternativas. Usando o seletor de estilo CSS, você pode modificar facilmente a cor das linhas alternativas. O seletor do NTH-Child () no CSS leva um parâmetro par ou ímpar e depois altera a cor usando a propriedade cor de fundo nesse seletor de estilo. Neste tutorial, modificaremos a cor das linhas pares e ímpares de várias maneiras.

Sintaxe:

Exemplo 1:

Crie um arquivo HTML para criar tabelas com linhas e colunas. Use o seletor de estilo CSS para alterar a cor das linhas alternativas. O código do Visual Studio é o software que usamos para executar esses exemplos. Como resultado, devemos criar um arquivo HTML e inserir o código HTML para fazer a tabela. O código HTML para construir a tabela pode ser visto aqui, e o arquivo deve ser salvo com o “.Extensão HTML ”.

Aqui, criamos uma tabela e preencemos suas linhas e colunas com dados. O "”É usado para definir as células do cabeçalho da tabela, o“”É usado para definir as linhas da tabela e o“”É usado para criar a célula de dados em linhas. Então, dentro do “”Tag, adicionamos os dados a essas células, e essas“”As tags estão dentro dos“”Tag, que representa uma linha. Nós preenchemos todas as linhas com os dados. Depois de gerarmos esta tabela simples, precisamos estilizá -la e modificar a cor das linhas alternativas usando o seletor de estilo.

O código fornecido é usado para colorir as linhas alternativas da tabela que geramos. Por ser o nosso arquivo CSS no qual utilizamos o seletor de estilo CSS para alterar a cor alternativa das linhas, ele é salvo com o “.Extensão de arquivo CSS ”. Usamos a propriedade "colapso da fronteira" para estilizar a tabela primeiro, que controla se a borda da tabela entra em uma única borda ou se ela é dividida. Nós configuramos para "colapso" neste caso. Como resultado da utilização, agora temos uma única borda de tabela. A largura desta tabela está definida como “100 %.”

Então, existem "th" e "td" que representam o cabeçalho e as células simples, respectivamente. Agora, estilize-os aplicando a propriedade "Alinhamento de texto", que alinha o texto dentro das células à "esquerda" enquanto a definimos. Também definimos seu "preenchimento" para "8px". Depois disso, para alterar a cor das linhas alternativas, usamos o seletor de estilo CSS que damos à propriedade “: Nth-Child ()”. Portanto, a cor das linhas pares muda. A propriedade “Background-Color” é utilizada aqui para alterar a cor da linha uniforme para “cinza claro” e o código para esta cor é “#f2f2f2”.

Ao pressionar o "alt+b" dentro do arquivo html que preparamos anteriormente, a saída é exibida na tela. As linhas uniformes aparecem em uma cor diferente, pois aplicamos o seletor de estilo às linhas uniformes da tabela.

Exemplo #2:

Neste exemplo, modificamos a cor das linhas ímpares da tabela anterior que construímos no primeiro exemplo. Não mudamos a tabela; Nós apenas mudamos a cor da linha das linhas estranhas aqui. A largura da tabela é “100 %."Então, temos o" th "e" td ". Definimos o "alinhamento de texto" para "Esquerda.”O texto dentro das células da mesa está posicionado no lado esquerdo da célula. O “preenchimento” cria um espaço entre a borda da tabela e os dados que são digitados dentro das células da tabela.

Então, este "preenchimento" está definido como "10px". É utilizado para criar um buffer "10px" entre o conteúdo da tabela e a borda. Agora ajustamos a cor das linhas "estranhas" da tabela. Então, usamos a propriedade "Nth-Child ()" aqui. A cor das linhas uniformes muda se o der à propriedade “: nth-child ()”. Aqui, a propriedade “Background-Color” é usada para alterar a cor da linha uniforme para “cinza claro” usando o código de cores “#f2f2f2.”

Você pode ver que a cor das linhas estranhas muda nessa saída porque a cor das linhas “ímpares” alternativas é alterada. E a cor de fundo apenas das linhas estranhas fica cinza.

Exemplo #3:

Em nosso terceiro exemplo, utilizamos o mesmo seletor de estilo CSS que usamos nos códigos anteriores para modificar as cores de linhas pares e ímpares. No entanto, usamos uma única tabela e alteramos a cor dos uniformes e as linhas estranhas. Aqui, a cor da "fronteira" é "preta". A largura da fronteira é aproximadamente "2px". E o tipo de borda fabricado é sólido na propriedade "fronteira" do CSS.

Além disso, a fronteira é "colapsada", então aparece como uma única borda. O "100%" é selecionado como a "largura". Então, temos o "th" e o "td" e alinham seu texto ao "centro" usando o "alinhamento de texto". Usamos o preenchimento "6px" para estes. Novamente, a borda para o cabeçalho e as células está definida como "2px" "largura", "sólido" e cor "preto". A cor das linhas muda quando usamos o seletor de estilo. O seletor de estilo é aplicado ao número "par" de linhas. Definimos a cor de fundo da linha para as linhas uniformes como “verde-amarelo” no início. Também queremos mudar a cor das linhas "ímpares", por isso usamos esse seletor de estilo novamente e, desta vez, colocamos o "ímpar" como o parâmetro do seletor "Nth-Child ()" e definimos seu "fundo- cor "para" verde claro ". Como resultado, a cor das linhas estranhas muda para "verde claro".

As linhas alternativas nesta saída são coloridas de maneira diferente. As fileiras pares são verde-amarelas, enquanto as linhas estranhas são verdes claras. Usando o seletor de estilo CSS, você pode alterar a cor das linhas alternativas.

Exemplo #4:

Este é o nosso último exemplo e vamos criar uma nova tabela contendo quatro colunas e seis linhas. Agora, usamos os dois seletores aqui neste código para alterar a cor da linha uniforme, bem como a cor da linha ímpar.

Aqui, estilizamos um pouco o cabeçalho, utilizando a propriedade "Alinhamento de texto" e configurando-a para o "centro". Além disso, definimos a “fonte da fonte” para a fonte “argelina”. A fonte "cor" deste cabeçalho é "vermelha". A fonte "Tabela" está definida como "Arial" e o "colapso da fronteira" também está definido como "colapso" neste exemplo. A "largura" está definida como "100px". As propriedades usadas aqui para o "TH" e "TD" são as mesmas que nos exemplos anteriores. Aqui, a cor da linha "uniforme" é definida como "verde claro" e a cor da linha "ímpar" é definida como "verde-marinho leve", utilizando o seletor "Nth-Child ()".

A saída é renderizada abaixo e você observará que as linhas pares são da mesma cor e as linhas ímpares são das mesmas cores também. Este é o resultado de utilizar o seletor "Nth-Child ()" em nosso código CSS.

Conclusão

Este guia demonstrou como alterar as cores alternativas da linha, utilizando o seletor CSS nt-child (). Cobrimos como funciona com um número ímpar de linhas, bem como com um número par de linhas. Usamos a propriedade "cor de fundo", que é usada para modificar a cor das linhas. Utilizamos o seletor do Nth-Child () para aplicar as diferentes cores às linhas alternativas neste guia, e passamos por cada código em profundidade. Também incluímos o código HTML e CSS, bem como a saída. Como resultado, você ganha muito conhecimento sobre o conceito CSS de mudar a cor das linhas alternativas.