[HTML] déplacer un morceau de tableau

Version imprimable

Bonjour,
j'essai de déplacer un morceau de mon tableau mais je n'y arrive pas..
Concrétement j'ai 3 lignes avec Sortie matin pointage depointage que je voudrais placer à côté de matin, j'ai commencé à la faire mais je bloquer à cause de déformation...

bref voila mon code

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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
 
 
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
 <script type="text/javascript">
 function ChangeStatut1(formulaire) {
  max = 1;
  box1 = formm1.checkbox.checked;
  box2 = formm2.checkbox.checked;
  box3 = forma1.checkbox.checked;
  box4 = forma2.checkbox.checked;
  box5 = forms1.checkbox.checked;
  box6 = forms2.checkbox.checked;
  box7 = forms3.checkbox.checked;
  box8 = forms4.checkbox.checked;
  nombre = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0) + (box4 ? 1 : 0) + (box5 ? 1 : 0) + (box6 ? 1 : 0) + (box7 ? 1 : 0) + (box8 ? 1 : 0);
  if(formulaire.checkbox.checked == true) {formulaire.heure.disabled=false; formulaire.minute.disabled=false; formulaire.Submit.style.visibility = 'visible'; }
  if(formulaire.checkbox.checked == false) {formulaire.heure.disabled=true; formulaire.minute.disabled=true; formulaire.Submit.style.visibility = 'hidden'; }
  if (nombre > max) 
  { alert("Vous ne pouvez pas cocher plus de " + max + " cases !");
  formulaire.checkbox.checked = false;
  formulaire.heure.disabled=true; formulaire.minute.disabled=true; formulaire.Submit.style.visibility = 'hidden';}
 }
 </script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Modification horaires</title>
</head>
<body>
<table width="446" border="1">
  <tr>
    <td height="36" colspan="2">3/5/2006</td>
    <td width="79">&nbsp;</td>
    <td width="50">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">Matin</td>
    <td>&nbsp;</td>
    <td colspan="2">Sortie Matin </td>
  </tr>
  <tr>
    <td width="12">&nbsp;</td>
    <td width="96">pointage</td>
      <td><form name="formm1" method="post" action="">
      <label>
        <input name="heure" type="text" style="width:20px" maxlength="2" value=08 disabled>
        :
        <input name="minute" type="text" style="width:20px" maxlength="2" value=31 disabled>
  </label>
      <label>
      <input type="checkbox" name="checkbox" value="checkbox" onClick="ChangeStatut1(this.form)">
      </label>
      <label>
      <input type="submit" name="Submit" value="Valider" style="visibility:hidden">
      </label>
    </td></form>
     <td>&nbsp;</td>
    <td width="92">pointage</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>d&eacute;pointage</td>
     <td><form name="formm2" method="post" action="">
      <label>
        <input name="heure" type="text" style="width:20px" maxlength="2" value=11 disabled>
        :
        <input name="minute" type="text" style="width:20px" maxlength="2" value=56 disabled>
   </label>
      <label>
      <input type="checkbox" name="checkbox" value="checkbox" onClick="ChangeStatut1(this.form)">
      </label>
      <label>
      <input type="submit" name="Submit" value="Valider" style="visibility:hidden">
      </label>
    </td></form>
 
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td colspan="2">Apr&egrave;s-midi</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>pointage</td>
     <td><form name="forma1" method="post" action="">
      <label>
        <input name="heure" type="text" style="width:20px" maxlength="2" value=13 disabled>
        :
        <input name="minute" type="text" style="width:20px" maxlength="2" value=39 disabled>
   </label>
      <label>
      <input type="checkbox" name="checkbox" value="checkbox" onClick="ChangeStatut1(this.form)">
      </label>
      <label>
      <input type="submit" name="Submit" value="Valider" style="visibility:hidden">
      </label>
    </td></form>
 
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>d&eacute;pointage</td>
     <td><form name="forma2" method="post" action="">
      <label>
        <input name="heure" type="text" style="width:20px" maxlength="2" value=17 disabled>
        :
        <input name="minute" type="text" style="width:20px" maxlength="2" value=30 disabled>
   </label>
      <label>
      <input type="checkbox" name="checkbox" value="checkbox" onClick="ChangeStatut1(this.form)">
      </label>
      <label>
      <input type="submit" name="Submit" value="Valider" style="visibility:hidden">
      </label>
    </td></form>
 
    <td width="11">&nbsp;</td>
  </tr>
      <tr>
    <td colspan="2"><form name="formr" method="post" action="">
      <label>
        <input type="checkbox" name="checkbox" value="checkbox">
      </label>
    Sortie matin 
    </td></form>      
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>depointage</td>
     <td><form name="forms3" method="post" action="">
      <label>
        <input name="heure" type="text" style="width:20px" maxlength="2" value=00 disabled>
        :
        <input name="minute" type="text" style="width:20px" maxlength="2" value=00 disabled>
   </label>
      <label>
      <input type="checkbox" name="checkbox" value="checkbox" onClick="ChangeStatut1(this.form)">
      </label>
      <label>
      <input type="submit" name="Submit" value="Valider" style="visibility:hidden">
      </label>
    </td></form>
 
  <td rowspan="2">  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>pointage</td>
     <td><form name="forms4" method="post" action="">
      <label>
        <input name="heure" type="text" style="width:20px" maxlength="2" value=00 disabled>
        :
        <input name="minute" type="text" style="width:20px" maxlength="2" value=00 disabled>
   </label>
      <label>
      <input type="checkbox" name="checkbox" value="checkbox" onClick="ChangeStatut1(this.form)">
      </label>
      <label>
      <input type="submit" name="Submit" value="Valider" style="visibility:hidden">
      </label>
    </td></form> 
 
  </tr>
      <tr>
    <td colspan="2">Sortie apr&egrave;s-midi </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>depointage</td>
     <td><form name="forms1" method="post" action="">
      <label>
        <input name="heure" type="text" style="width:20px" maxlength="2" value=00 disabled>
        :
        <input name="minute" type="text" style="width:20px" maxlength="2" value=00 disabled>
   </label>
      <label>
      <input type="checkbox" name="checkbox" value="checkbox" onClick="ChangeStatut1(this.form)">
      </label>
      <label>
      <input type="submit" name="Submit" value="Valider" style="visibility:hidden">
      </label>
    </td></form>
 
  <td rowspan="2">  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>pointage</td>
     <td><form name="forms2" method="post" action="">
      <label>
        <input name="heure" type="text" style="width:20px" maxlength="2" value=00 disabled>
        :
        <input name="minute" type="text" style="width:20px" maxlength="2" value=00 disabled>
   </label>
      <label>
      <input type="checkbox" name="checkbox" value="checkbox" onClick="ChangeStatut1(this.form)">
      </label>
      <label>
      <input type="submit" name="Submit" value="Valider" style="visibility:hidden">
      </label>
    </td></form> 
 
  </tr>
  </table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

merci de votre aide
voila c'est en html

04/05/2006, 14h58
Swoög

Lut !

tout d'abord, s'il s'agit d'un problème pûrement HTML, enlève le code PHP, et montre nous uniquement le code HTML généré ;)
04/05/2006, 15h13
franfr57

voila c'est en html merci de votre aide
05/05/2006, 06h55
franfr57

on me demande de mettre mon code en html, je le met et après on ne m'aide même pas...

Merci de votre aide!
05/05/2006, 07h59
Swoög

Heu...

En fait, si je te suis, tu voudrais que le "Sortie Matin" qui est là à côté de Matin, passe en dessous, comme c'est pour Après-midi ?
05/05/2006, 08h32
franfr57

la en dessous de après midi j'ai 3 ligne :
sortie matin
pointage champ txt : champ txt case a cocher bouton
dépointage champ txt : champ txt case a cocher bouton

je voudrais mettre ces 3 lignes en face de Matin
cad pour les 4 première lignes du tablo je ve:
date
Matin case tablo vide Sortie Matin
case vide pointage champ txt : champ txt case a cocher bouton case vide pointage champ txt : champ txt case a cocher bouton
case vide depointage champ txt : champ txt case a cocher bouton case vide depointage champ txt : champ txt case a cocher bouton

compris?
05/05/2006, 08h36
Swoög

... heu si je suis bien, tu veux que tout soit sur la même ligne ?
(matin, sortie matin, pointage et dépointage)
05/05/2006, 09h26
franfr57

non lol

1er ligne : date
2éme ligne : Matin case tablo vide Sortie Matin
3éme ligne : case vide pointage champ txt : champ txt case a cocher bouton case vide pointage champ txt : champ txt case a cocher bouton
4éme ligne : case vide depointage champ txt : champ txt case a cocher bouton case vide depointage champ txt : champ txt case a cocher bouton

c'est plus clair?
08/05/2006, 19h51
franfr57

Pourrait on m'aider?

Merci
08/05/2006, 19h59
Swoög

Je vais essayer de voir ce qu'il est possible de faire...

Mais de toi à moi... Laisse tomber la mise en page avec des tableaux...
penche toi plutôt sur le CSS, qui te permettrait de faire ce que tu souhaites beaucoup plus facilement...
08/05/2006, 20h02
Swoög

Tiens, voilà ce que j'ai pu faire...
cela correspond à ce que tu as demandé...

mais je le répète, les tableaux pour la mise en forme, c'est PAS BIEN !!
Passe au CSS...
08/05/2006, 20h05
franfr57

comment puis-je faire avec des css?
08/05/2006, 20h05
franfr57

comment puis-je faire avec des css?
08/05/2006, 20h05
franfr57

comment puis-je faire avec des css?

exemple avec des CSS (faudra que tu effaces tes postes en trop...) :

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
<p>3/5/2006</p>
<div id="matin">Matin
  <form action="" method="post">
    <p>
      <label for="check_matin_point">pointage</label>
      <input type="text" name=""> : <input type="text" name="">
      <input type="ckeckbox" name="" id="check_matin_point">
    </p>
    <p>
      <label for="check_matin_depoint">depointage</label>
      <input type="text" name=""> : <input type="text" name="">
      <input type="ckeckbox" name="" id="check_matin_depoint">
    </p>
  </form>
</div>
<div id="sortie_matin">Sortie Matin
  <form action="" method="post">
    <p>
      <label for="check_sortie_matin_point">pointage</label>
      <input type="text" name=""> : <input type="text" name="">
      <input type="ckeckbox" name="" id="check_sortie_matin_point">
    </p>
    <p>
      <label for="check_sortie_matin_depoint">depointage</label>
      <input type="text" name=""> : <input type="text" name="">
      <input type="ckeckbox" name="" id="check_sortie_matin_depoint">
    </p>
  </form>
</div>

le CSS :

Code:

1
2
3
4
5
6
7
8
9
10
div#matin, div#sortie_matin
{
   float : left;
}
 
div#matin form, div#sortie_matin form
{
    display : block;
    margin-left : 30px;
}

Je ne l'ais pas testé, mais ça devrait fonctionner...
avoue que c'est quand même déjà plus joli non ?

08/05/2006, 20h33
franfr57

oui c'est plus jolie, cependant je ne comprend pas vraiment...
Ce que je voudrais aussi c'est que cela marche de la même façon sous mac que sous pc tout explorateur internet et ont m'as dit de faire attention...
08/05/2006, 20h48
Swoög

Citation:

Envoyé par franfr57

oui c'est plus jolie, cependant je ne comprend pas vraiment...
Ce que je voudrais aussi c'est que cela marche de la même façon sous mac que sous pc tout explorateur internet et ont m'as dit de faire attention...

C'est vrai, il faut faire un peu attention mais le code que je t'ai donné (celui là au moins) fonctionnera partout pareil (tant que le navigateur supporte les CSS) je n'ai utilisé que des propriétés de base et il n'y a pas de risque d'erreur dans les différences d'interprétation (ou très minime) avec ce code là...

de toutes façons il existe beaucoup de façons d'y remédier... (suffit de chercher CSS hack box dans google)

Enfin, c'est vrai que la mise en page par CSS prend peut-être un peu plus de temps à être mise en place que l'utilisation du WYSIWYG avec des ""beaux"" tableaux, cependant, le code est 100 fois plus facile à maintenir par la suite, et si tu veux modifier le design sans toucher au contenu, pas de soucis, suffit de retoucher les CSS, pas besoin de toucher aux pages en elles-même !
09/05/2006, 08h43
franfr57

Ou dois-je mettre le code css?

Merci
09/05/2006, 08h44
Swoög
il y a plusieurs possibilités... notamment :
Code:

1 2 3 4 5 <head> [...] <style type="text/css"> [code CSS...] </style></head>