Encore un problème de tableau

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

Invité · 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...

Invité · 29/08/2011, 09h53

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

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

Encore un problème de tableau

HTML

Vue hybride

Discussions similaires

Partager

Partager