soucis pour paramétrer un tableau html

soucis pour paramétrer un tableau html - HTML/CSS - Programmation

Marsh Posté le 16-10-2020 à 18:58:56    

bonjour a tous
 
j ai un soucis avec les dimensions de mon tableau et également avec la fusion des cellules  
je souhaiterais par exemple  
que les premières colonnes des lignes de 3 a 7 et de  10 a 13 soient plus larges  
j ai essaye avec des dimensions , du pourcentage , des fusions mais rien ne fonctionnent  
je vous joins mon code  
 
merci de l aide

Code :
  1. <html>
  2. <head>
  3. </head>
  4.  <body>
  5.   <table border="5" width="690">
  6.    <tbody>
  7.     <tr width="690">
  8.      <td bgcolor="#1A3665" align="center" colspan="7"><b> <font size="3"><font color="ffffff">Frais de livraison :</font></font></b>   </td>
  9.     </tr>
  10.     <tr width="690">
  11.      <td width="10%" bgcolor="#9FB9B5"><img src="http://azertyuiop.unaux.com/image envois/bpost.jpeg" width="75" height="75"> </td>
  12.      <td width="60%" colspan="4"><a><label for="by_poste"><input type="radio" checked="checked" id="by_poste" name="envoi" value="0" onclick="majPrixPort(this.form);"><font color="noir">Par la poste envoi par courrier non sécurisé ( je ne suis pas responsable des pertes éventuelle)
  13.      </font><br><br><font color="noir">Si moins de 4 paquets 1 euros <br><font color="red">(Si plus de 3 paquets GRATUIT)</font></font></label> </a></td>
  14.      <td width="20%" bgcolor="#9FB9B5"> </td>
  15.      <td width="10%" bgcolor="#9FB9B5"> </td>
  16.     </tr>
  17.     <tr width="690">
  18.      <td width=""> <img src="http://azertyuiop.unaux.com/image envois/kiala.jpeg" width="75" height="75"> </td>
  19.      <td width="" colspan="4">  <a><label for="by_kiala"><input type="radio" onclick="majPrixPort(this.form);" value="1" name="envoi" id="by_kiala"><font color="noir">Par kiala l envois est securisé et garanti</font><br><br><font color="noir">Si moins de 4 paquets alors 3 euros<br><font color="red">(Si plus de 3 paquets  alors 2 euros)</font></font></label></a></td>
  20.      <td width=""><a target="_blank" href="http://www.kiala.be/fr/locateandselect"><img src="http://azertyuiop.unaux.com/imagediverse/localisation_kiala.fw.png" width="200" height="62"> </a></td>
  21.      <td width="" bgcolor="#9FB9B5"> </td>
  22.     </tr>
  23.     <tr width="690" height="6">
  24.      <td width=""colspan="2"><font color="noir">Nom du point kiala (ex librairie ...)</font></td>
  25.      <td width="" colspan="3"><input size="45" name="non_du_point_kiala"></td>
  26.      <td width="" bgcolor="#9FB9B5"> </td>
  27.      <td width="" bgcolor="#9FB9B5"> </td>
  28.     </tr>
  29.     <tr width="690">
  30.      <td><font color="noir">Localite du point kiala</font></td>
  31.      <td colspan="4"><input size="15" name="Localite_du_point_kiala"></td>
  32.      <td width="" bgcolor="#9FB9B5"> </td>
  33.      <td width="" bgcolor="#9FB9B5"> </td>
  34.     </tr>
  35.     <tr width="690">
  36.      <td><font color="noir">Code postal du point kiala</font>  </td>
  37.      <td colspan="4"><input size="15" name="code_postal_du_point_kiala"><br></td>
  38.      <td width="" bgcolor="#9FB9B5"> </td>
  39.      <td width="" bgcolor="#9FB9B5"> </td>
  40.     </tr>
  41.     <tr width="690">
  42.      <td><font color="noir">Adresse du point kiala </font></td>
  43.      <td colspan="4"><input size="45" name="adresse_point_kiala"></td>
  44.      <td width="" bgcolor="#9FB9B5"> </td>
  45.      <td width="" bgcolor="#9FB9B5"> </td>
  46.     </tr>
  47.     <tr width="690">
  48.      <td>   <font color="noir">Point kiala (ex k0001)</font></td>
  49.      <td colspan="4"><input value="K" size="5" name="point_kiala"><br></td>
  50.      <td width="" bgcolor="#9FB9B5"> </td>
  51.      <td width="" bgcolor="#9FB9B5"> </td>
  52.     </tr>
  53.     <tr width="690">
  54.      <td width=""> <img src="http://azertyuiop.unaux.com/image envois/postefrance.jpeg" width="75" height="75"> </td>
  55.      <td width="" colspan="4">   <li><a><label for="by_poste fr">     <input type="radio" onclick="majPrixPort(this.form);" value="2" name="envoi" id="by_poste fr" checked="checked"><font color="noir">Par la poste envoi par courrier non sécurisé ( je ne suis pas responsable des pertes éventuelle)</font><br><br><font color="noir">Si moins de 4 paquets 1 euros <font color="red">(Si plus de 3 paquets GRATUIT)</font></font></label> </a></li></td>
  56.      <td width="" bgcolor="#9FB9B5"> </td>
  57.      <td width="" bgcolor="#9FB9B5"> </td>
  58.      </tr>
  59.     <tr width="690">
  60.      <td width=""><img src="http://azertyuiop.unaux.com/image envois/mondialrelay.jpeg" width="75" height="75"> </td>
  61.      <td width="" colspan="4"><li><a><label for="by_poste france">     <input type="radio" onclick="majPrixPort(this.form);" value="2" name="envoi" id="by_poste france" checked="checked"><font color="noir">Par mondial relay, l'envoi est sécurisé et garanti</font><br><br><font color="noir">Si moins de 7 paquets 5 euros <font color="red">(Si plus de 6 paquets 7 euros)</font></font></label> </a></li></td>
  62.      <td width=""><a target="_blank" href="http://www.kiala.be/fr/locateandselect"><img src="http://azertyuiop.unaux.com/imagediverse/localisation_kiala.fw.png" width="200" height="62"> </a></td>
  63.      <td width="" bgcolor="#9FB9B5"> </td>
  64.     </tr>
  65.     <tr width="690">
  66.      <td width=""><font color=" noir"="">Nom du point mondial relay (ex librairie ...)</td>
  67.      <td width="" colspan="4"><input size="45" name="non_du_point_mondial_relay"></td>
  68.      <td width="" bgcolor="#9FB9B5"> </td>
  69.      <td width="" bgcolor="#9FB9B5"> </td>
  70.     </tr>
  71.     <tr width="690">
  72.      <td><font color="noir">Localite du point mondial relay</font></td>
  73.      <td colspan="4"><input size="15" name="Localite_du_point_mondial_relay"></td>
  74.      <td width="" bgcolor="#9FB9B5"> </td>
  75.      <td width="" bgcolor="#9FB9B5"> </td>
  76.      </tr>
  77.     <tr width="690">
  78.      <td><font color="noir">Code postal du point mondial relay</font></td>
  79.      <td colspan="4"><input size="15" name="code_postal_du_point_mondial_relay"><br></td>
  80.      <td width="0" bgcolor="#9FB9B5"> </td>
  81.      <td width="0" bgcolor="#9FB9B5"> </td>
  82.     </tr>
  83.     <tr width="690">
  84.      <td><font color="noir">Adresse du point mondial relay </font></td>
  85.      <td colspan="4"><input size="45" name="adresse_point_mondial_relay"></td>
  86.      <td width="0" bgcolor="#9FB9B5"> </td>
  87.      <td width="0" bgcolor="#9FB9B5"> </td>
  88.     </tr>
  89.     <tr width="690">
  90.      <td colspan="6"><font color="noir"><a target="_blank" href="http://talon-aiguille.net46.net/formulaire.php"><b>Pour un autre pays envoyer moi un mail cliquez ici </b> </a></font></td>
  91.      <td width="0" bgcolor="#9FB9B5"> </td>
  92.     </tr>
  93.     <tr width="690">
  94.      <td width="" height="1" bgcolor="#FC0021" align="center" colspan="6"><font color="noir"><b>frais de livraison </b> </font></td>
  95.      <td width="" height="10" bgcolor="#ffffff" align="right"><font size="3">€</font><input type="text" value="" size="7" name="prix_port"></td>
  96.     </tr>
  97.     <tr width="690">
  98.      <td width="" height="1" bgcolor="#FC0021" align="center" colspan="6"><b><font size="3"><b> <font color="ffffff">Total a payer tva comprise</font></b></font></b></td>
  100.      <td width="" height="10" bgcolor="#ffffff" align="right"><font size="3">€</font> <input align="right" size="8" onchange="majPrixPort(this.form);" name="MontantTotal"></td>
  101.     </tr>
  102.    </tbody>
  103.   </table>
  104.  
  105.    
  106.        
  108.  
  113.    </body></html>

Reply

Marsh Posté le 16-10-2020 à 18:58:56   

Reply

Marsh Posté le 16-10-2020 à 20:34:53    

Déjà à l'avenir essayes de joindre un modèle "live" et modifiable de ton code (jsfiffle, codepen, autre ?) :
https://jsfiddle.net/ag4rsdyx/
Ensuite ton code est remplis de width="690", c'est peut être bien si ton conteneur est toujours supérieur à 690 mais même dans ce cas ça me semble une drôle de valeur (pour les smartphone par exemple).
 
Reprend un bon tuto sur les tableaux (genre https://openweb.eu.org/articles/le- [...] ire-en-css ) pour voir comment gérer tes largeurs ce colonnes.


---------------
D3
Reply

Marsh Posté le 20-10-2020 à 08:24:14    

Déjà tu peux virer les tableaux pour faire une mise en page en CSS ça t'évitera bien des merdes.

Reply

Marsh Posté le 21-10-2020 à 09:33:27    

Pour voir un code HTML aussi pourri, ça sent l'utilisation d'un éditeur Wysiwyg :/
Merci de séparer le fond de la forme : tout ce qui est mise en page (couleur, taille, positions, fonts...) dans un CSS.

Message cité 1 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 21-10-2020 à 09:37:58    

rufo a écrit :

Pour voir un code HTML aussi pourri, ça sent l'utilisation d'un éditeur Wysiwyg :/
Merci de séparer le fond de la forme : tout ce qui est mise en page (couleur, taille, positions, fonts...) dans un CSS.


Nan ça pu l'utilisation de vieux code, un éditeur wysiwyg aurait rajouté plus de merde

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed