Alterner les couleurs sur un tableau html

Je suis sur que vous vous êtes déjà demandé comment font certains sites pour pouvoir alterner des couleurs pour rendre leurs tableaux plus jolis et agréage a la lecture, je vais vous expliquer comment.
C’est grâce au modulo qu’on a vu en PHP!!!

D’habitude on fait notre boucle pour afficher les données.
La seule chose qui change c’est qu’on a une variable $i en plus qui augmente de 1 à chaque passage de la boucle. C’est celle-là qui permettra d’alterner les couleurs et grâce au modulo.

Pour faire simple, la variable $i commence a 1, le modulo regarde si le nombre est pair ou impair et comme il est impair affiche une des deux couleurs définie et on ajoute 1 a la variable $i.
Ensuite au passage de la boucle, le modulo revérifie la variable $i est pair ou impair et comme cette fois le nombre est pair on change de couleur et ainsi de suite…
Le code:

<?php
$i = 1;
$array = array("pomme", "poire", "pêche", "abricot", "raisin");
?>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
	<tr>
		<th>Fruits</th>
	</tr>
<?php
	foreach ($array as $key => $value)
	{
?>
	<tr>
		<td class="<?php echo ($i%2) ? "couleur_1" : "couleur_2" ?>"><?php echo $value; ?></td>
	</tr>
<?php
$i++; // On ajoute 1 a la variable $i.
	}
?>	
</table>

Une petite touche de CSS qui va contient les deux couleurs:

.couleur_1 {
background-color:#C0C0C0;
}
.couleur_2 {
background-color:#F1F1F1;
}

Ca qui donne:

  Alternées les couleurs des lignes sur un tableau HTML (682 bytes, 898 hits)