Encore un problème de tableau [Résolu]

cuddy · 28/08/2011, 10h11

re bonjour,
j'ai bien lu les tutorials et je les ai rerelu. j'ai lu je ne sais combien de tutorial sur pas mal de site, mais je ne comprends pas pourquoi sa ne fonctionne toujours pas, j'ai pourtant l'impression d'avoir fais les choses correctement. Le css pour le th fonctionne. J'ai regroupé les 5 colonnes pour les style (colonne) avec col span"5" class=colonne. Mais sa ne marche pas.
en gros
J'ai crée un tableau, et je souhaite appliser une css (colonne td) à tous mes prix pour qu'il soit centrer, en arial, en gras, en noir, .....
Mais cela ne fonctionne pas.
J'ai dans la premiere colonne à gauche les cellules "1à / 2à / 3à / ...." je souhaite leur appliquer une css (exemplaire td) , mais elle ne s'applique pas non.
Alors je sais que je pourrais mettre un " class= " dans mes td et que sa fonctionnerait.
css

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
table { 
	width: 418px;
	border-collapse: collapse;
	border:0;
}
 
caption h4 {
	color: #FFF;
	background: #000;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	}
 
th {
	width: 68px;
	color: #FFF;
	background: #D7E200;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #000;
}
 
table td { 
	/* border:1px solid #ccc; */ /* (pour test) */
	border: 1px solid #000;
}
 
.exemplaire td {
	width: 78px;
	color: #D7E200;
	background: #000;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #FFF;
}
 
.colonne td {
	width: 68px;
	color: #000;
	background: #FFF;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

HTML

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<table>
	<caption>
		<h4>Titre</h4>
	</caption>
 
	<colgroup>
		<col class="exemplaire">
		<col span="5" class="colonne">
	</colgroup>
 
 
 <thead>
	<tr>
		<th>&nbsp;</th>
		<th>Prix 1</th>
		<th>Prix 2</th>
		<th>Prix 3</th>
        <th>Prix 4</th>
        <th>Prix 5</th>
	</tr>
 </thead>
 
<tbody>
 
	<tr>
		<td>1 à</td>
    	<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
        <td>0,56</td>
        <td>0,56</td>
    </tr>
 
	<tr>
		<td>2 à</td>
        <td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
        <td>0,56</td>
        <td>0,56</td>
 
	</tr>
 
	<tr>
		<td>3 à</td>
       	<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
        <td>0,56</td>
        <td>0,56</td>
    </tr>
 
	<tr>
		<td>4 à</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
        <td>0,56</td>
        <td>0,56</td>
	</tr>
 
   <tr>
		<td>5 à</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
        <td>0,56</td>
        <td>0,56</td>
	</tr>
 
  <tr>
  		<td>6 à</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
        <td>0,56</td>
        <td>0,56</td>
	</tr> 
 
	<tr>
		<td>7 à</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
        <td>0,56</td>
        <td>0,56</td>
	</tr> 
 
    <tr>
		<td>8 à</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
        <td>0,56</td>
        <td>0,56</td>
	</tr>
 
	<!-- ............. -->
 
</tbody>
</table>

Merci pour votre aide et votre patience

jreaux62 · 28/08/2011, 18h05

Bonjour,
tu n'est pas loin !

Code :

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

1
2
3
4
	<colgroup>
		<col span="1" class="exemplaire">
		<col span="5" class="colonne">
	</colgroup>

- span="1" -> le 1er <td>
- span="5" -> les 5 <td> suivants

- les class "exemplaire" et "colonne" font déjà référence aux td
Donc :

Code :

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

1
2
3
4
5
6
.exemplaire {
  /* .... */
}
.colonne {
  /* .... */
}

pour centrer tous les td :

Code :

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

1
2
3
4
table td { 
	border: 1px solid #000;
	text-align: center;
}

cuddy · 29/08/2011, 09h18

déja merci de m'avoir corriger et de m'aider.
le problème, c'est le style sur les prix ne marche pas ils ne sont ni en gras, ni en bold, ni en arial.
et le style sur les exemplaires , me mets juste le backgroung mais pas tout la partie sur le texte non pplus, police , couleur de police, bold ...
aurais je fais quelque chose de mauvais ?

Bovino · 29/08/2011, 09h31

Code :

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

.exemplaire td {}

Il n'y a aucun td dont un parent ait une classe "exemplaire", ça ne risque donc pas de fonctionner...

jreaux62 · 29/08/2011, 09h53

Bonjour,
à vrai dire, la doc donne l'explication :
-> HTML <colgroup> Tag
-> HTML <col> Tag
on peut y lire :

Citation:

Tip: Add the style attribute to the <col> tag, and let CSS take care of backgrounds, width and borders. These are the ONLY CSS properties that work with the <colgroup> tag / <col> tag.

Donc, pas d'autre choix que de définir les styles "gras", ... sur chaque ligne (1ère colonne)
Pour les colonnes "courantes", on met le style dans le td :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
	<title>Test</title>
 
	<style type="text/css">
table {
	width: 418px;
	border-collapse: collapse;
	border: 1px solid #000;
}
caption h4 {
	color: #FFF;
	background: #000;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	}
th {
	width: 68px;
	color: #FFF;
	background: #D7E200;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #000;
}
table td {
	color: #000;
	background: #FFF;
	border: 1px solid #000;
	font-size: 14px;
	text-align: center;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
}
.td-1  {
	color: #fff;
	font-weight: bold;
	background:#D7E200;
}
	</style>
 
</head>
<body>
 
<table>
	<caption>
		<h4>Titre</h4>
	</caption>
 
	<colgroup>
		<col span="1" width="68"/>
		<col span="5"/>
	</colgroup>
 
 <thead>
	<tr>
		<th class="td-1">&nbsp;</th>
		<th>Prix 1</th>
		<th>Prix 2</th>
		<th>Prix 3</th>
        <th>Prix 4</th>
        <th>Prix 5</th>
	</tr>
 </thead>
 
<tbody>
 
	<tr>
		<td class="td-1">1 à</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
    </tr>
 
	<tr>
		<td class="td-1">2 à</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
    </tr>
 
	<tr>
		<td class="td-1">3 à</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
    </tr>
 
	<tr>
		<td class="td-1">4 à</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
		<td>0,56</td>
    </tr>
 
</tbody>
</table>
 
</body>
</html>

cuddy · 29/08/2011, 10h18

j'ai modifier et effectivement cela fonctionne. Merci a tous

29/08/2011, 09h31	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 793 Points : 35 793	Code : Sélectionner tout - Visualiser dans une fenêtre à part .exemplaire td {} Il n'y a aucun td dont un parent ait une classe "exemplaire", ça ne risque donc pas de fonctionner... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

29/08/2011, 09h18	#3
cuddy Invité de passage Inscription : mai 2011 Messages : 18 Détails du profil Informations forums : Inscription : mai 2011 Messages : 18 Points : 4 Points : 4	déja merci de m'avoir corriger et de m'aider. le problème, c'est le style sur les prix ne marche pas ils ne sont ni en gras, ni en bold, ni en arial. et le style sur les exemplaires , me mets juste le backgroung mais pas tout la partie sur le texte non pplus, police , couleur de police, bold ... aurais je fais quelque chose de mauvais ?
	00

29/08/2011, 10h18	#6
cuddy Invité de passage Inscription : mai 2011 Messages : 18 Détails du profil Informations forums : Inscription : mai 2011 Messages : 18 Points : 4 Points : 4	j'ai modifier et effectivement cela fonctionne. Merci a tous
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email