Pbl avec les td et le css

[fredrick]

Bonjour à tous,

J'aimerais mettre des paramètres différents (couleurs différentes, etc...) selon les td de mon tableau. J'aimerais savoir comment y parvenir en sachant que je travaille avec une feuille de style.

lorsque je fais

.

tableau {paramètre}
.td {paramètre}

Cela prend en considéraion tous les td de mon tableau. Et lorsque je met une classe dans le td pour les différencier cela ne fonctionne pas avec tout. Par exemple ceci ne fonctionne pas :

<table>
<tr><td class="td-haut"></td></tr>
<tr><td class="td-normal"></td></tr>
<tr><td class="td-bas"></td></tr>
</table>

[u]fichier css[/u]

.tableau {paramètre}
.td-haut{text-align:center;}
.td-normal{vertical-align:center;}
.td-bas{text-align:right;}

mais la couleur de fond fonctionne. Par exemple ceci fonctionne.

.td-bas{color:green;background-color:red;}
.td-haut{color:black;background-color:white;}

Comment faire merci

[MarvinLeRouge]

Salut,

J'ai du mal à comprendre : dans la première feuille, tu utilises un sélecteur tableau alors qu'il n'y a pas de balise tableau, et un sélecteur .td alors qu'il n'y a pas de classe td, mais bien une balise td.

Rappel :

- si tu écris a {règles;}, tu appliques les règles à toutes les balises a

- si tu écris .b {règles;}, tu appliques les règles à tous les éléments ayant la classe b

- si tu écris #c {règles;}, tu appliques les règles à l'élément ayant l'id c

Pourrais-tu donner un lien vers ta page en ligne, stp ?

[fredrick]

Merci MarvinLeRouge,

J'avais oublié qu'on pouvait utiliser les id.

J'ai réglé mon problème grâce à toi en nommant chaque td avec un id différent .

<table>
<tr>
 <td id="td1">blabla</td>
 <td id="td2">blabla</td>
 <td id="td3">blabla</td>
</tr>
</table>

et ensuite sur ma feuille de style j'ai mis :

#td1{color:green; /*par exemple */}
#td2{color:red;}
#td3{color:blue;}

Voilà, j'espère que cela aidera les gens qui ont le même problème que moi et qui liront ces lignes.

[Dan]

Attention, selon les normes W3C les #id doivent être unique sur une page.

Donc il vaudrait peut-être mieux utiliser les classes dans ton cas !

<td class="td1">blabla</td>
<td class="td2">blabla</td>
<td class="td3">blabla</td>

td.td1{color:green; /*par exemple */}
td.td2{color:red;}
td.td3{color:blue;}

Dan