Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1949 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Plusieurs tableaux mais avec couleurs différentes ?

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Plusieurs tableaux mais avec couleurs différentes ?

n°2327518
snowden
Posté le 10-01-2019 à 22:19:18  profilanswer
 

Bonjour,
 
Je reviens vers vous pour un autre soucis et je n'arrive pas à le régler.
 
J'ai sur une page html plusieurs tableau dont certains doivent être dans des couleurs différentes au niveau du background du titre et des contours (border)
Mais je n'arrive pas à appliquer ces modifications via une classe ajoutée. Mes connaissances étant plus que limitées, je me tourne vers vous.  
 
Sauriez-vous m'aider svp ?
 
Tableau original :
 
Code HTML :

Code :
  1. <table><thead>
  2.                         <tr><th colspan="4">Tableau 1</th></tr>
  3.                         <tr><th>Valeur1</th><th>Valeur2</th><th>Valeur3</th><th>Valeur4</th></tr>
  4.                         <tr><td>exemple1</td><td align="center">exemple2</td><td align="center">exemple3</td><td align="center">exemple4</td></tr>
  5.                         <tr><td>exemple1</td><td align="center">exemple2</td><td align="center">exemple3</td><td align="center">exemple5</td></tr>
  6.                         <tr><td>exemple1</td><td align="center">exemple2</td><td align="center">exemple3</td><td align="center">exemple6</td></tr>
  7.                        </tbody></table>


 
Code CSS :
 

Code :
  1. table {
  2.   background : #f4f4f4;
  3.   font-family: 'Arial';
  4.   font-size: 13px;
  5.   width: auto;
  6.   margin: 25px auto;
  7.   border-collapse: collapse;
  8.   border: 1px solid #eee;
  9.   border-bottom: 2px solid #686868;
  10.   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.05), 0px 10px 10px rgba(0, 0, 0, 0.05), 0px 5px 10px rgba(0, 0, 0, 0.05);
  11.   font-weight: bold;
  12. }
  13. table tr:hover {
  14.   background: #e3e3e3;
  15. }
  16. table tr:hover td {
  17.   color: #666;
  18. }
  19. table th, table td {
  20.   color: #000;
  21.   border: 1px solid #dedede;
  22.   padding: 6px 35px;
  23.   border-collapse: collapse;
  24. }
  25. table th {
  26.   background: #686868;
  27.   color: #fff;
  28.   text-transform: uppercase;
  29.   font-size: 12px;
  30.   text-align: center;
  31. }
  32. table th.last {
  33.   border-right: none;
  34. }


 
Tableau avec modification :
 
Code HTML :

Code :
  1. <table><thead>
  2.                         <div ="test"><tr><th colspan="4">Tableau 1</th></tr></div>
  3.                         <tr><th>Valeur1</th><th>Valeur2</th><th>Valeur3</th><th>Valeur4</th></tr>
  4.                         <tr><td>exemple1</td><td align="center">exemple2</td><td align="center">exemple3</td><td align="center">exemple4</td></tr>
  5.                         <tr><td>exemple1</td><td align="center">exemple2</td><td align="center">exemple3</td><td align="center">exemple5</td></tr>
  6.                         <tr><td>exemple1</td><td align="center">exemple2</td><td align="center">exemple3</td><td align="center">exemple6</td></tr>
  7.                        </tbody></table>


 
Code CSS :
 

Code :
  1. table {
  2.   background : #f4f4f4;
  3.   font-family: 'Arial';
  4.   font-size: 13px;
  5.   width: auto;
  6.   margin: 25px auto;
  7.   border-collapse: collapse;
  8.   border: 1px solid #eee;
  9.   border-bottom: 2px solid #686868;
  10.   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.05), 0px 10px 10px rgba(0, 0, 0, 0.05), 0px 5px 10px rgba(0, 0, 0, 0.05);
  11.   font-weight: bold;
  12. }
  13. table tr:hover {
  14.   background: #e3e3e3;
  15. }
  16. table tr:hover td {
  17.   color: #666;
  18. }
  19. table th, table td {
  20.   color: #000;
  21.   border: 1px solid #dedede;
  22.   padding: 6px 35px;
  23.   border-collapse: collapse;
  24. }
  25. table th {
  26.   background: #686868;
  27.   color: #fff;
  28.   text-transform: uppercase;
  29.   font-size: 12px;
  30.   text-align: center;
  31. }
  32. table th.last {
  33.   border-right: none;
  34. }
  35. .test table th {
  36.   background: white;
  37.   border: 1px solid white;
  38.   color: black;
  39. }



---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
mood
Publicité
Posté le 10-01-2019 à 22:19:18  profilanswer
 

n°2327520
MaybeEijOr​Not
but someone at least
Posté le 10-01-2019 à 22:42:13  profilanswer
 

Bonjour,

 

Revoir l'écriture HTML. Une balise fermante implique une balise ouvrante. De même, une balise ouvrante implique, pour la majorité des balises, une balise fermante. Par conséquent, revoir :

Code :
  1. <div ="test">


Code :
  1. </tbody>


Code :
  1. </table>
 


Pour attribuer un style différent à un tableau, il suffit de lui définir une classe css grâce à l'attribut "class" :

Code :
  1. <table class="maclasseCSS">...</table>


Le style peut alors être définit pour tous les tableaux qui utiliseront cette même classe.
Il existe aussi la possibilité d'ajouter un style particulier grâce à l'attribut "id" :

Code :
  1. <table id="monid">...</table>


Néanmoins la valeur de l'attribut "id" est unique pour chaque élément HTML, deux éléments ne peuvent avoir le même "id", le style ne peut donc être appliqué qu'une fois.

 


Dans la partie css, le style d'une classe se définit de la manière suivante :

Code :
  1. .maclasseCSS { ... }


ou

Code :
  1. monélément.maclasseCSS { ... }
 

Le style d'un "id" se définit :

Code :
  1. #monid { ... }


ou pour plus de lisibilité :

Code :
  1. monélément.monid { ... }

Message cité 1 fois
Message édité par MaybeEijOrNot le 10-01-2019 à 22:43:18

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2327521
snowden
Posté le 10-01-2019 à 23:22:06  profilanswer
 

Bonjour MaybeEijOrNot,
 
Tout d'abord, merci de me venir en aide et de m'apporter ton savoir.
 

Code :
  1. <div ="test"> et </tbody>


C'est des erreurs que j'avais corrigé entre temps mais merci pour le rappel.
 

Code :
  1. </table>


Pas compris :(  
 
Sinon, j'ai essayé les deux méthodes (id et div) mais je rencontre le même soucis logique c'est que ça prend le changement en compte sur la seconde partie de tableau et pas uniquement sur le titre.
Logique puisque la seconde ligne  est aussi en "th".
 
Comment pourrais-je stp y remédier ? J'ai été voir quelques sites qui expliquent la <table> en CSS et je vois qu'il n'y a que du "td" et "th" donc je ne peux pas modifier la seconde ligne en mettant autre chose.
 
EDIT: à force de chercher et de faire des essais, j'ai trouvé la solution. Il me fallait mettre la classe dans tr :whistle:  
 
Merci encore pour ton aide :hello:


Message édité par snowden le 10-01-2019 à 23:26:10

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
n°2327534
MaybeEijOr​Not
but someone at least
Posté le 11-01-2019 à 09:46:01  profilanswer
 

Pour revenir sur les balises, tu montres une balise "div" ouverte mais non fermée, des balises fermantes tbody et table mais qui ne sont pas ouvertes.
 
L'attribution d'un style à un tr n'est pas une bonne pratique il me semble.
 
Mieux vaut partir sur une classe pour le tableau entier.

Code :
  1. table.maclasse { ... } /* style du tableau */
  2. table.maclasse tr th { ... } /* style de la première ligne d'en-tête */
  3. table.maclasse tr td { ... } /* style des cellules td */
  4. table.maclasse tr:nth-child(2) td { ... } /*style des cellules td de la deuxième ligne dans le tableau */


 
Tu peux retrouver les selecteurs CSS sur cette page : https://www.w3schools.com/cssref/css_selectors.asp notamment le :nth-child(n) qui permet pas mal de choses (sélection de noeuds pairs ou impairs ou selon une formule).


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2327535
snowden
Posté le 11-01-2019 à 09:53:56  profilanswer
 

Ok, merci pour le conseil :)
 
Pour la balise <table> non ouverte, c'est une erreur de ma part dans mon copier coller sur le forum car elle était bien ouverte et fermée. La tbody n'avait pas sa place par contre. C'est réglé maintenant et je vais voir pour le second tableau.


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
n°2327566
gilou
Modérateur
Modzilla
Posté le 12-01-2019 à 09:10:31  profilanswer
 

MaybeEijOrNot a écrit :

Bonjour,
 
Revoir l'écriture HTML. Une balise fermante implique une balise ouvrante.

Non, ça serait trop simple, html is not xhtml. Certains tags ouvrants sont optionnels, pour les éléments html, head, body, colgroup, dans certains contextes précis, définis ici: https://www.w3.org/TR/html5/syntax. [...] d-end-tags
Mais pour la balise ouvrante tbody de son exemple, on n'est pas dans un cas ou cela est légitime :

Citation :

A tbody element’s start tag may be omitted if the first thing inside the tbody element is a tr element, and if the element is not immediately preceded by a tbody, thead, or tfoot element whose end tag has been omitted. (It can’t be omitted if the element is empty.)

Pour sa table, il pouvait omettre le tag ouvrant tbody si le tag fermant thead était présent et inversement, mais l'absence des deux n'est pas permise.
(autrefois, la justification de ces omissions de tags était l'économie de bande passante réalisée, de nos jours, heu [:petrus75])
A+,


Message édité par gilou le 12-01-2019 à 09:25:59

---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --    In umbra igitur pugnabimus. --
n°2327572
snowden
Posté le 12-01-2019 à 12:47:19  profilanswer
 

Merci pour la précision.


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Plusieurs tableaux mais avec couleurs différentes ?

 

Sujets relatifs
Indices et tableaux c++ builder starter 10.1[Python] Tableaux qui s'actualisent en même temps
copier coller plusieurs feuilles dans une feuilleCalcul points de plusieurs events et membres
[Perl] Utiliser LibXML pour concatener plusieurs fichiers XMLChoix de formation entre plusieurs organismes
incrémentation auto vba excel en fonction de plusieurs cellulesDéplacer plusieurs fichier en ajoutant la date
Affichage évènement de plusieurs jours sur un calendrier[RESOLU] variable contenant plusieurs valeurs possibles
Plus de sujets relatifs à : Plusieurs tableaux mais avec couleurs différentes ?


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR