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).


Partager :

Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.
  • Digg
  • del.icio.us
  • Facebook
  • Digg -fr
  • Live
  • MisterWong Fr
  • Scoopeo
  • StumbleUpon
  • Technorati
  • Wikio FR

Actions

Informations

Et maintenant je fais quoi ?

Laisser un commentaire

Vous pouvez utiliser ces balises html : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>