Mise en page dans tableau

**laurentSc** · 23/10/2012, 18h28

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 :

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

**laurentSc** · 23/10/2012, 23h29

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 :

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

**Bovino** · 24/10/2012, 08h17

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

Code javascript :

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

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

malgré un colspan rien à faire

Tu veux regrouper des lignes avec colspan ?

Si tu essayais avec rowspan, ça marcherait peut-être mieux !

Invité · 24/10/2012, 14h27

Bonjour,

Code html :

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

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

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>

**laurentSc** · 24/10/2012, 16h02

Bien vu pour les th :

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