Tableaux et CSS

Bonjour,
J'ai une toute petite question par rapport aux tableaux et au XHTML Strict. J'ai plusieurs colonnes qui sont similaires en tous points (couleur, font, espacement, bordure etc), sauf dans la taille et éventuellement l'alignement, voire le gras. Or il me semble assez ennuyeux de créer un style pour chaque colonne (surtout si j'ai envie de changer les couleurs). Alors, n'est-ce pas gênant de créer un seul style, et de préciser, le cas échéant, la taille etc.
Exemple : <table class="truc"><tr><td colspan="2">Essai</th></tr><tr>
<td class="machin" style="width:75%"></td><td class="machin" style="width:25%"></td></tr>
</table>

Il y a quand même plus simple et plus propre :

<table class="truc">
	<tr><th colspan="2">Essai</th></tr>
	<tr>
		<td class="premier"></td>
		<td class="deuxieme"></td>
	</tr>
</table>

Et en CSS :

table.truc td {mes styles pour toutes les cellules du tableau de classe "truc" }
td.premier {width: 75%;}
td.deuxieme {width: 25%;}

Et voilà.

Utiliser la cascade CSS à bon escient permet d'économiser de ne pas balancer des classes dans tous les sens.

Sinon il existe encore plus avancé dans les sélecteurs CSS, ce qui permettrait de se passer de nos deux classes "premier" et "deuxieme", mais pas de support par IE, donc je ne développe pas.

Merci, mais en fait, j'avais un peu simplifié le problème, désolé :s en fait, dans le tableau, les colonnes peuvent avoir une classe différente ... j'avais oublié de le mentionner, voici donc un exemple :

<table class="truc"><tr><td colspan="2">Essai</th></tr>
<tr><td class="machin" style="width:65%"></td>
<td class="machin" style="width:25%"></td>
<td class="machin2" style="width:10%"></td></tr>
</table>

Est il possible d'adapter la solution précédente ?

D'avance merci
Modifié par le_fleau (05 Mar 2006 - 13:11)

<table class="truc">
	<tr><th colspan="2">Essai</th></tr>
	<tr>
		<td class="machin" style="width:65%"></td>
		<td class="machin" style="width:25%"></td>
		<td class="machin2" style="width:10%"></td>
	</tr>
</table>

Hmm... là ça me semble pousser un peu loin. Je ne sais pas exactement ce que tu veux pour tes styles "machin" et "machin2" donc c'est à toi de voir si le principe style par défaut (sélecteur table.truc td[/t]) + classes spécifiques (sélecteurs de classes) peut suffir.

Mais c'est quoi ce tableau bizarre, d'abord ?

Tout ça me fait penser qu'une des limites principales des tableaux en HTML (et CSS) est qu'aucune règle de formatage des colonnes n'a été créée. Pourtant, il y aurait eu une certaine logique à créer, probablement en CSS mais peut-être déjà en amont en HTML, des mécanismes pour attribuer un style à la colonne n.

Du coup, on se retrouve à faire du bricolage pas très pratique.

Deux remarques, pour revenir à notre sujet :
1) Tu peux remplacer ton

<tr><th colspan="2">Essai</th></tr>

par un

<caption>Essai</caption>

qu'il sera possible de styliser en CSS ;

2) il me semble que si tu précises la largeur de chaque cellule de la première ligne, les cellules des lignes suivantes adopteront cette largeur automatiquement, ce qui évite de répéter du code pour rien (ça alourdit le code, et ça crée des occurences multiples qu'il faut corriger une par une pour les modifications).

Du coup, tu peux sans doute faire :

<table class="truc">
	<caption>Essai</caption>
	<tr>
		<td class="1" style="width:65%">...</td>
		<td class="2" style="width:25%">...</td>
		<td class="3" style="width:10%">...</td>
	</tr>
	<tr>
		<td class="3">...</td>
		<td class="1">...</td>
		<td class="2">...</td>
	</tr>
	<tr>
		[i]etc.[/i]
	</tr>
</table>

<table class="truc">
	<tr><th colspan="3">Essai</th></tr>
	<tr>
		<td class="machin" style="width:65%"></td>
		<td class="machin" style="width:25%"></td>
		<td class="machin2" style="width:10%"></td>
	</tr>
</table>

(c'était un colspan 3)

Ben en fait, c'est pour afficher les sujets d'un forum... Ce qui différencie ces colonnes (machin et machin2), c'est en fait la couleur, voire le fait que le texte soit en gras ou pas... Donc c'est pas possible ? la seule solution possible est le code que je propose ?

Bonsoir,

Ne pas oublier qu'un élément peut cumuler les classes :

<td class="machin chose1"></td>
<td class="machin chose2"></td>

.chose1 et .chose2 peuvent servir à varier largeur, graisse, alignement...

Laurent Denis a écrit :
Bonsoir,

Ne pas oublier qu'un élément peut cumuler les classes :

<td class="machin chose1"></td>
<td class="machin chose2"></td>

.chose1 et .chose2 peuvent servir à varier largeur, graisse, alignement...

Justement, j'oublie tout le temps
Au passage, ça marche bien partout ou certains navigateurs n'aiment pas trop le procédé ?

Merci, cette solution à l'air de fonctionner... Dernière petite question : on peut en mettre autant qu'on veut ?? Et n'est ce pas gênant de ne préciser qu'une seule fois la largeur de chaque colonne (c'est à dire, ne la préciser qu'à une seule ligne ; pas à chaque ligne).
D'avance merci
Modifié par le_fleau (05 Mar 2006 - 21:00)

le_fleau a écrit :
Et n'est ce pas gênant de ne préciser qu'une seule fois la largeur de chaque colonne (c'est à dire, ne la préciser qu'à une seule ligne ; pas à chaque ligne).

Aucune idée . En fait, je disais ça juste en me rappelant vaguement avoir vu ce genre de comportement pour un tableau. Mais ce n'est pas une information fiable à 100%, loin de là, et il faudra la vérifier par la pratique ou par une autre source.