28220 sujets

CSS et mise en forme, CSS3

Tableau & CSS

Salut,

J'ai un p'tit probleme, pour coder proprement. Donc je voudrai afficher des tableaux. Mais j'ai du genre :

la 1ere colonne : je laisse par defaut
la 2eme colonne : j'utilise la classe CSS "matiere"
la 3eme colonne : je laisse par defaut

Donc :


......
<tr>
<td>Texte</td><td class="matiere">Texte</td><td>Texte</td>
</tr><tr>
<td>Texte</td><td class="matiere">Texte</td><td>Texte</td>
</tr><tr>
<td>Texte</td><td class="matiere">Texte</td><td>Texte</td>
</tr>


.....

Je trouve que c'est crade de repeter : class="matiere".
Y a t-il une propriete qui permet de donner des proprietes par colonne?

J'ai pense a <colgroup> & <col> Mais bon du genre je veux appliquer qu'a <tbody> ca applique quand meme a tout et je suis oblige de faire :

<col ...>
<col ...>
<col class="..."> <=Troisieme

Pour appliquer une classe qu'a la troisieme colonne Smiley decu
Smiley decu .

Merci de m'aider
Bonjour Raynox et bienvenue sur le forum Alsacréations !

J'ose espérer que le tableau en question n'a pas pour but la mise en pages, mais bien la présentation de données dites « tabulaires », sinon je t'invite fortement à te familiariser avec le positionnement par CSS. Tu trouveras de l'information à ce sujet dans la section Tutoriels.

Pour tout savoir (ou presque) sur les tableaux : Au tableau !

Au boulot ! Smiley cligne

[ Au passage, je t'invite à lire Aide/Règles et merci d'utiliser le BBCode [ code][/code ] (sans les espaces) pour formater ton code. Merci ! ]
Modifié par Stephan (04 Mar 2005 - 23:21)
Merci de ton aide, mais les liens que tu m'as envoye, soit je connaissais, soit ca m'aide pas de trop.

Je vais essayer de mieux m'expliquer, sur un tableau tres basic :

<table>
<thead>
<tr>
<td>titre1</td><td>titre2</td><td>titre3</td>
</tr>
</thead>
<tbody>
<tr>
<td>contenu1.1</td><td>contenu1.2</td><td>contenu1.3</td>
</tr>
<tr>
<td>contenu2.1</td><td>contenu2.2</td><td>contenu2.3</td>
</tr>
<tr>
<td>contenu3.1</td><td>contenu3.2</td><td>contenu3.3</td>
</tr>

En fait, je voudrai appliquer un style CSS a la 2eme colonne dans <tbody> seulement.

Mais j'ai essaye avec col & colgroup et j'y arrive pas. A moins que ce ne soit pas possible?

Merci
Administrateur
Salut Raynox,

Pourrais-tu s'il te plaît, appliquer ce que vient de te suggérer Stephan, c'est à dire d'utiliser les balises [ CODE] pour bien signifier tes exemples ?
Merci d'avance Smiley cligne
ah ok, désole, donc

j'ai du genre un tableau

avec en entete


<thead>
<tr>
<td>titre1</td><td>titre2</td><td>titre3</td>
</tr>
</thead>


Puis le corps du tableau :


<tbody>
<tr>
<td>contenu1.1</td><td>contenu1.2</td><td>contenu1.3</td>
</tr>
<tr>
<td>contenu2.1</td><td>contenu2.2</td><td>contenu2.3</td>
</tr>
<tr>
<td>contenu3.1</td><td>contenu3.2</td><td>contenu3.3</td>
</tr>


Comme vous pouvez le constater ca me fait un tableau avec 3 colonnes. Mais mon problème c'est que je voudrai appliquer une classe CSS à la 2eme colonne dans <TBODY>. J'ai pense a <col> & <colgroup> Mais ca applique a toute la partie et je suis oblige de passer par la 1ere colonne pour arriver a la 2eme du genre :
<col> <= Code inutile pour arriver a la 2eme
<col> <= Ici la 2eme

Comme le dit ci-bien Stephan, mon tableau n'est pas pour de la mise en page ^^. J'essaye d'obtimiser le code le plus proprement possible et le plus petit possible.

Donc passer part <td class="...."> Je n'en veux pas Smiley cligne

Merci
Je suggère que tu utilises <th> pour les en-têtes :

<thead>
<tr>
<th>titre1</th><th>titre2</th><th>titre3</th>
</tr>
</thead>

Raynox a écrit :

J'essaye d'obtimiser le code le plus proprement possible et le plus petit possible.

Puisque le contenu du tableau est servi dans cet ordre :

contenu1.1 - contenu1.2 - contenu1.3

contenu2.1 - contenu2.2 - contenu2.3

contenu3.1 - contenu3.2 - contenu3.3

Moi j'utiliserais <td class="....">, c'est fait pour ça !
Modifié par Stephan (05 Mar 2005 - 22:12)
euh oui, j'ai fait un copier/coller pour la partie titre, j'utilise deja les <th> mais ca change rien au probleme Smiley decu

Le probleme d'utiliser <td class="...."> c'est du genre j'ai 50 lignes de tableau j'aurai 50 <td class="...."> et suffi que j'ai une classe par colonne ca fait 50 * 3 et comme un tableau c'est souvent 6 colonnes 50*6 = 300 Smiley bawling , ca faut beaucoup de <td class="....">, c'est pour ca que je cherche un moyen de donner une classe a une colonne.

Merci
Si tu nous donnais un exemple du style que tu veux appliquer à une colonne, ça pourrait aider parce que dans l'état actuel des choses, je ne connais pas de méthode pour appliquer un style à une colonne sans modifier le flux courant de lecture du tableau, c'est-à-dire de gauche à droite puis de haut en bas.
Donc, je voudrai par exemple appliquer le style à la 2eme colonne dans <tbody> :


.test {
text-align: center;
font-color: #FF0000;
font-size: 12px;
background-color: C0C0C0;
}

Juste pour l'exemple

Merci
Raynox, il existe une méthode simple si c'est juste pour fixer une largeur sur une colonne précise sans avoir à le répéter sur les TD.

tu fixes un
<th class="trucmuche">....</th>

sur le TH que tu veux, et le largeur se répercute automatiquement sur les TD qui lui correspond.

Mais si c'est pour fixer une police, couleur etc... sur chaque TD d'une colonne précise, va falloir utiliser des
<td class="trucmuche">


Tu peux utiliser des noms de classes courts style class="c2" pour gagner quelques octets Smiley langue
Modifié par anthony (06 Mar 2005 - 15:46)
lol Smiley cligne

Ouais pour les noms cours pour gagner quelques octets pourquoi pas, faut pas oublier de tirer les espaces quand on le peut ^^.

Ouais mais justement le probleme c'est de repeterer <td class="...">. On trouve pas une solution à l'optimisation de code, comme je voudrai.

Y a t-il un moyen ou pas?

Merci
Et bien tu appliques tes styles sur la troisième colonne comme tu l'indiques dans ton premier message, et tu surcharges ces styles pour les cellules d'entêtes. Exemple:


<table...>
<col>
<col>
<col id="matiere">
...
</table>

et:

col#matiere { background-color: #abc; color: #def; }
thead th { background-color: white; color: black; }

Modifié par Bobe (06 Mar 2005 - 18:24)
Ouais, bonne idee Bobe ^^.

Ca risque pas de porter a confusion suivant les navigateurs?

Alalal je suis lourd a poser des question Smiley lol
Sujet clos
Aller à