Alterner les couleurs d'un tableau HTML
Alterner les couleurs d'un tableau HTML

Par Webmaster, publié le 01/10/2009 à 09:00:16 Pour changer la couleur de fond d'une ligne sur deux d'un tableau HTML, on peut utiliser le PHP et le CSS. L' exemple suivant est facilement applicable à une boucle de résultats d' une requête SQL.</p>
Etape 1 :
Pour commencer on va définir deux classes CSS différents :
- Une classe que l'on nommera pair et une autre que l' on nommera impair :
Etape 2 :
Du côté du PHP on va placer un compteur dans notre boucle qui s' incrémentera de un à chaque passage ( = on ajoute +1 ).Dans notre boucle on va tester si ce chiffre est pair ou impair et en fonction de ce test la classe CSS de notre ligne du tableau sera soit pair soit impair.
Mettez un compteur dans cette boucle mais vous auriez très bien pu utiliser la variable $i de la boucle comme variable " compteur " mais en général quand on récupère les résultats d' une requête SQL on boucle avec while d'où l' utilisation de la variable $compteur.
Et voilà vous obtiendrez un tableau HTMl avec des alternances de couleurs !

Etape 1 :
Pour commencer on va définir deux classes CSS différents :
- Une classe que l'on nommera pair et une autre que l' on nommera impair :
pair{
background-color: blue;
}
.impair{
background-color: red;
}Etape 2 :
Du côté du PHP on va placer un compteur dans notre boucle qui s' incrémentera de un à chaque passage ( = on ajoute +1 ).Dans notre boucle on va tester si ce chiffre est pair ou impair et en fonction de ce test la classe CSS de notre ligne du tableau sera soit pair soit impair.
Mettez un compteur dans cette boucle mais vous auriez très bien pu utiliser la variable $i de la boucle comme variable " compteur " mais en général quand on récupère les résultats d' une requête SQL on boucle avec while d'où l' utilisation de la variable $compteur.
<table>
<?php
$compteur=0;
for($i=0,$i<10;$i++)
{
if($compteur%2==1) { // si le nombre est impair
$classe = "impair";
} else { // autrement il est pair
$classe = "pair";
}
?>
<tr class="<?php echo $classe; ?>"><td>Cellule</td></tr>
<?php
$compteur++; // $compteur = $compteur +1
}
?>
</table>
Et voilà vous obtiendrez un tableau HTMl avec des alternances de couleurs !
Ajouter un commentaire


















