[Résolu] Css et table

Bonjour à tous

Je sais comment gérer la balise table par les CSS au moyen du code à modifier ci-dessous :

/* Table */
table
 {
 border:2px solid #49141c;
 }
td {
 border:0px solid red; 
 }

Mais, cela affecte toutes les tables du site.

Est-il possible de gérer une table différemment des autres ?

L'intérêt de ma question :

Je voudrais que dans le lien ci-dessous,l'apparence du diagramme de la colonne de gauche soit gérée indépendamment de l'apparence des sous-diagrammes de la colonne de droite

http://damier.manceau.free.fr/nationale11/nationale11.htm

Merci de votre aide
Modifié par dado (19 Dec 2011 - 11:22)

Salut,
Laisse table et td dans le css pour le style général
Et mets une id ou une class à la table en question pour affecter des styles particuliers.

<table id="one">...</table>

table#one{
/* styles */
}

Merci jmlapam pour ta réponse rapide et explicite.

Je poursuis ma série de tests. Pour l'instant quelques problèmes subsistent :

Dans table#one :
le CSS externe gère les paramètres du diagramme principal sauf l'alignement. Pour y remédier il faut le déclarer dans la page HTML

<table id="one" align="center">

Dans le style général */Table/* :

le marquage de la ligne td s'applique aussi à la table

<table id="one"> 

Je te ferai part de mes résultats définitifs

à bientôt

Bonjour à tous,

Comme promis, voici après cinq jours de tests mes résultats

Avec l'aide de vos conseils, je suis arrivé à un résultat acceptable, sans trop savoir comment. J'ai tout d'abord appliqué à la lettre vos indication pourtant fort logiques sans obtenir de résultat.

Pour commencer, voici le résultat atteint.

Il est visible à l'adresse ci-dessous. Pour faire apparaître un sous diagramme sélectionner le lien 2 ou 3 dans la liste colonne de gauche.

http://damier.manceau.free.fr/bol/bol.htm

HTML :

Dans la table du diagramme principal, la bordure ci-dessous doit être déclarée. Sinon, la bordure interne du diagramme principal n'apparaît pas

<table align="center" border="1">

Pour les autre tables dans lesquelles aucune bordure ne doit apparaître :

<table class="tabletwo" align="center">

CSS :

/* Table*/
table
{border:2 solid black;}

 /*Autres tables*/
.tabletwo 
{border:0;}

A présent je souhaite gérer indépendamment la bordure interne et externe des diagrammes sans y parvenir :
Je parviens bien à affecter une bordure interne à toutes les tables, mais je n'arrive pas à la retirer là ou il n'en faut pas :

CSS :
La déclaration ci-dessous fait apparaître la bordure externe du diagramme principal et secondaire :

table
{border:5 solid green;}

Y ajouter la déclaration ci-dessous fait apparaître la bordure interne du cadre dans toutes les tables

td {border:1 solid red;}

Pour les autres tables dans lesquelles aucune bordure ne doit apparaître :

.tabletwo 
{border:0;}
td {border-width:none;} /*Cette délaration affecte les bordures internes de toutes les tables,
avec none aucune bordure, avec un chiffre positif toutes les tables sont marquées*/

Conclusion :

Pouvez-vous m'indiquer un moyen de faire apparaître les bordures internes (td) seulement là où elles doivent apparaître.

Merci de vos conseils

Salut Dado,

Si tu as appliqué une id elle surpasse la class dans le CSS donc je te conseille d'opter pour uniquement des class (sélecteurs de même poids)

<table class="one">

.one{
margin:0 auto; /* centrage */
border: 2px solid #000;
}

.two{
border:none; 
}

Bonjour jmlapam,

Tous mes nombreux tests restent infructueux.

Pour simplifier les choses, je suis reparti d'un document et d'une feuille de style vierges.

Impossible de faire obéir les" td" pour qu'elles deviennent individuellement, des bordures personnalisées ou des absences de bordures.

Dans l'image jointe, j'ai programmé la feuille de style externe de façon à ce que la bordure du "td" corresponde à la bordure de la table en plus clair.

http://damier.manceau.free.fr/illust/bordures.jpg

Quand je rentre la première "class", le résultat est correct.
Mais, à chaque fois que j'ajoute une "class", sa bordure td s'impose aux "class" qui la précèdent.
De même si la bordure de la dernière "class" est à "none", cela efface la bordure de toutes les autres "class".

De ton côté, as-tu déjà obtenu des bordures td indépendantes des tables répondant à des "class" différentes ?

Dans l'affirmative, je serais intéressé que tu puisses me communiquer un code complet

Merci de ton aide
Modifié par dado (27 Dec 2011 - 19:23)

Salut,

Oui alors c'est tout bête mais je ne vois pas de ";" après cette propriété (border) donc ceci explique peut-être cela.
Modifié par jmlapam (27 Dec 2011 - 20:19)

Pardon, jmlapam, le ";" après la propriété (border) a du disparaître au cour d'une de mes manipulations.

Je l'ai rétabli, mais la situation perdure. C'est toujours la dernière "class" rentrée qui détermine la bordure de tous les (td)

Voici mon code complet. As-tu une autre idée ?

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tableaux
</title>
<link href="tab.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table>
  <tr>
    <td>class=table</td>
  </tr>
</table>
<br><br />
<table class="one">
  <tr>
    <td>class=one</td>
  </tr>
</table>
<br><br />
<table class="two">
  <tr>
    <td>class=two</td>
  </tr>
</table>
<br><br />
<table class="three">
  <tr>
    <td>class=three</td>
  </tr>
</table>
<br />
</body>
</html>

CSS :

/* CSS Document */
/*Tables*/
table {
margin:0 auto; width:20%;
border:3px solid black;}
td { border:2px solid gray;}
 
.one {
margin:0 auto; width:20%;
border:3px solid darkblue;}
td { border:2px solid cadetblue;}

.three {
margin:0 auto; width:20%;
border:3px solid orange;}
td { border:2px solid yellow;}

.two {
margin:0 auto; width:20%;
border:3px solid green;}
td { border:2px solid lime;}

Salut c'est normal,

IL faut attribuer des class aussi à tes TD sinon selon les règles de la cascade c'est la dernière écriture qui s'applique.

Yop,
…ou plutôt utiliser un sélecteur de descendants (caractère blanc/espace) :

.one td {
…
}

Pour à revenir à un truc dit plus haut :

a écrit :
Oui alors c'est tout bête mais je ne vois pas de ";" après cette propriété (border) donc ceci explique peut-être cela.

Oui mais pas forcément : le point virgule est un séparateur (entre chaque ligne de déclaration), il n'est obligatoire qu'à partir de deux déclarations ou plus. Ici la règle n'en contenait qu'une, le séparateur est donc facultatif et n'affecte en rien le fonctionnement de la règle.
Cependant, c'est une bonne pratique quand on débute de le mettre systématiquement, ça évite de l'oublier si l'on rajoute des déclarations après…
Modifié par audrasjb (28 Dec 2011 - 10:43)

Formidable, jmlapam et audrasjb !!!

Champagne pour tout le monde

Hip hip hip hourra !

Tout fonctionne à présent à la perfection.

Le sélecteur de descendants est vraiment pratique. Il dispense de préciser davantage le td sur la page html.

Grâce à votre aide, j'ai fait un grand pas en avant dans la compréhension des CSS.
Pourtant, j'ai deux bouquins sur le sujet, mais j'ai quelquefois du mal à suivre ces histoires de déclarations et de hiérarchie.

Merci encore de votre aide
Modifié par dado (28 Dec 2011 - 22:05)

Tant mieux pour toi dado, ravi de t'avoir sorti de l'impasse, et effectivement audrajsb a raison, c'est vrai que mettre des class partout est moins indiqué que le sélecteur de descendants, le code est plus lourd... j'ai une tendance à la classite, m'enfin l'idée était là quand même !
Mets un résolu à côté de ton titre de sujet, d'autres pourraient avoir le même souci.

@audrajsb; je viens d'apprendre un truc, je mets le point-virgule par réflexe mais je pense que les profs l'ont dit parce qu'à l'époque on débutait totalement... de toute manière c'est pas ce qui bouffe de l'octet...
Modifié par jmlapam (28 Dec 2011 - 14:26)

dado a écrit :
Le sélecteur de descendants est vraiment pratique. Il dispense de préciser davantage le td sur la page html.
Grâce à votre aide, j'ai fait un grand pas en avant dans la compréhension des CSS.
Pourtant, j'ai deux bouquins sur le sujet, mais j'ai quelquefois du mal à suivre ces histoires de déclarations et de hiérarchie.

Oui, je te conseille vraiment d'apprendre à te servir des différents sélecteurs disponibles. Deux petits liens qui vont bien :
> sélecteurs CSS sur yoyodesign.org (en français)
> sélecteurs mais pas que… une mine d'or : reference.sitepoint.com (en anglais)
Pas de champagne en journée pour moi, merci quand même

jmlapam a écrit :
@audrajsb; je viens d'apprendre un truc, je mets le point-virgule par réflexe mais je pense que les profs l'ont dit parce qu'à l'époque on débutait totalement... de toute manière c'est pas ce qui bouffe de l'octet...

Oui, pour un caractère en plus, c'est même mieux de le mettre systématiquement, ça évite d'oublier de le mettre si on rajoute une déclaration… mais j'aime bien être précis sur la terminologie

audrasjb a écrit :

mais j'aime bien être précis sur la terminologie

On est là pour cela et c'est quand même bien de le savoir donc merci.

On se résume :

Comment paramétrer la bordure externe et interne des tables par les CSS :


Au départ, paramétrer les tables en général :

CSS :

table {
margin:0 auto; /*centrage*/
border:3px solid black;}
td {border:2px solid gray;}

Ensuite, marquer d'un sélecteur class les tables à personnaliser

HTML :

<table [#red]class="one"[/#]>
  <tr>
    <td>class=one</td>
  </tr>
</table>

<table [#red]class="two"[/#]>
  <tr>
    <td>class=two</td>
  </tr>
</table>

Puis, dans les CSS, déclarer le style au moyen :

• du sélecteur de class, pour la bordure de la table
• du sélecteur de descendants pour la bordure du td


CSS:

[#red].one {[/#]margin:0 auto; width:20%;border:3px solid darkblue;[#red]}[/#]
[#red].one td {[/#]border:2px solid cadetblue;[#red]}[/#]

[#red].two {[/#]margin:0 auto; width:20%;border:3px solid green;[#red]}[/#]
[#red].two td {[/#]border:none;[#red]}[/#]
 

Au résultat :

http://img715.imageshack.us/img715/1910/csstables.jpg
Modifié par dado (30 Dec 2011 - 17:16)