Dimensions cellule d'un tableau

Version imprimable

bonjour,
j'ai un souci avec des dimensions de cellule, qui ne reste pas à la taille que je leurs met. ( les cellules noirs et c'est la hauteur de cellule que j'ai mis a 10 qui ne s'applique pas)

http://imageshack.us/photo/my-images/689/pliage.jpg

Code 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
<table width="580" border="0" cellspacing="0">
 
  <tr>
    <th height="10" colspan="4" scope="row" bgcolor="#D7E200" class="titre4">TITRE</th>
  </tr>
 
  <tr>
    <td height="78" colspan="4" scope="row" class="texte1"><p>introduction</p></td>
  </tr>
 
  <tr>
    <td  height="150" rowspan="2" scope="row" bgcolor="#D7E200"><img src="****.jpg" width="120" height="112" /></td>
    <td  width="200" rowspan="2" scope="row" bgcolor="#D7E200" align="left" class="texte4"> - exemple <br />
- exemple <br />
- exemple</td>
    <td width="58" rowspan="8">&nbsp;</td>
    <td width="362" height="10" bgcolor="#000000" class="texte5">titre intermédiaire 1</td>
  </tr>
 
  <tr>
    <td class="texte1"><p>texte d’explication 1</p></td>
  </tr>
 
  <tr>
    <td height="150" rowspan="2" bgcolor="#D7E200" scope="row"><img src="****.jpg"  width="145" height="119" /></td>
    <td width="200" rowspan="2" bgcolor="#D7E200" scope="row" align="left" class="texte4">- exemple<br />
- exemple<br />
- exemple</td>
    <td width="362" height="10" bgcolor="#000000" class="texte5">titre intermédiaire 2</td>
  </tr>
 
  <tr>
    <td class="texte1"><p>Texte intermédiaire 2</p></td>
  </tr>
 
  <tr>
    <td height="150" rowspan="2" bgcolor="#D7E200" scope="row"><img src="****.jpg"  width="143" height="119" /></td>
    <td width="200" rowspan="2" bgcolor="#D7E200" scope="row" align="left" class="texte4">- exemple <br />
- exemple</th>
  <td width="362" height="10" bgcolor="#000000" class="texte5">titre intermédiaire 3</td>
    </tr>
 
  <tr>
    <td class="texte1">Texte intermédiaire 3</td>
  </tr>
 
  <tr>
    <td height="150" rowspan="2" bgcolor="#D7E200" scope="row"><img src="****.jpg"  width="135" height="110" /></td>
    <td width="200" rowspan="2" bgcolor="#D7E200" scope="row" align="left" class="texte4">- exemple <br />
- exemple</td>
    <td width="362" height="10" bgcolor="#000000" class="texte5">titre intermédiaire 4</td>
  </tr>

<tr>

Code:

1
2
3
4
 
    <td class="texte1"><p>Texte intermédiaire 4</p></td>
  </tr>
</table>

CSS :

Code:

1
2
3
4
5
6
7
.texte5 {
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align:center;
}

25/08/2011, 10h07
Kaamo

Comme ton texte contenu dans le <td> est d'une hauteur plus importante que "10px" (taille de ton <td>), elle ne s'applique pas.
Essaie de mettre une valeur plus élevée que "10". Par exemple "100". Tu verras que la hauteur de la cellule augmentera.
Sinon, il faut réduire la taille de la police à l'intérieur du <td>

Tu ne nous donne pas le CSS de la class "texte5". Pourquoi utiliser du CSS et renseigner la hauteur, largeur et couleur du fond dans la balise <td> ? Mets plutôt ça dans le fichier CSS.
25/08/2011, 11h25
cuddy

le texte etant de 12px j'ai augmenté, sur vos conseils, a 14 la hauteur de la cellule. Mais il n'y aucune modification des cellulles a l'affichage.:cry:
25/08/2011, 12h31
Kaamo

En ayant fait le test, on commence à voir la différence à environ 25/30 px.

Le texte est trop grand à l'intérieur de la cellule
25/08/2011, 13h31
cuddy

je comprends pas commence ca trop grands texte 12 cellule 14, je veux pas un grand espace dans la cellule. J'ai essayez avec une cellule de 25 pour une typo de 12 et sa ne fait rien.
En baissant la taille du texte ou en changeant de typo sa ne change rien non plus :cry:
25/08/2011, 14h55
Kaamo

Citation:

Envoyé par cuddy

J'ai essayez avec une cellule de 25 pour une typo de 12 et sa ne fait rien.

Je viens de tester chez moi avec le code que tu as posté ci-dessus, ça fonctionne très bien. Test avec une taille plus probante (exemple : height="100" et font-size:10px;)
25/08/2011, 15h15
cuddy

avec 100 sa marche toute les cellules se mettent a la même taille
j'ai essayez a 30 sa ne marche pas. Mais je ne veux pas d'une cellule de 100 alors comment faire?
25/08/2011, 19h59
Invité

Citation:

Envoyé par cuddy

le texte etant de 12px ...

je crois que tu confonds 12px et 12pt

12pt -> environ 24-25px

ps : sur firefox ou safari, c'est bon.
I.E. n'en fait encore qu'à sa tête ...
26/08/2011, 10h30
cuddy

non non je ne confonds pas le texte est en px dans la css pas en pt.

Bonjour,
cette mise en page avec une <table> est-elle obligatoire ?

Car elle peut se faire avantageusement avec des <div> imbriquées + css !

Voici une solution (ma foi plutôt élégante !) en gardant la <table>, MAIS il faut revoir l'organisation de tes données :

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
	<style type="text/css">
table { 
        width: 580px;
        border-collapse: collapse;
        border: 0;
}
caption h4 {
        background: #D7E200;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
}
caption p {
        font-weight: normal;
        text-align: left;
}
table td { 
        /* border:1px solid #ccc; */ /* (pour test) */
        border: 0;
}
.td-image {
        height: 150px;
        background: #D7E200;
}
/* cellules */
.td-exemple {
        width: 200px;
        background: #D7E200;
        text-align: left;
}
.td-white-space {
        width: 58px;
        /* border-top: transparent; */ /* (pour test avec border 1px) */
        /* border-bottom: transparent; */ /* (pour test avec border 1px) */
}
.td-titre-explication {
        width: 362px;
        vertical-align: top; /* positionne le contenu en haut de la cellule */
}
td .texte5 { /* titre */
        margin:0; padding:0;
        color: #FFFFFF;
        background: #000000;
        width: 100%;
        height: 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
}
        </style>

La table :

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
<table>
	<caption>
		<h4>TITRE</h4>
		<p>introduction</p>
	</caption>
 
	<colgroup>
		<col span="1" class="td-image" />
		<col span="1" class="td-exemple" />
		<col span="1" class="td-white-space" />
		<col span="1" class="td-titre-explication" />
	</colgroup>
 
<tbody>
 
	<tr>
		<td><img src="****1.jpg" width="120" height="112" alt="IMAGE 1"/></td>
		<td>
			- exemple 1<br />
			- exemple 1<br />
			- exemple 1
		</td>
		<td>&nbsp;</td>
		<td style="vertical-align:top;">
			<h5 class="texte5">titre intermédiaire 1</h5>
			<p>texte d’explication 1</p>
		</td>
	</tr>
 
	<tr>
		<td><img src="****2.jpg" width="120" height="112" alt="IMAGE 2"/></td>
		<td>
			- exemple 2<br />
			- exemple 2<br />
			- exemple 2
		</td>
		<td>&nbsp;</td>
		<td style="vertical-align:top;">
			<h5 class="texte5">titre intermédiaire 2</h5>
			<p>texte d’explication 2</p>
		</td>
	</tr>
 
	<!-- ............. -->
 
</tbody>
</table>

-> Les tableaux (XHTML & CSS)

Nota : pour I.E., il faut laisser le vertical-align:top; dans le td : <td style="vertical-align:top;">
Don't ask why ...

26/08/2011, 13h05
cuddy

merci pour votre réponse, je vais essayez avec votre solution et je reviens vers vous si je n'y arrive pas
26/08/2011, 16h26
cuddy

résolu merci