Mostrando postagens com marcador CSS. Mostrar todas as postagens
Mostrando postagens com marcador CSS. Mostrar todas as postagens

sábado, 17 de abril de 2010

Tabelas Zebradas no padrão W3C

Muitos dos WEB Designers e desenvolvedores se preocupam em aprender a utilizar ferramentas IDE sofisticadas para construção de sites, mas esquecem que existem uma infinidade de recursos nos padrões W3C que de forma simples e padronizada podem ser implementadas.

Um exemplo simples é uma tabela zebrada, existe no CSS uma forma de fazer sem a necessidade de programar código JavaScript, jQuery, etc, essa forma é utilizando os seletores do CSS, mais precisamente a pseudo-classe nth-child().

A classe nth-child() possibilita a selação de um determinado elemento dentro de uma árvore de elementos, neste caso selecionaremos linhas ímpares dentro de uma tabela.

O regra que utilizaremos para o nth-child será: an + b

De forma simplificada, podemos dizer que para cada a linhas será selecionada a linha de número b.


Exemplo de uma Tabela Zebrada

Como uma tabela zebrada tem uma linha da mesma cor a cada 2 linhas podemos usar a seguinte regra:

Veja abaixo uma tabela com a regra 2n+1:


Veja abaixo uma tabela com a regra 3n+2:

É isso ai pessoal, espero ter ajudado a mostrar o quanto é importante conhecermos os padrões da web W3C.