Mise en page dans tableau

Version imprimable

Bonjour,

j'ai un tableau html qui contient plusieurs colonnes avec des informations textuelles ou numériques et une dernière colonne qui sert à afficher une image ; cette image est censée correespondre à l'article dont le nom est survolé ; donc bien qu'il y ait 14 lignes (14 articles), l'image doit occuper la colonne complète. Pour l'instant, ça ne va pas car ça donne ça (que 2 liens pour l'instant) et le code correspondant est :

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
<script>
function img_verin() {
document.getElementById("img").src="verin.jpg"; }
function img_batterie() {
document.getElementById("img").src="http://www.groupe-reval-sav.com/Photopiece/Batterie.jpg"; }
function restore_vide() {
document.getElementById("img").src="img_vide.jpg"; }
</script>
<table style="border-collapse: collapse;" align="center"
 bgcolor="#ffffff" border="1" bordercolor="#993366"
 cellpadding="2" cellspacing="0">
  <tbody>
    <tr>
      <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Syst&egrave;me<br>
      </b></font></td>
      <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>D&eacute;signation</b></font></td>
      <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>R&eacute;f&eacute;rence
REVAL</b></font></td>
      <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Quantit&eacute;</b></font></td>
      <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Image</b></font></td>
    </tr>
    <tr>
      <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Mont&eacute;e
/ Descente</b></font></td>
      <td align="left"><font color="#000000"><a
 href="#" onmouseover="img_verin()"
 onmouseout="restore_vide()">V&eacute;rin</a></font></td>
      <td align="left"><font color="#000000">2503</font></td>
      <td align="left"><font color="#000000">1</font></td>
      <td colspan="14" height="400"><img
 name="img" src="img_vide.jpg" width="200"></td>
    </tr>
    <tr>
      <td align="left" bgcolor="#660033"></td>
      <td align="left"><font color="#000000"><a
 href="#" onmouseover="img_batterie()"
 onmouseout="restore_vide()">Batteries</a></font></td>
      <td align="left"><font color="#000000">2288F</font></td>
      <td align="left"><font color="#000000">2</font></td>
      <td></td>
    </tr>
 
...
 </tbody>
</table>
</body>

donc malgré un colspan rien à faire ; comment puis-je faire ?

Voilà la technique de "bourrin" que j'ai adoptée : une table avec une ligne et 2 cellules, la 1e contient la table précédente avec ses 14 lignes et la 2e ne contient que l'image...

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<script>
function img_verin() {
document.getElementById("img").src="verin.jpg"; }
function img_batterie() {
document.getElementById("img").src="http://www.groupe-reval-sav.com/Photopiece/Batterie.jpg"; }
function restore_vide() {
document.getElementById("img").src="img_vide.jpg"; }
</script>
<table>
  <tbody>
    <tr>
      <td>
      <table style="border-collapse: collapse;" align="center"
 bgcolor="#ffffff" border="1" bordercolor="#993366"
 cellpadding="2" cellspacing="0">
        <tbody>
          <tr>
            <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Syst&egrave;me<br>
            </b></font></td>
            <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>D&eacute;signation</b></font></td>
            <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>R&eacute;f&eacute;rence
REVAL</b></font></td>
            <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Quantit&eacute;</b></font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Mont&eacute;e
/ Descente</b></font></td>
            <td align="left"><font color="#000000"><a
 href="#" onmouseover="img_verin()"
 onmouseout="restore_vide()">V&eacute;rin</a></font></td>
            <td align="left"><font color="#000000">2503</font></td>
            <td align="left"><font color="#000000">1</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000"><a
 href="#" onmouseover="img_batterie()"
 onmouseout="restore_vide()">Batteries</a></font></td>
            <td align="left"><font color="#000000">2288F</font></td>
            <td align="left"><font color="#000000">2</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000">T&eacute;l&egrave;commande</font></td>
            <td align="left"><font color="#000000">1114F</font></td>
            <td align="left"><font color="#000000">1</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000">Carte
&eacute;l&eacute;ctronique CB
08</font></td>
            <td align="left"><font color="#000000">7122F</font></td>
            <td align="left"><font color="#000000">1</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000">Chargeur
sur
t&eacute;l&eacute;commande&nbsp;</font></td>
            <td align="left"><font color="#000000">8189F</font></td>
            <td align="left"><font color="#000000">1</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000">Chargeur
sur embase</font></td>
            <td align="left"><font color="#000000">8189F
+ 4794</font></td>
            <td align="left"><font color="#000000">1</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000">Fusible
10 A</font></td>
            <td align="left"><font color="#000000">2030</font></td>
            <td align="left"><font color="#000000">1</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000">Porte
fusible (vendu sans fusible)</font></td>
            <td align="left"><font color="#000000">1938</font></td>
            <td align="left"><font color="#000000">1</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Ecartement
de pieds</b></font></td>
            <td align="left"><font color="#000000">Microswitch</font></td>
            <td align="left"><font color="#000000">2025</font></td>
            <td align="left"><font color="#000000">3</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000">V&eacute;rin
d'&eacute;cartement de
pieds</font></td>
            <td align="left"><font color="#000000">9611</font></td>
            <td align="left"><font color="#000000">1</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Autre</b></font></td>
            <td align="left"><font color="#000000">Roulettes
avant</font></td>
            <td align="left"><font color="#000000">1424393</font></td>
            <td align="left"><font color="#000000">2</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000">Roulettes
arri&egrave;re&nbsp;</font></td>
            <td align="left"><font color="#000000">1432950</font></td>
            <td align="left"><font color="#000000">2</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000">Soufflet
oval PVC</font></td>
            <td align="left"><font color="#000000">946</font></td>
            <td align="left"><font color="#000000">1</font></td>
          </tr>
          <tr>
            <td align="left" bgcolor="#660033"></td>
            <td align="left"><font color="#000000">Clips
de s&eacute;curit&eacute;
porte sangle</font></td>
            <td align="left"><font color="#000000">1416662+8920+1419462</font></td>
            <td align="left"><font color="#000000">4</font></td>
          </tr>
        </tbody>
      </table>
      </td>
      <td>
      <table>
        <tbody>
          <tr>
            <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Image</b></font></td>
          </tr>
          <tr height="380">
            <td><img name="img" src="img_vide.jpg"
 width="200"></td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>

Pour commencer, ton code est une horreur, mais passons, c'est pas comme si tu étais webmaster... :whistle:
Code:

1 2 3 4 5 6 function img_verin() { document.getElementById("img").src="verin.jpg"; } function img_batterie() { document.getElementById("img").src="http://www.groupe-reval-sav.com/Photopiece/Batterie.jpg"; } function restore_vide() { document.getElementById("img").src="img_vide.jpg"; }
Tu ne sais pas que l'une des fonctionnalité des fonctions, c'est qu'on peut leur passer un (voire plusieurs) paramètres histoire de factoriser le code :calim2:

Citation:

malgré un colspan rien à faire

Tu veux regrouper des lignes avec colspan ? :cry:
Si tu essayais avec rowspan, ça marcherait peut-être mieux !

Bonjour,

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
<table style="border-collapse: collapse;" align="center" bgcolor="#ffffff" border="1" bordercolor="#993366" cellpadding="2" cellspacing="0">
<thead>
	<tr>
		<th align="left" bgcolor="#660033"><font color="#ffffff"><b>Syst&egrave;me</b></font></th>
		<th align="left" bgcolor="#660033"><font color="#ffffff"><b>D&eacute;signation</b></font></th>
		<th align="left" bgcolor="#660033"><font color="#ffffff"><b>R&eacute;f&eacute;rence REVAL</b></font></th>
		<th align="left" bgcolor="#660033"><font color="#ffffff"><b>Quantit&eacute;</b></font></th>
		<!-- TITRAGE pour L'IMAGE --> 
		<th align="left" bgcolor="#660033"><font color="#ffffff"><b>Image</b></font></th>
	</tr>
</thead>
<tbody>
	<tr>
		<td align="left" bgcolor="#660033"><font color="#ffffff"><b>Mont&eacute;e / Descente</b></font></td>
		<td align="left"><font color="#000000"><a href="#" onmouseover="img_verin()" onmouseout="restore_vide()">V&eacute;rin</a></font></td>
		<td align="left"><font color="#000000">2503</font></td>
		<td align="left"><font color="#000000">1</font></td>
		<!-- METTRE ICI L'IMAGE (SUR 14 RANGEES) --> 
		<td rowspan="14"><img name="img" src="img_vide.jpg" width="200"></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000"><a
		href="#" onmouseover="img_batterie()"
		onmouseout="restore_vide()">Batteries</a></font></td>
		<td align="left"><font color="#000000">2288F</font></td>
		<td align="left"><font color="#000000">2</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000">T&eacute;l&egrave;commande</font></td>
		<td align="left"><font color="#000000">1114F</font></td>
		<td align="left"><font color="#000000">1</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000">Carte &eacute;l&eacute;ctronique CB 08</font></td>
		<td align="left"><font color="#000000">7122F</font></td>
		<td align="left"><font color="#000000">1</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000">Chargeur sur t&eacute;l&eacute;commande&nbsp;</font></td>
		<td align="left"><font color="#000000">8189F</font></td>
		<td align="left"><font color="#000000">1</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000">Chargeur sur embase</font></td>
		<td align="left"><font color="#000000">8189F + 4794</font></td>
		<td align="left"><font color="#000000">1</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000">Fusible 10 A</font></td>
		<td align="left"><font color="#000000">2030</font></td>
		<td align="left"><font color="#000000">1</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000">Porte fusible (vendu sans fusible)</font></td>
		<td align="left"><font color="#000000">1938</font></td>
		<td align="left"><font color="#000000">1</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"><font color="#ffffff"><b>Ecartement de pieds</b></font></td>
		<td align="left"><font color="#000000">Microswitch</font></td>
		<td align="left"><font color="#000000">2025</font></td>
		<td align="left"><font color="#000000">3</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000">V&eacute;rin d'&eacute;cartement de pieds</font></td>
		<td align="left"><font color="#000000">9611</font></td>
		<td align="left"><font color="#000000">1</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"><font color="#ffffff"><b>Autre</b></font></td>
		<td align="left"><font color="#000000">Roulettes avant</font></td>
		<td align="left"><font color="#000000">1424393</font></td>
		<td align="left"><font color="#000000">2</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000">Roulettes arri&egrave;re&nbsp;</font></td>
		<td align="left"><font color="#000000">1432950</font></td>
		<td align="left"><font color="#000000">2</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000">Soufflet oval PVC</font></td>
		<td align="left"><font color="#000000">946</font></td>
		<td align="left"><font color="#000000">1</font></td>
	</tr>
	<tr>
		<td align="left" bgcolor="#660033"></td>
		<td align="left"><font color="#000000">Clips de s&eacute;curit&eacute; porte sangle</font></td>
		<td align="left"><font color="#000000">1416662+8920+1419462</font></td>
		<td align="left"><font color="#000000">4</font></td>
	</tr>
</tbody>
</table>

NB : no comment sur les balises et attributs obsolètes...

Tu noteras néanmoins la structure de la <table> :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<thead>
	<tr>
		<th>...</th>
		<th>...</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>...</td>
		<td>...</td>
	</tr>
</body>
</html>

Bien vu pour les th :

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
<script>
function aff_img(url_img) {
document.getElementById("image").src=url_img; }
</script>
<table bgcolor="#ffffff" border="1">
  <thead> <th align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Syst&egrave;me<br>
  </b></font></th>
  <th align="left" bgcolor="#660033"><font
 color="#ffffff"><b>D&eacute;signation</b></font></th>
  <th align="left" bgcolor="#660033"><font
 color="#ffffff"><b>R&eacute;f&eacute;rence
REVAL</b></font></th>
  <th align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Quantit&eacute;</b></font></th>
  <th align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Image</b></font></th>
  </thead> <tbody>
    <tr>
      <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>Mont&eacute;e
/ Descente</b></font></td>
      <td align="left"><font color="#000000"><a
 href="#" onmouseover="aff_img('./verin.jpg')"
 onmouseout="aff_img('./img_vide.jpg')">V&eacute;rin</a></font></td>
      <td align="left"><font color="#000000">2503</font></td>
      <td align="left"><font color="#000000">1</font></td>
      <td rowspan="2" height="400"><img
 id="image" src="img_vide.jpg" width="200"></td>
    </tr>
    <tr>
      <td align="left" bgcolor="#660033"></td>
      <td align="left"><font color="#000000"><a
 href="#"
 onmouseover="aff_img('http://vercorshandisport.org/essai2/coupedefrancela1/bv000044.thumb.jpg')"
 onmouseout="aff_img('./img_vide.jpg')">Batteries</a></font></td>
      <td align="left"><font color="#000000">2288F</font></td>
      <td align="left"><font color="#000000">2</font></td>
      <td></td>
    </tr>
  </tbody>
</table>

Sinon, je n'y ai pas fait attention, mais c'est quoi qui est obsolète ? le font color ?

24/10/2012, 16h10
Invité

Citation:

Envoyé par laurentSc

c'est quoi qui est obsolète ?

Euhh, en fait, tout !
align="..."
bgcolor="..."
<font color="#ffffff">...</font>

On utilise plutôt des class="..." ou id="..." et les styles CSS.

Voilà à quoi ça doit ressembler :

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
<style type="text/css">
table#latable {
	border-collapse: collapse;
	text-align:center;
	padding:2px;
	margin:0;
}
table#latable th {
	text-align:left;
	border:1px solid #993366;
	color:#ffffff; /* blanc */
	font-weight:bold;
	background:#660033;
}
table#latable td {
	text-align:left;
	border:1px solid #993366;
	color:#000000; /* noir */
	font-weight:normal;
}
table#latable td.first_td { /* 1ere colonne */
	color:#ffffff; /* blanc */
	font-weight:bold;
	background:#660033;
}
</style>

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
<table id="latable">
<thead>
	<tr>
		<th>Syst&egrave;me</th>
		<th>D&eacute;signation</th>
		<th>R&eacute;f&eacute;rence REVAL</th>
		<th>Quantit&eacute;</th>
		<th>Image</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td class="first_td">Mont&eacute;e / Descente</td>
		<td><a href="#" onmouseover="img_verin()" onmouseout="restore_vide()">V&eacute;rin</a></td>
		<td>2503</td>
		<td>1</td>
		<!-- METTRE ICI L'IMAGE SUR 14 RANGEES --> 
		<td rowspan="14">METTRE ICI L'IMAGE</td>
	</tr>
	<tr>
		<td class="first_td"></td>
		<td><a href="#" onmouseover="img_batterie()" onmouseout="restore_vide()">Batteries</a></td>
		<td>2288F</td>
		<td>2</td>
	</tr>
.....

24/10/2012, 20h17
laurentSc
J'avais pas vu le dernier post et du coup, j'ai essayé de le faire moi-même ! Cela dit, ça m'apprend des trucs en CSS. Et justement la colonne avec l'image, je suis obligé de fixer width et height, car sinon selon l'image, ça bagotte ; j'ai essayé de créer une classe, mais ça va pas :
Code:

1 2 3 4 5 6 table#latable td.td_img { height:"400px"; width:"600px"} ... <td class="td_img" rowspan="14" ><img id="image" src="img_vide.jpg" ></td>
Que faut-il faire ?
24/10/2012, 21h51
Invité

Ce sont les dimensions de l'image qu'il faut fixer :

Citation:

table#latable td.td_img img {
height:400px; /* PAS d'apostrophes ! */
width:600px; /* on fixe les deux dimensions ou une seule (au choix) */
}
24/10/2012, 22h36
laurentSc

Certes ainsi ça ne bagotte plus mais l'image étant grossie, on perd en qualité et l'image devient floue ; aurais-tu une solution où on ne modifie pas la taille de l'image ?
24/10/2012, 23h53
Invité

Une petite fonction :
=> Redimensionnement "à l'affichage"

Code:

<td rowspan="14"><img <?php fctaffichimage('img_vide.jpg', 400, 600) ?> alt="image" /></td>

L'image "tiendra" dans une case de 400 x 600px, en étant redimensionnée si nécessaire.
(Il faudra peut-être indiquer le chemin absolu vers l'image)

PS : le code CSS "spécial image" devient inutile.

Merci pour la fonction, mais comme c'est du PHP, je me suis refusé à regarder (dans le forum html !)...Je plaisante. Par contre, elle n'est pas compatible avec mon script js, car je modifie le champ src des images et avec ta fonction, y en a plus. Mais par contre, j'ai finalement trouvé une solution où on ne touche pas à l'image : on fixe la taille de la cellule du tableau :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 table#latable td.td_img { height:400px; width:400px } ... <script> function aff_img(url_img) { document.getElementById("image").src=url_img; } </script> ... <td class="td_img" rowspan="14" >  <img id="image" src="img_vide.jpg" ></td>