Coloration contrôlée d'un tableau html

**Skunka** · 26/06/2018, 17h30

Bonsoir,

j'espère que mon problème ne vient pas d'une erreur banale mais le voici: je récupère des données depuis ma bdd puis je les organise dans un tableau html, celui est correct, mais, par soucis de lisibilité, j'ai essayé de mettre en place une coloration des cellules du tableau suivant un ordre logique. Première ligne en vert, suivis de l'orange avant de revenir sur le vert, et par colonne, j'alterne la couleur (vert / vert pâle / vert / ...) mais voici ce que j'obtient:

Nom : Capture.JPG
Affichages : 3202
Taille : 198,7 Ko

Nom : Capture.JPG
Affichages : 3202
Taille : 198,7 Ko

(La première colonne qui n'apparaît pas complètement pour respecter l'anonymat des salariés mais elle n'est même pas colorée)

Il me semble flagrant que ce n'est pas le rendu que je souhaite

Voici le code correspondant:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
<table border="1" style="text-align: center;">
			<tr>
				<th> </th>
				<th colspan="2">Lundi</th>
				<th colspan="2">Mardi</th>
				<th colspan="2">Mercredi</th>
				<th colspan="2">Jeudi</th>
				<th colspan="2">Vendredi</th>
			</tr>
			<tr>
				<td> </td>
				<td>M</td>
				<td>A</td>
				<td>M</td>
				<td>A</td>
				<td>M</td>
				<td>A</td>
				<td>M</td>
				<td>A</td>
				<td>M</td>
				<td>A</td>
			</tr>
 
			<?php
			$numCouleur = 21; //Variable servant à la coloration du tableau: 11=vert, 12=vert pale, 21=orange pale, 22=orange
			$req2 = "SELECT DISTINCT planningChantier.numSalarie, nomSalarie, prenomSalarie FROM planningChantier, salarie WHERE planningChantier.numSalarie = salarie.numSalarie AND numSemaine = ".$semaine." ORDER BY nomSalarie, prenomSalarie ";
			try{
				$stmt2 = $pdo->prepare($req2);
				$stmt2->execute();
				while ($row2 = $stmt2->fetch(PDO::FETCH_ASSOC)) {
					//Gestion de la variable de coloration
					if ($numCouleur > 20) { //ou si c'est égale à 21 ou 22
						$numCouleur = $numCouleur - 10;
					} else if ($numCouleur < 20) { //donc 11 ou 12
						$numCouleur = $numCouleur + 10; 
					}
 
					echo "<tr>";
						echo "<td class='".$numCouleur."'> <input type='hidden' value='".$row2["numSalarie"]."'>".$row2["nomSalarie"]."  ".$row2["prenomSalarie"]; 
						echo "</td>";
						$req1 = "SELECT * FROM planningChantier, salarie, chantier, vehicule WHERE numSemaine =".$semaine." AND planningChantier.numSalarie = salarie.numSalarie AND planningChantier.numSalarie = ".$row2["numSalarie"]." AND planningChantier.numChantier = chantier.numChantier AND planningChantier.numVehicule = vehicule.numVehicule ORDER BY nomSalarie, prenomSalarie, dateJour, numCreneau";
						$stmt1 = $pdo->prepare($req1);
						$stmt1->execute();
						while ($row1 = $stmt1->fetch(PDO::FETCH_ASSOC)) {
							echo "<td class='c".$numCouleur."'>";
							echo "".$row1["nomChantier"]."<br>".$row1["nomVehiculeABRG"];
							echo "</td>";
							//Gestion de la variable de coloration
							if ($numCouleur = 11 or $numCouleur = 21) {
								$numCouleur = $numCouleur + 1;
							} else if ($numCouleur = 12 or $numCouleur = 22) {
								$numCouleur = $numCouleur - 1;
							}
						 } 
 
					echo "</tr>";
				}
			}
			catch(Exception $e){
				print "Erreur ! ".$e->getMessage(). "<br/>";
			}
			?>

Je me sert d'une variable pour attribuer la valeur de la classe. Je pense que la logique du code est correcte (ou ma logique est à revoir!) et j'arrive pas à déterminer l'origine du problème...
N'hésitez pas si il vous faut plus d'informations et merci d'avance de vos réponses!

Edit: voici mon code couleur:
11 => vert
12 => vert clair
21 => orange clair
22 => orange

Cordialement,
Skunka.

Invité · 26/06/2018, 19h07

Bonjour,

1- L'alternance de couleur des lignes peut se faire en CSS pur :

tr:nth-child(odd) {...}
tr:nth-child(even) {...}

2- pour la 1ère colonne, idem :

tr td:nth-child(1) {...} ou tr td:first-child {...}

3- 1ère colonne, 1ère ligne :

tr:first-child td:first-child {...}

Voir cet exemple.

4- pour les cas particuliers (cellules colorées dynamiquement, en fonction du PHP), là tu peux utiliser des classes css.

5- je te conseille aussi de mettre un <thead> et un <tbody>

Les tableaux (XHTML & CSS)

**Skunka** · 27/06/2018, 10h22

Bonjour et merci de ta réponse,

j'ai essayé différente chose avec ce que tu m'as fournis mais je n'arrive pas à avoir le résultat voulu.
Voici ce qui me rapproche le plus de ce que je souhaite:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<style type="text/css">
        tr:nth-child(odd) {
                background-color: rgb(0, 179, 0, 1); /* vert */
        }
        tr:nth-child(even) {
                background-color: rgb(255, 102, 0, 1); /* orange */
        }
 
        td:nth-child(odd) {
                background-color: opacity:1; /* vert pâle */
        }
        td:nth-child(even) {
                background-color: opacity:0.7; /* orange pâle */
        }
        
</style>

Et un bref aperçu du résultat:

Nom : Capture.JPG
Affichages : 2740
Taille : 69,6 Ko

Les lignes sont correctement alternées mais pour les colonnes ce n'est pas ça...

4- pour les cas particuliers (cellules colorées dynamiquement, en fonction du PHP), là tu peux utiliser des classes css.

Je me demande si je ne suis pas dans un cas particulier et donc reprendre mon php serait-il plus pertinent ?

Cordialement,
Skunka.

Invité · 27/06/2018, 10h28

Bonjour,

1- Je t'ai mis des exemples de code CSS.
Tu pourrais au moins les copier correctement.

J'ai mis des liens aussi...

Et as-tu suivi mon conseil ?

2- Tu n'as pas defini de CSS pour la 1ere colonne...

tr td:first-child {...}

3- Et ton alternance ne correspond pas à ce que tu avais dit dans le 1er message (vert/vert clair).
Ce n'est même pas le même tableau !
Et trouve des couleurs moins criardes. Ça fait mal aux yeux...

**Skunka** · 27/06/2018, 11h19

Envoyé par jreaux62

Bonjour,
1- Je t'ai mis des exemples de code CSS.
Tu pourrais au moins les copier correctement.

J'ai mis des liens aussi...

Et as-tu suivi mon conseil ?

C'est la première fois que je me sert des "CSS selectors", il se peut que j'ai laissé une erreur certes (le manque de "table thead/tbody" avant tr td:first-child {...} ?).... mais j'ai tout de même pris le temps de lire les liens que tu as mis, chacun m'apportant des infos utiles, ainsi que d'autres explications sur ce sujet (notamment W3Schools). Quand à ton conseil, je l'ai bien appliqué mais pas directement sur ce tableau (j'avoue mon erreur d'avoir appliqué ce conseil à un seul tableau).

Envoyé par jreaux62

2- Tu n'as pas defini de CSS pour la 1ere colonne...

tr td:first-child {...}

La première colonne à les couleurs correctes ici, mais je vais tout de même m'arranger pour laisser en blanc les cellules vides.

Envoyé par jreaux62

3- Et ton alternance ne correspond pas à ce que tu avais dit dans le 1er message (vert/vert clair).
Ce n'est même pas le même tableau !
Et trouve des couleurs moins criardes ! Ça fait mal aux yeux...

Tu as manqué une information qui à crée cette confusion, l'alternance (vert/vert clair) se fait sur les lignes en vert mais j'ai la même alternance (orange/orange clair) sur les lignes oranges. La couleur des lignes alterne donc comme ci (vert / orange / vert /... ) afin d'avoir un maximum de lisibilité. J'espère avoir était plus clair cette fois-ci.
Effectivement le tableau n'est exactement le même, le précédent sert à l'affichage du planning et celui sert à sa création, la seule différence est le contenu des cellules ce qui n'impacte pas la coloration. Je ne voulais pas que le php déjà présent interfère avec la solution que tu m'as présenté mais les changements seront ensuite appliqués à tous mes tableaux.
Pour les couleurs, pas de panique! Elles ne sont pas définitives.

Je repose donc ma question, ce que je souhaite est faisable avec les ressources que j'ai et le problème vient de moi ou dois-je de nouveau attribuer mes "class" grâce au php ?

Cordialement,
Skunka.

Invité · 27/06/2018, 11h37

Alors redéfinis clairement ce qui ne va pas.

Pour moi, alterner 1 ligne sur 2 suffit.

Pas besoin de vert/orange + clair/foncé (soit 1 ligne sur 4).
Ça n'apporte rien en "clarté" !

Par contre, tu peux appliquer un effet "+ clair" sur le :hover.

**Celira** · 27/06/2018, 13h45

Je propose qu'on laisse nos amis du forum CSS s'occuper du cas

Je résume ce qu'on essaye d'avoir : les lignes alternent entre vert et orange et à l'intérieur d'une ligne, les colonnes alternent entre clair et foncé. C'est bien ça ?

Et sinon, en php, on pourrait faire ça avec 4 classes et deux modulos :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$css = [['vert', 'vert_clair'], ['orange', 'orange_clair']];
$l = 0;
$c = 0;
echo '<table>';
foreach($tab as $row) {
    echo '<tr>';
    foreach ($row as $val) {
        $class = $css[$l%2][$c%2];
        echo '<td class="'.$class.'">'.$val.'</td>';
        $c++;
    }
    echo '</tr>';
    $l++;
    $c=0;
}
echo '</table>';

Invité · 27/06/2018, 14h25

La solution CSS est préférable.

Toujours avec :nth-child

[EDIT]

...et par colonne, j'alterne la couleur (vert / vert pâle / vert / ...) ...

...à l'intérieur d'une ligne, les colonnes alternent entre clair et foncé. ...

Oups !
Mea culpa, j'avais zappé cette partie !

On aura alors :

tr:nth-child(odd) td:nth-child(odd) {...}
tr:nth-child(odd) td:nth-child(even) {...}
tr:nth-child(even) td:nth-child(odd) {...}
tr:nth-child(even) td:nth-child(even) {...}

**Skunka** · 27/06/2018, 14h46

Envoyé par Celira

Je résume ce qu'on essaye d'avoir : les lignes alternent entre vert et orange et à l'intérieur d'une ligne, les colonnes alternent entre clair et foncé. C'est bien ça ?

C'est très bien résumé!

Le code que tu m'as fournis est intéressant, j'ai eu du mal à le comprendre mais je l'ai adapté à mon code et j'obtiens un tableau sans coloration (tout blanc)...
Il a fallu que je déplace mon bout de code css, de ma page style.css, dans la balise <style> de ma page html/php pour que la coloration s'applique...
Je vais tout de même essayer la solution css pour me faire un avis sur la question! (Le code me semble plus "propre" pour une utilisation répétée)

J'aurais aimé répondre plus rapidement, mais à chaque prévisualisation de mon message, je m’apercevais de vos nouvelles réponses et je les prenais en compte avant de répondre!

Sujet résolu !

Merci de vos réponses,
Cordialement,
Skunka.

Coloration contrôlée d'un tableau html

Tableau en CSS

Discussions similaires

Partager

Partager