CSS : alternance des couleurs dans un tableau sans PHP

alternance tableau

Afin de permettra à un tableau d’être plus lisible, il est utile d’utiliser une alternance de couleur de fond des lignes.
Dans la plupart des cas, on utilisera un script php ou JavaScript qui insèrera un class différent sur chaque balise tr, il testera s’il s’agit d’une ligne impaire ou paire (odd ou even).

Aujourd’hui, il est désormais possible d’utiliser une alternance des couleurs dans un tableau sans pour autant user de javascript ni de php. Plus encore, il devient plus simple de cibler une ligne ou un groupe de lignes.
Ce moyen d’alterner les couleurs est possible avec les sélecteurs : last-child, nth-child, first-child, etc…

Dans ce qui va suivre, nous étudierons comment rendre les lignes impaires sur fond blanc et les lignes paires sur fond gris. Également, nous constateront que les cellules auront une bordure verticale sauf sur les bords du tableau.

Voici le code CSS pour réaliser cela :

Une petite explication s’impose ici, nth-child(odd) ne cible que les lignes impaires tandis que nth-child(even) ne cible que lignes paires. Concernant first-child, celui-ci a pour cible la 1ère cellule qui est appliquée à la balise td. Cela permet la suppression de la bordure gauche.

Au niveau de la compatibilité, nth-child est compatible avec les navigateurs Chrome, Firefox version 3.5+ et Internet Explorer 9+ tandis que first-child est compatible avec les versions 7+ d’IE et les autres navigateurs : Firefox, Chrome, Opera et Safari.

Concernant les navigateurs non prises en charge, il existe une autre solution alternative, il s’agit de jQuery. Grâce au sélecteur odd de jQuery, il est possible d’effectuer une alternance des lignes d’un tableau HTML.D’autant plus qu’avec seulement une ligne de code jQuery, on peut obtenir facilement un tableau HTML à lignes alternées :

Voici un démo

ligne impaire

ligne impaire

ligne paire

ligne impaire

ligne impaire

ligne impaire

ligne paire

ligne impaire

ligne impaire

ligne impaire

ligne paire

ligne impaire

ligne impaire

ligne impaire

Répondre