Mise en page de tableau

Voilà, j'ai plein de modèle de tableaux différents dans mon code (et autant d'utilisation), mais je voudrais savoir comment faire pour faire pour regrouper.

En gros pour l'instant, je sais que :

table.maclasse td{
   border: 1px dashed #5C4018;
}

me permet d'éviter de répéter ma classe sur tous mes td. (bien pratique d'ailleurs^^)

mais je me retrouve quand même avec des bouts de css répétitifs que je pourrais et voudrais esquiver. exemple:

table.border1{
    border-width: 1px;
    border-style: dashed;
    border-color: #5C4018;
}

table.pleine{
  width: 100%;
}

table.border1plein{
  border: 1px dashed #5C4018;
  width: 100%;
}

table.border1plein td, table.border1 td{
    border-width: 1px;
    border-style: dashed;
	border-color: #5C4018;
}

J'ai vu quelque part qu'on pouvait multi-classé les éléments, est-ce vrai ? en gros est-ce que je pourrais avoir :

table.pleine{
  width: 100%;
}

table.border1, table.border1 td{
    border-width: 1px;
    border-style: dashed;
    border-color: #5C4018;
}

et faire un truc qui ressemble à ça :

<table class='border1' class='pleine'>
   <tr>
      <td><p>blablabla</p></td>
      <td><p>blablabla</p></td>
   </tr>
</table>

Qui me donnerait une table de 100% de large, avec des bordures sur toutes mes cases ?


et surtout, si ça marche, est-ce valide ?
Modifié par Lothindil (01 Oct 2010 - 16:48)

Hello,

Aucun souci à utiliser plusieurs classes en même temps.

Par contre, il ne faut utiliser qu'un seul attribut classe

<table class="border1 pleine">

Bonjour,

Pour utiliser plusieurs class sur un élément HTML, c'est plutôt comme ceci :

<table class="maclasseX maclasseY maclasseZ">
...
</table>

edit : grillé par Florian
Modifié par Tony Monast (01 Oct 2010 - 16:51)

Question de ne pas avoir répondu pour rien, tu regarderas aussi pour border-collapse:collapse en CSS. Très pratique pour les tableaux.

Salut,

Tu sais que tu peux uploader des fichiers sur le validateur W3C pour les tester... C'est pratique
Modifié par thelma (01 Oct 2010 - 16:55)

ahh, ça c'est une bonne nouvelle (marre de faire des classes pour chaque petite différence)


au passage (c'est pas lié aux tableaux, mais ça reste dans les questions de classes), il m'arrive d'avoir des éléments identiques à quelques petits détails près, un exemple simple : dans mon menu à droite sur ma page d'accueil, j'ai parfois des liens sur une ligne, d'autre fois sur 2 lignes, ce qui change dans mon css 2 choses : la hauteur et l'image de background.

et j'hésite entre deux façons de faire :

façon 1 :

a.colonne:link, a.colonne:visited {
  background: url(images/skin/menupassif.png) no-repeat;
  width:152px;
  color:#cb8b57;
  height:35px;
  margin:0px;
  text-align:center;
  line-height:32px;
  display:block; 
  text-decoration:none;
  font-weight:bold;
}
a.colonnegd:link, a.colonnegd:visited {
  background: url(images/skin/menupassif2.png) no-repeat;
  height:70px;
}

<a class='colonne' href='blabla.php'>blabla</a><br />
<a class='colonne colonnegd' href='blabla1.php'>blabla</a><br />

Façon 2 :

a.basecolonne:link, a.basecolonne:visited{
  width:152px;
  color:#cb8b57;
  margin:0px;
  text-align:center;
  line-height:32px;
  display:block; 
  text-decoration:none;
  font-weight:bold;
}

a.colpetit:link, a.colpetit:visited {
  background: url(images/skin/menupassif.png) no-repeat;
  height:35px;
  }
a.colgrand:link, a.colgrand:visited {
  background: url(images/skin/menupassif2.png) no-repeat;
  height:70px;
}

<a class='basecolonne colpetit' href='blabla.php'>blabla</a><br />
<a class='basecolonne colgrand' href='blabla1.php'>blabla</a><br />

La question, c'est laquelle marcherait et la quelle est la plus réglo. (de base je serais pour la seconde^^)

thelma a écrit :
Salut,

Tu sais que tu peux uploader des fichiers sur le validateur W3C pour les tester... C'est pratique

je le sais, mais comme mes fichiers sont avant tout des fichiers php avec toute la structure du php c'est pas faisable.

Tu dois déjà le savoir, mais si tes pages sont en ligne, tu peux utiliser le validateur W3C en lui passant l'adresse, ou même faire valider du code HTML directement.
Modifié par Tony Monast (01 Oct 2010 - 18:04)