Mettre des couleurs de fond différentes dans cellules tableau

[Bt33bt]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Je dirai toujours, je ne sais même pas si ma demande à une solution
Lien du forum : http://safrane-biturbo.1fr1.net

Description du problème

Bonjour.

Nous utilisons sur notre forum plusieurs tableaux qui servent à faire un recensement.

Ma question est la suivante, peut-on utiliser des couleurs de fond de cellule plutôt que des couleurs de police. Ceci serait bien plus pratique à mettre en forme.

Le but serait de faire des groupes de lignes avec différentes couleur, cela permettrait d'être plus visible et plus facilement lisible que le changement de couleur de la police.

J'espère avoir était suffisamment claire, et j'espère que ça peut se faire, car ça me faciliterait grandement le travail pour le faire.

le but serait de pouvoir avoir ce genre d'apparence.

Avant :


Après :



Merci pour votre aide.

[Toryudo]

Bonjour !

A priori oui, il suffit d'associer des class à chaque élément <tr> dans le HTML, et de leur associer un background-color via du CSS. Par exemple, pour deux couleurs, on peut imager des <tr class="backjaune"> et des <tr class="backorange">, avec le CSS suivant :

Code:

tr.backjaune {
  background-color: yellow;
}
tr.backorange {
  background-color: orange;
}

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.

[Bt33bt]

Bonjour.

J'ai bien lu votre réponse pour mon aide, mais je vous avoue je suis un peu perdu.
Je m'explique, je ne comprends pas et ne sais pas utiliser le HTML, ni le CSS, et quoi que je peux essayer de trouver ou et comment le faire. Je suis aller voir dans le panneau d'administration du forum, je n'ai pas trouvé mon bonheur. Je continue à chercher, je suppose que c'est dans cette partie que l'on doit aller.
je voudrais savoir si on ne peux pas l'intégrer dans le message lui même qui est sous cette forme, en code :


Voici l'extrait d'une ligne du tableau :

[tr][td align="center"] 163 [/td]
[td align="center"]S000663 [/td]
[td align="center"]VF1B5450811291676[/td]
[td align="center"]2481 XA 93[/td]
[td align="center"]F000206 [/td]
[td align="center"]C000506 [/td]
[td align="center"]NORMAL[/td]
[td align="center"]FRANCAISE[/td]
[td align="center"]FRANCE[/td]
[td align="center"]MARS-94 [/td]
[td align="center"][/td]
[td align="center"]RXE [/td]
[td align="center"]Rouge 777 [/td]
[td align="center"][/td]
[td align="center"]France [/td]
[td align="center"]0 Km[/td]
[td align="center"]05/03/2024[/td]
[td align="center"][/td]
[td align="center"][/td]
[td align="center"][/td]
[/tr]

[MlleAlys]

Bonjour,
le html = le squelette de la page, le contenu,
le css = l'habillage, l'apparence.

Si je reprends le code proposé par Toryudo, vous devez dans la balise "tr" qui correspond à la ligne de votre tableau, ajouter class="backjaune" ainsi :

Code:

[tr class="backjaune"][td align="center"] 163 [/td]
[td align="center"]S000663 [/td]
[td align="center"]VF1B5450811291676[/td]
[td align="center"]2481 XA 93[/td]
[td align="center"]F000206 [/td]
[td align="center"]C000506 [/td]
[td align="center"]NORMAL[/td]
[td align="center"]FRANCAISE[/td]
[td align="center"]FRANCE[/td]
[td align="center"]MARS-94 [/td]
[td align="center"][/td]
[td align="center"]RXE [/td]
[td align="center"]Rouge 777 [/td]
[td align="center"][/td]
[td align="center"]France [/td]
[td align="center"]0 Km[/td]
[td align="center"]05/03/2024[/td]
[td align="center"][/td]
[td align="center"][/td]
[td align="center"][/td]
[/tr]

Une class est juste un nom pour un groupe d'élément. Le 1er code css proposé Toryudo, à mettre dans la feuille de style du forum, indique que tous les éléments "tr" qui fond partie de la class "backjaune" auront un fond de couleur jaune :

Code:

tr.backjaune {
  background-color: yellow;
}

De même si vous attribuez à votre ligne la class "backorange" ainsi :

Code:

[tr class="backorange"][td align="center"] 163 [/td]
[td align="center"]S000663 [/td]
[td align="center"]VF1B5450811291676[/td]
[td align="center"]2481 XA 93[/td]
[td align="center"]F000206 [/td]
[td align="center"]C000506 [/td]
[td align="center"]NORMAL[/td]
[td align="center"]FRANCAISE[/td]
[td align="center"]FRANCE[/td]
[td align="center"]MARS-94 [/td]
[td align="center"][/td]
[td align="center"]RXE [/td]
[td align="center"]Rouge 777 [/td]
[td align="center"][/td]
[td align="center"]France [/td]
[td align="center"]0 Km[/td]
[td align="center"]05/03/2024[/td]
[td align="center"][/td]
[td align="center"][/td]
[td align="center"][/td]
[/tr]

Le deuxième code css proposé par Toryudo indique que tous les éléments "tr" qui font partie de la class "backorange" auront un fond de couleur orange :

Code:

tr.backorange {
  background-color: orange;
}

Le nom de la class n'a pas d'importance en lui-même, si vous voulez mettre en bleu les lignes des personnes qui aiment le chocolat, vous pouvez très bien appeler votre class "chocolat" :

Code:

[tr class="chocolat"][td align="center"] 163 [/td]
[td align="center"]S000663 [/td]
[td align="center"]VF1B5450811291676[/td]
[td align="center"]2481 XA 93[/td]
[td align="center"]F000206 [/td]
[td align="center"]C000506 [/td]
[td align="center"]NORMAL[/td]
[td align="center"]FRANCAISE[/td]
[td align="center"]FRANCE[/td]
[td align="center"]MARS-94 [/td]
[td align="center"][/td]
[td align="center"]RXE [/td]
[td align="center"]Rouge 777 [/td]
[td align="center"][/td]
[td align="center"]France [/td]
[td align="center"]0 Km[/td]
[td align="center"]05/03/2024[/td]
[td align="center"][/td]
[td align="center"][/td]
[td align="center"][/td]
[/tr]

et indiquer dans votre css que les lignes faisant partie de la class "chocolat" doivent avoir un fond de couleur bleue :

Code:

tr.chocolat {
  background-color : blue;
}

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.

[Bt33bt]

Après avoir suivi toutes vos explications, qui sont claires et un peu de recherche dans le panneau d'administration, il fallait que j'ouvre les yeux simplement pour savoir ou changer le CSS. J'ai pu aboutir à la solution, merci beaucoup pour votre aide qui m'a bien été utile.
Votre aide a été parfaite, et désolé pour ce temps de réponse un peu long, beaucoup de choses à faire.
Je marque le sujet comme résolu.