28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Existe-t-il un moyen de "designer" un tableau sans avoir à mettre une classe dans chaque celulle ?

Exemple : un tableau de 3 colonnes

- le contenu de la première colonne est aligné à gauche,
- le contenu des autres colonnes est centré.

Suis-je obligé de centrer le contenu de toutes les celulles et ensuite appliquer un style "text-align:left;" sur toutes les celulles de ma première colonne ?

Après où ça se complique, c'est que les lignes impaires sont d'une couleur et les lignes paires d'une autre couleur...
Bonjour,

EricLB a écrit :
Suis-je obligé de centrer le contenu de toutes les celulles et ensuite appliquer un style "text-align:left;" sur toutes les celulles de ma première colonne ?


Oui.

(La vie est mal faite, mais il y a toujours pire)
Modifié par Laurent Denis (21 Aug 2006 - 18:50)
EricLB a écrit :
Après où ça se complique, c'est que les lignes impaires sont d'une couleur et les lignes paires d'une autre couleur...

Classe sur les tr, et couleur de fond appliquée aux td en fonction de la classe du tr parent.

Sinon, pour l'histoire des colonnes, il y a moyen de faire ça en CSS2, non supporté par IE6, avec la pseudo-classe :first-child :
tr td:first-child { /* sélectionne le premier TD enfant de TR */ }

Et avec le sélecteur d'enfant adjacents -- par exemple, pour une ligne de n cellules :
td { /* sélectionne les cellules 1 à [i]n[/i] */ }
td + td { /* sélectionne les cellules 2 à [i]n[/i] */ }
td + td +td { /* sélectionne les cellules 3 à [i]n[/i] */ }
td + td +td + td { /* sélectionne les cellules 4 à [i]n[/i] */ }
/* Et ainsi de suite */

À noter que dans ce deuxième exemple, on passe son temps à écraser les propriétés données pour les colonnes précédentes ! Le sélecteur d'enfants adjacents ne me semble pas avoir été prévu pour ce genre d'usages détournés, mais je ne vois pas de contre-indication particulière, sauf pour un tableau avec un grand nombre de colonnes (code CSS lourd à maintenir).

Mais bon, pour un tableau généré dynamiquement côté serveur, utiliser des classes pour les lignes (sur les TR) ou pour les colonnes (un peu plus lourd, car chaque TD de la colonne devra porter une classe) n'est pas bien difficile. Et l'abus de classes n'est pas dangereux pour la santé, tant que l'on s'y retrouve. Smiley cligne
Bonjour Eric
EricLB a écrit :
Suis-je obligé de centrer le contenu de toutes les celulles et ensuite appliquer un style "text-align:left;" sur toutes les celulles de ma première colonne ?

Il est théoriquement possible d'utiliser les balises COLGROUP / COL, mais ça ne fonctionnerait pas dans ce cas pour Firefox.
Il est a noter que l'attribut align reste ici permis même avec un doctype strict.
EricLB a écrit :
Après où ça se complique, c'est que les lignes impaires sont d'une couleur et les lignes paires d'une autre couleur...

Pour cela il faudra être patient.
D'après ce tableau la pseudo-classe :nth-child(n) connaitrait un début de support avec Konqueror 3.52.
À part ce qu'a indiqué Mpop, il est possible de recourir à javascript (ce qui ne nécessiterait pas d'ajouter des classes).