Para facilitar a leitura das tabelas, geralmente é útil estilizar linhas com cores de fundo alternadas. Uma das maneiras mais comuns de estilizar tabelas é definir a cor de fundo de todas as outras linhas. Isso é muitas vezes referido como "listras de zebra".
Você pode conseguir isso configurando todas as outras linhas com uma classe CSS e, em seguida, definindo o estilo para essa classe. Isso funciona, mas não é a maneira melhor ou mais eficiente de fazer isso. Ao usar esse método, toda vez que você precisar editar essa tabela, talvez seja necessário editar todas as linhas da tabela para garantir que cada linha seja consistente com as alterações. Por exemplo, se você inserir uma nova linha em sua tabela, todas as outras linhas abaixo dela precisarão ter a classe alterada.
O CSS facilita o estilo de tabelas com listras de zebra. Você não precisa adicionar nenhum atributo HTML extra ou classe CSS, basta usar o seletor CSS nth-of-type (n).
O seletor nth-of-type (n) é uma pseudo-classe estrutural em CSS que permite estilizar elementos baseados em seus relacionamentos com elementos pais e irmãos. Você pode usá-lo para selecionar um ou mais elementos com base em sua ordem de origem. Em outras palavras, ele pode corresponder a todo elemento que é o enésimo filho de um tipo particular de seu pai.
A letra n pode ser uma palavra-chave (como ímpar ou par), um número ou uma fórmula.
Por exemplo, para estilizar todas as outras tags de parágrafo com uma cor de plano de fundo amarela, o documento CSS incluiria:
p: n-de-tipo (ímpar) { fundo: amarelo;}
Comece com sua tabela HTML
Primeiro, crie sua tabela como normalmente a escreveria em HTML. Não adicione classes especiais às linhas ou colunas.
Na sua folha de estilo, adicione o seguinte CSS:
tr: n-de-tipo (ímpar) { background-color: #ccc;}
Isso irá estilizar todas as outras linhas com uma cor de plano de fundo cinza começando com a primeira linha.
Colunas alternadas de estilo da mesma maneira
Você pode fazer o mesmo tipo de estilo nas colunas de suas tabelas. Para fazer isso, simplesmente mude o tr em sua classe CSS para td. Por exemplo:
td: n-de-tipo (ímpar) { background-color: #ccc;}
Usando fórmulas em um seletor de tipo n-de-tipo (n)
A sintaxe de uma fórmula usada no seletor é um + b.
- a é um número que representa o tamanho do ciclo ou do índice.
- n é na verdade a letra "n" e representa um contador, com estrelas 0.
- + é um operador, que também pode ser "-"
- b é um inteiro e representa o valor de deslocamento - por exemplo, quantas linhas abaixo o seletor deve começar a aplicar a cor de fundo. Isso é necessário se um operador estiver incluído na fórmula.
Por exemplo, se você quiser definir uma cor de segundo plano para cada terceira linha, sua fórmula será 3n + 0. Seu CSS pode ser assim:
tr: n-de-tipo (3n + 0) { fundo: slategray;}
Ferramentas úteis para usar o seletor de última geração
Se você se sentir um pouco intimidado pelo aspecto da fórmula de usar o seletor de tipo pseudo classe, tente o site: nth Testador como uma ferramenta útil que pode ajudá-lo a definir a sintaxe para obter a aparência desejada. Use o menu suspenso para selecionar o segundo tipo (também é possível experimentar outras pseudo-classes, como n-filho).
