Formatage de tableau

J'ai le code suivant (il permet d'avoir un tableau avec des bordures intérieure) :

Fichier CSS =

.bordure
{
border: 1px solid gray;
border-collapse: collapse;
}

.borderline
{
border: 1px solid red;
color: #FFFFFF;
}

Code HTML =
<table class="bordure">
<tr>
<td class="borderline"> line1 - col1</td>
<td class="borderline"> line1 - col2</td>
<td class="borderline"> line1 - col3</td>
</tr>
<tr>
<td class="borderline"> line2 - col1</td>
<td class="borderline"> line2 - col2</td>
<td class="borderline"> line2 - col3</td>
</tr>
</table>


J'aimerais le simplifier le code de façon à ne pas devoir répéter les
<div class = "borderline"> sur chaque ligne. J'ais essayé de mettre dans le code html l'option rules="all" eu niveau de la balise table mais
en faisant ça, je ne sais pas modifier la couleur de la bordure intérieure (elle reste en gris) !
Je ne veux pas non plus redéfinir la balise <td> car j'ai sur le site des tableaux sans bordures intérieures.

Quelqu'un peut-il m'aider ???

Merci d'avance

Sur mon dernier site, j'ai mis un <table id="machin"> avec a l'interieur plein de <tr> et <td> et dans ma css, je fais :

#machin
{/*la tu mets la mise en forme du tableau*/}
#machin tr
{/*la mise en forme des lignes*/}
#machin th
...

et du coup ca t'evite de repeter pour chaque ligne le nom de ton style.

Je pense que tu peux toruver plein de tutos sur les tableaux.

a+
Modifié par carobee (28 Sep 2005 - 10:59)

Pour quoi tu ne fais pas :

table#bordure{
border: 1px solid gray;
border-collapse: collapse;
}

table#bordure td{
border: 1px solid red;
color: #FFFFFF;
}

Ainsi tu définis un id bordure pour le tableau et tu définis les balises td uniquement pour le tableau <table id="bordure">.
Cette présentation ne s'appliquera pas aux autres tableaux de ton document.
Modifié par EricLB (28 Sep 2005 - 11:04)

Merci beaucoup,

ça fonctionne à merveille.
Le problème est que je débute avec les CSS et je ne savais pas comment redéfinir la balise <td> pour un tableau particulier et non pas pour tous les tableaux.

Il y a cependant encore quelque chose de bizarre.

Quand je défini ceci :
CSS =

 table.bordure
  {
    border-collapse: collapse;
    border: 1px solid red;
    color: #000000;
  }

  table.bordure td
  {
    border: 1px solid gray;
    color: #000000;
  }

HTML =

<table class="bordure">
  <tr>
      <td> line1 - col1</td>
      <td> line1 - col2</td>
      <td> line1 - col3</td>
  </tr>
  <tr>
      <td> line2 - col1</td>
      <td> line2 - col2</td>
      <td> line2 - col3</td>
  </tr>
</table>

Avec IE, j'ai bien ma bordure extérieur en rouge et l'intérieure en gris mais avec firefox la bordure extérieure est en gris comme la bordure des cellules ??

Quelqu'un a-t-il une idée de ce qu'il modifier pour permettre la compatibilité du code entre les différents browser ?


Modifié par chrisrock (28 Sep 2005 - 12:47)

Salut chrisrock et bienvenue ici,

Voudrais-tu bien relire les Règles du forum, surtout celle qui explique comment afficher un code correctement ?

Merci d'avance