CSS DIV dans un tableau

Version imprimable

Bonjour
J'ai un tableau avec plusieurs lignes.
Je voudrais appliquer à la premiere ligne un bloc CSS (bloc-ligne1)
et aux autres lignes donc à partir du premier </TR> un autre bloc CSS (bloc-ligne2)
Mais cela ne marche pas c'est toujours bloc-ligne1 qui s'applique.
Si quelqu'un peut m'aider, par avance merci
Cordialement
jcp
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <STYLE TYPE="text/css" media="screen">@import url(corps.css);</STYLE> </HEAD> <body> <DIV CLASS="bloc-ligne1"><TABLE border="1"><TR> <TD><A>Nom</A></TD> <TD><A>Prénom</A></TD> <TD><A>Commune</A></TD></TR> </DIV> <DIV CLASS="bloc-ligne0"> <TD><A>Dupont</A></TD> <TD><A>Pierre</A></TD> <TD><A>Pierre</A></TD></TR> <TD><A>Dupont</A></TD> <TD><A>Pierre</A></TD> <TD><A>Pierre</A></TD></TR> <TD><A>Dupont</A></TD> <TD><A>Pierre</A></TD> <TD><A>Pierre</A></TD></TR> </DIV> </TABLE> </html>
Mais cela ne marche pas.

21/11/2008, 12h21
HiRoN
Salut,

La construction que tu proposes n'est pas bonne, tu ne peux mettre des <div> comme cela dans un <table>.

Si tu veux vraiment "encadrer" la première ligne de ton <table>, je dirai qu'il faut que tu fasses 2 tableau distinct.

Dans l'idée, je verrais plus quelque chose comme cela :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div> <table><tr><td>La 1ere ligne</td></tr></table> </div> <div> <table> <tr> <td>Ligne2</td> <td>Ligne3</td> <td>Ligne4</td> </tr> </table> </div>
Objectif de l'encadrement du <table> dans un <div> ?

@HiRoN : Les colonnes risquent de ne plus correspondre dans ton cas, si le contenu du second tableau est plus important.

On peut utiliser les balise thead et tbody pour corriger le problème :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
   <thead>
      <tr>
         <th>Colonne 1</th>
         <th>Colonne 2</th>
         <th>Colonne 3</th>
      </tr>
   </thead>
 
   <tbody>
      <tr>
         <td>Valeur 1</td>
         <td>Valeur 2</td>
         <td>Valeur 3</td>
      </tr>
      <tr>
         <td>Valeur 4</td>
         <td>Valeur 5</td>
         <td>Valeur 6</td>
      </tr>
   </tbody>
<table>

Et mettre les styles sur les balises tr des balises thead et tbody.

21/11/2008, 12h36
HiRoN

Citation:

Envoyé par Bisûnûrs

@HiRoN : Les colonnes risquent de ne plus correspondre dans ton cas, si le contenu du second tableau est plus important.

Même si on applique respectivement la même class sur chaque <td> de chaque tableau (class fixant la largeur de tel ou tel colonne) afin d'avoir la même largeur de partout ?

Pour compléter le code de Bisunurs en vu d'une amélioration de l'accessibilité du tableau et d'un meilleur référencement de son contenu, il est bon d'ajouter certains élément/attribut.
Code:

1 2 3 4 5 6 7 8 9 <table summary="description du tableau et de son fonctionnement"> <caption>titre du tableau (a défaut d'un titre Hn en amont du tableau)</caption> <thead> <tr> <th scope="col">Colonne 1</th> <th scope="col">Colonne 2</th> <th scope="col">Colonne 3</th> </tr> </thead>
L'attribut summary pourra être lu par un logiciel de synthèse vocale pour des personnes non voyante, et ne pas oublier l'attribut scope pour que les
navigateurs non-visuels puissent comprendre le sens de ce tableau.

EDIT J'avais oublié: jcp pour des raison de compatibilité ascendante habitues toi à la syntaxe XML, et met tes balises en minuscule.
D'autre part il te manque certaines meta dans le head (entre autres)

21/11/2008, 13h36
jcp66

Merci à tous et particulièrement à Bisunurs. Grand merci aussi pour les énormes tutoriels pour apprendre CSS !
Avec les thead et tbody c'est tout à fait ce que je souhais.
Merci
Cordialement
jcp
21/11/2008, 14h44
Bisûnûrs

Citation:

Envoyé par HiRoN

Même si on applique respectivement la même class sur chaque <td> de chaque tableau (class fixant la largeur de tel ou tel colonne) afin d'avoir la même largeur de partout ?

Malgré une taille fixe sur les cellules, le propre d'un tableau est de s'adapter en fonction de son contenu. Donc si le contenu ne dépasse pas cette largeur, il n'y a pas de problème, mais à partir du moment où le contenu est important, les cellules vont s'adapter.