Encore un problème de tableau

Version imprimable

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:

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:

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

28/08/2011, 18h05
Invité
Bonjour,
tu n'est pas loin !
Code:

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:

1 2 3 4 5 6 .exemplaire { /* .... */ } .colonne { /* .... */ }
pour centrer tous les td :
Code:

1 2 3 4 table td { border: 1px solid #000; text-align: center; }
29/08/2011, 09h18
cuddy

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 ?:cry:
29/08/2011, 09h31
Bovino

Code:

.exemplaire td {}

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

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:

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>

29/08/2011, 10h18
cuddy

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