Alterner la couleur des lignes dans un tableau HTML

3 08 2010

Alterner la couleurs des lignes sur des <table> HTML peut faciliter la lecture, et ça rend les tableaux moins austères.

Il est possible de le faire facilement en PHP si votre tableau est généré dynamiquement (avec une simple variable mise à jour à chaque itération, à chaque ligne du tableau).

Sinon, il y a une méthode plus simple, c’est de le faire en CSS avec les pseudo éléments :

table tr{background-color:#eee;} /*couleur par défaut, pour IE)*/
table tr:nth-child(odd) { background-color:#eee; } /*couleur des lignes pair*/
table tr:nth-child(even) { background-color:#fff; } /*couleur des lignes impair*/

J’ai aussi vu une méthode plus “oh yeah” avec des formules bizarres style 2n+1 = 3x+42y… :

table tr:nth-child(2n+1){
    background-color: #EEE;
}

Attention, ça ne marche qu’en CSS3 (comprenez : c’est pas près de fonctionner sur internet explorer, mais ça marche nickel sur tous les autres navigateurs).

Commentaires : 4 commentaires »
Catégories : Non classé