Efeito Zebra

O plugin

O efeito zebra deve pintar as colunas de uma tabela, colunas impares com uma cor e pares com outra cor.
Antes da aplicação do plugin, veja essa tabela simples HTML. Ela será o nosso controle:

Time P J V E D GP GC SG %
1 Fluminense 77 37 22 11 4 60 31 29 69.4
2 Grêmio 70 37 20 10 7 56 33 23 63.1
3 Atlético-MG 69 37 19 12 6 61 35 26 62.2
4 São Paulo 63 37 19 6 12 56 36 20 56.8
5 Corinthians 57 37 15 12 10 50 36 14 51.4
6 Vasco 55 37 15 10 12 43 43 0 49.5
7 Botafogo 54 37 15 9 13 58 48 10 48.6
8 Cruzeiro 52 37 15 7 15 45 48 -3 46.8
9 Internacional 51 37 13 12 12 44 40 4 45.9
10 Santos 50 37 12 14 11 47 43 4 45
11 Flamengo 49 37 12 13 12 37 44 -7 44.1
12 Ponte Preta 47 37 12 11 14 37 44 -7 42.3
13 Náutico 46 37 13 7 17 43 51 -8 41.4
14 Coritiba 45 37 13 6 18 50 60 -10 40.5
15 Portuguesa 44 37 10 14 13 39 41 -2 39.6
16 Bahia 44 37 10 14 13 36 41 -5 39.6
17 Sport 41 37 10 11 16 39 55 -16 36.9
18 Palmeiras 34 37 9 7 21 38 51 -13 30.6
19 Atlético-GO 30 37 7 9 21 37 66 -29 27
20 Figueirense 30 37 7 9 21 39 69 -30 27

Aplicando o plugin

Acrescente a classe zebra na tabela. Veja uma tabela que usa o efeito zebra:
Exemplo: <table classe="zebra">.

Time P J V E D GP GC SG %
1 Fluminense 77 37 22 11 4 60 31 29 69.4
2 Grêmio 70 37 20 10 7 56 33 23 63.1
3 Atlético-MG 69 37 19 12 6 61 35 26 62.2
4 São Paulo 63 37 19 6 12 56 36 20 56.8
5 Corinthians 57 37 15 12 10 50 36 14 51.4
6 Vasco 55 37 15 10 12 43 43 0 49.5
7 Botafogo 54 37 15 9 13 58 48 10 48.6
8 Cruzeiro 52 37 15 7 15 45 48 -3 46.8
9 Internacional 51 37 13 12 12 44 40 4 45.9
10 Santos 50 37 12 14 11 47 43 4 45
11 Flamengo 49 37 12 13 12 37 44 -7 44.1
12 Ponte Preta 47 37 12 11 14 37 44 -7 42.3
13 Náutico 46 37 13 7 17 43 51 -8 41.4
14 Coritiba 45 37 13 6 18 50 60 -10 40.5
15 Portuguesa 44 37 10 14 13 39 41 -2 39.6
16 Bahia 44 37 10 14 13 36 41 -5 39.6
17 Sport 41 37 10 11 16 39 55 -16 36.9
18 Palmeiras 34 37 9 7 21 38 51 -13 30.6
19 Atlético-GO 30 37 7 9 21 37 66 -29 27
20 Figueirense 30 37 7 9 21 39 69 -30 27

Customizando: Cores

O plugin utiliza os atributos data-*, conforme especificação da W3C.
Para alterar a cor das colunas pares, use data-par. Para modificar a cor das colunas impares, use data-impar
O valor dos atributos deve ser o código hexadecimal da cor desejada.
Exemplo: <table classe="zebra" data-par="#fee407" data-impar="#00ff06">

Time P J V E D GP GC SG %
1 Fluminense 77 37 22 11 4 60 31 29 69.4
2 Grêmio 70 37 20 10 7 56 33 23 63.1
3 Atlético-MG 69 37 19 12 6 61 35 26 62.2
4 São Paulo 63 37 19 6 12 56 36 20 56.8
5 Corinthians 57 37 15 12 10 50 36 14 51.4
6 Vasco 55 37 15 10 12 43 43 0 49.5
7 Botafogo 54 37 15 9 13 58 48 10 48.6
8 Cruzeiro 52 37 15 7 15 45 48 -3 46.8
9 Internacional 51 37 13 12 12 44 40 4 45.9
10 Santos 50 37 12 14 11 47 43 4 45
11 Flamengo 49 37 12 13 12 37 44 -7 44.1
12 Ponte Preta 47 37 12 11 14 37 44 -7 42.3
13 Náutico 46 37 13 7 17 43 51 -8 41.4
14 Coritiba 45 37 13 6 18 50 60 -10 40.5
15 Portuguesa 44 37 10 14 13 39 41 -2 39.6
16 Bahia 44 37 10 14 13 36 41 -5 39.6
17 Sport 41 37 10 11 16 39 55 -16 36.9
18 Palmeiras 34 37 9 7 21 38 51 -13 30.6
19 Atlético-GO 30 37 7 9 21 37 66 -29 27
20 Figueirense 30 37 7 9 21 39 69 -30 27

Customizando: Início e fim

Outro uso do atributo data-* serve para determinar o início e o final da aplicaçãoa do plugin.
Para alterar o início, use data-init. Para alterar o final, use data-end.
O valor deve ser o número da coluna desejada.
Exemplo: <table classe="zebra" data-par="red" data-impar="blue" data-init="3" data-end="9">

Time P J V E D GP GC SG %
1 Fluminense 77 37 22 11 4 60 31 29 69.4
2 Grêmio 70 37 20 10 7 56 33 23 63.1
3 Atlético-MG 69 37 19 12 6 61 35 26 62.2
4 São Paulo 63 37 19 6 12 56 36 20 56.8
5 Corinthians 57 37 15 12 10 50 36 14 51.4
6 Vasco 55 37 15 10 12 43 43 0 49.5
7 Botafogo 54 37 15 9 13 58 48 10 48.6
8 Cruzeiro 52 37 15 7 15 45 48 -3 46.8
9 Internacional 51 37 13 12 12 44 40 4 45.9
10 Santos 50 37 12 14 11 47 43 4 45
11 Flamengo 49 37 12 13 12 37 44 -7 44.1
12 Ponte Preta 47 37 12 11 14 37 44 -7 42.3
13 Náutico 46 37 13 7 17 43 51 -8 41.4
14 Coritiba 45 37 13 6 18 50 60 -10 40.5
15 Portuguesa 44 37 10 14 13 39 41 -2 39.6
16 Bahia 44 37 10 14 13 36 41 -5 39.6
17 Sport 41 37 10 11 16 39 55 -16 36.9
18 Palmeiras 34 37 9 7 21 38 51 -13 30.6
19 Atlético-GO 30 37 7 9 21 37 66 -29 27
20 Figueirense 30 37 7 9 21 39 69 -30 27

Crédito

Lucas Ribeiro Maia - Matrícula 39047