Discussion :

[ifr38]

Bonjour,

Je suis débutant en css et je recherche un moyen de colorer les cases de mon tableau si celui si est "plein" d'une couleur ou d'une autre couleur si la case est vide :

Par exemple

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
18
19
20
21
22
23
<table>
    <tr>
        <td id="case_nul"></td>
        <td>Personne 1</td>
        <td>Personne 2</td>
        <td>Personne 3</td>
        <td>Personne 4</td>
    </tr>
    <tr>
        <td>Puissant</td>
        <td></td>
        <td></td>
        <td class="plein">X</td>
        <td></td>
    </tr>
    <tr>
        <td>Petit</td>
        <td></td>
        <td class="plein">X</td>
        <td></td>
        <td></td>
    </tr>
</table>

je veux que les cases avec une croix soient Bleu et ceux vides rouges.

Pour mon exercice, uniquement en CSS svp ..

Merci a vous et bonne journée

[JefReb]

Oui on peut y réfléchir, mais même débutant, il est où le CSS? Cela nous aiderait à voir quelque chose de concret. Ha! faut l'écrire, j'avais pas compris.
Mais si c'est un jeu de morpion, je vois pas comment en Css pur ou un peu de javascript peut-être!

[Invité]

Bonjour,

Code css :

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

.plein { background:blue; }

ou

Code css :

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

.plein { background:#CEECF5; }

Voir :

• Les meilleurs cours et tutoriels CSS
• Glossaire des propriétés CSS
• III. Propriétés de mise en forme d'arrière-plans (background)
• Codes couleur HTML

[NoSmoking]

Bonjour,
pour ne pas appliquer une couleur, mise par défaut sur la TABLE, à une cellule on peut utiliser

Code :

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

1
2
3
table{
  empty-cells:hide;
}

[Bovino]

Il existe aussi la pseudo-classe :empty qui pourra te rendre service.