Intercalando linhas de uma tabela com CSS

Créditos: W3
Créditos: W3

Você está desenvolvendo, aí chega e dá de cara com uma tabela para listagem de determinado conteúdo. Há então uma necessidade de estilizá-la e intercalar a cor das linhas para ficar mais fácil de visualizar os dados, então… Como fazer?

Tabela sem formatação:

Coluna 1Coluna 2Coluna 3
Text 1Text 2Text 3
Text 1Text 2Text 3
Text 1Text 2Text 3
Text 1Text 2Text 3
Text 1Text 2Text 3

Não quebre a cabeça por muito tempo pensando como irá fazer isto com PHP, HTML ou qualquer outra linguagem. (Lembrando que HTML não é linguagem de programação)

CSS sem complicações

Explicando o código

tr:nth-child(even) –> TR:Seleciona linha da tabela | nth-child –>seleciona determinada linha ou sequência | (even) –> seleciona linhas ímpares ou comumente falando a cor da primeira repetição

tr:nth-child(odd) –> TR: Seleciona linha da tabela | nth-child –>seleciona determinada linha ou sequência | (odd) –> seleciona linhas ímpares ou comumente falando a cor da segunda repetição

Resultado

Teremos a seguinte tabela:

Coluna 1Coluna 2Coluna 3
Text 1Text 2Text 3
Text 1Text 2Text 3
Text 1Text 2Text 3
Text 1Text 2Text 3
Text 1Text 2Text 3

Selecionar determinada linha de tabela

E possível também selecionar uma determinada linha de uma tabela, exemplo: como selecionar a primeira e a segunda linha?

Resultado

Text 1Text 2Text 3
Text 1Text 2Text 3
Text 1Text 2Text 3
Text 1Text 2Text 3
Text 1Text 2Text 3

Se ainda restou alguma dúvida, comente abaixo.

Obs.: não se esqueça de importar o arquivo .css para a página que deseja aplicar este estilo.

Veja: Como importar CSS para HTML

Este artigo está em