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 ?

Invité · 24/10/2012, 16h10

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.

Invité · 24/10/2012, 16h20

Voilà à quoi ça doit ressembler :

Code css :

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

**laurentSc** · 24/10/2012, 20h17

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 :

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

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 ?

Invité · 24/10/2012, 21h51

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

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

**laurentSc** · 24/10/2012, 22h36

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 ?

Invité · 24/10/2012, 23h53

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

Code php :

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

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

**laurentSc** · 25/10/2012, 00h17

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 :

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

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 alt="" <?php fctaffichimage('img_vide.jpg"', 400, 400) ?> />-->
		<img id="image" src="img_vide.jpg" ></td>

Mise en page dans tableau

HTML

Discussions similaires

Partager

Partager