Plusieurs tableaux mais avec couleurs différentes ?

Plusieurs tableaux mais avec couleurs différentes ? - HTML/CSS - Programmation

Marsh Posté le 10-01-2019 à 22:19:18    

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. }
  26. table th {
  27.   background: #686868;
  28.   color: #fff;
  29.   text-transform: uppercase;
  30.   font-size: 12px;
  31.   text-align: center;
  32. }
  33. table th.last {
  34.   border-right: none;
  35. }


 
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. }
  26. table th {
  27.   background: #686868;
  28.   color: #fff;
  29.   text-transform: uppercase;
  30.   font-size: 12px;
  31.   text-align: center;
  32. }
  33. table th.last {
  34.   border-right: none;
  35. }
  36. .test table th {
  37.   background: white;
  38.   border: 1px solid white;
  39.   color: black;
  40. }



---------------
« 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. »
Reply

Marsh Posté le 10-01-2019 à 22:19:18   

Reply

Marsh Posté le 10-01-2019 à 22:42:13    

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.
Reply

Marsh Posté le 10-01-2019 à 23:22:06    

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. »
Reply

Marsh Posté le 11-01-2019 à 09:46:01    

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.
Reply

Marsh Posté le 11-01-2019 à 09:53:56    

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. »
Reply

Marsh Posté le 12-01-2019 à 09:10:31    

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!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 12-01-2019 à 12:47:19    

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. »
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed