Alterner les couleurs sur un tableau html

0.00 avg. rating (0% score) - 0 votes
Partager:

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:

Fruits
pomme
poire
pêche
abricot
raisin

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


Tous les codes sont testés et sont fonctionnels, si un de ces codes ne marche pas chez vous, merci de me le signaler.
Partager:
0.00 avg. rating (0% score) - 0 votes

Vous aimerez aussi...

Laisser un commentaire