Você sabe criar tabelas listradas usando CSS? Para tornar as tabelas mais fáceis de ler, geralmente é útil estilizar as linhas com cores de fundo alternadas.
Uma das maneiras mais comuns de estilizar tabelas é definir a cor de fundo de cada linha. Isso geralmente é conhecido como “listrado de zebra”.
Você pode fazer isso definindo todas as outras linhas com uma classe CSS e, em seguida, definindo o estilo dessa classe. Isso funciona, mas não é a maneira melhor ou mais eficiente de fazer isso.
Ao usar este método, toda vez que você precisar editar essa tabela, pode ser necessário editar cada linha 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 precisam ter a classe alterada.
CSS facilita o estilo de tabelas com listras de zebra. Você não precisa adicionar nenhum atributo HTML ou classes CSS extras, 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 com base em seus relacionamentos com os 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 cada elemento que seja o enésimo filho de um tipo específico 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 fundo amarela, seu documento CSS incluiria:
p:nth-of-type(odd) {
background: yellow;
}
Antes de criar sua tabela listrada comece criando sua tabela HTML
Primeiro, crie sua tabela como faria normalmente em HTML. Não adicione nenhuma classe especial às linhas ou colunas.
Em sua folha de estilo, adicione o seguinte CSS:
tr:nth-of-type(odd) {
background-color:#ccc;
}
Isso estilizará todas as outras linhas com uma cor de fundo cinza começando com a primeira linha.
Estilo de colunas alternadas da mesma maneira
Você pode fazer o mesmo tipo de estilo nas colunas de suas tabelas. Para fazer isso, simplesmente altere o tr em sua classe CSS para td. Por exemplo:
td:nth-of-type(odd) {
background-color:#ccc;
}
Usando fórmulas em um seletor nth-of-type (n) para criar tabelas listradas
A sintaxe de uma fórmula usada no seletor é an + b.
- a é um número que representa o tamanho do ciclo ou índice.
- n é na verdade a letra “n” e representa um contador, que começa com 0.
- + é um operador, que também pode ser “-” (menos)
- b é um número inteiro e representa o valor de deslocamento – por exemplo, quantas linhas para baixo o seletor deve começar a aplicar a cor de fundo. Isso é necessário se um operador for incluído na fórmula.
Por exemplo, se você deseja definir uma cor de fundo para cada 3ª linha, sua fórmula seria 3n + 0. Seu CSS pode ter a seguinte aparência:
tr:nth-of-type(3n+0) {
background: slategray;
}
Ferramentas úteis para usar o seletor nth-of-type (n)
Se você estiver se sentindo um pouco intimidado com o aspecto da fórmula de usar o seletor de pseudo-classe enésimo tipo, experimente o site: enésimo Tester 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 enésimo tipo (você também pode experimentar outras pseudo classes aqui, como o enésimo filho).
