CSS DIV dans un tableau

**jcp66** · 21/11/2008, 12h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**HiRoN** · 21/11/2008, 12h21

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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> ?

**Bisûnûrs** · 21/11/2008, 12h26

@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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**HiRoN** · 21/11/2008, 12h36

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 ?

**Erwan31** · 21/11/2008, 13h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

**jcp66** · 21/11/2008, 13h36

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

**Bisûnûrs** · 21/11/2008, 14h44

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.

CSS DIV dans un tableau

HTML

Discussions similaires

Partager

Partager