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 ?

Aucun commentaire

3 réponses à “Alterner la couleur des lignes dans un tableau HTML”

23 05 2023
Crystalann (03:43:58) :

Hi there, its good piece of writing concerning media print,
we all be aware of media is a impressive source of information.

31 05 2023
오피가이드 (02:15:26) :

Let me give you a thumbs up man. Can I with heart reach out
amazing values and if you want to with no joke truthfully see and also share valuable info about how to make a fortune yalla lready know follow me my fellow commenters!.

11 09 2023

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>