css pour un tableau

[Nullette]

Bonjour,

J'ai un tableau qui s'affiche un peu bizarre. Il y a des points (dotted) qui apparaissent plus gros ! ?

Ais-je fait une erreur ?

.tablenoire td,.tablenoire th,.tablenoire tr {
border-style:dotted; 
border-width:1px; 
border-color:#333333;
border-collapse:collapse;

D'autre part, je voudrais qu'il y est un espacement entre les cellules, est-ce que je met le code dans la page html ou dans la feuille de style ?

[Jan]

Bonjour,

L'effet des "points plus gros" que tu observes ne viendrait-il pas du fait que ta css définit un "border" à la fois pour <td> et pour <tr>? Du coup tes cellules sont encadrées, mais les lignes du tableau aussi, d'ou l'impression d'épaisseur du trait (en fait ce sont 2 traits côte à côte).

Quant à l'espacement entre les cellules, il faut le faire en css, par l'attribut margin dans tes cellules. Je te conseille l'excellent article dans openweb sur les tableaux et css: http://www.openweb.eu.org/articles/tableaux_css/

[Nullette]

Si je supprime .tablenoire td on ne voit plus les bords, si je supprime .tablenoire tr, il n'y a aucune différence.

J'ai essayé en remplaçant "dotted" par "thin solid" et l'effet "bizarre" est le même.. ?

[Jan]

Alors le problème vient peut être du border-collapse:collapse; que tu définis pour tr, th et td dans le code que tu indiques. Je pense que cet attribut doit plutôt s'appliquer à la balise <table>.

[Nullette]

J'ai modifié en :

.tablegris
{
   border: 1px dashed gray;
   border-collapse: collapse;
}
.tablegris td
{
   border: 1px dashed gray;
   padding: 4px;
   border-collapse: collapse;
}

Ca a l'air d'aller. Le css validator n'a rien dit.