Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3132 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  HTML tableau colspan

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

HTML tableau colspan

n°2178765
futursc
Posté le 05-03-2013 à 11:26:03  profilanswer
 

Bonjour à tous,
 
J'espère ne pas faire de doublon avec ce message mais je n'ai pas trouvé de réponse à mon petit soucis.
 
Je débute tout juste et j'essaie de construire un tableau tout simple avec une colonne et un "imbriquement" de deux colonnes.
La largeur de la colonne est de 700pixels. Dans mon imbrication, les deux colonnes font donc 350 pixels chacune.
 
Tout allait bien jusqu'à ce que j'ajoute des images de 700pixels dans ma première colonne.
Les deux colonnes du dessous se sont alors décalés (en rouge dans le code ci-dessous). La première a pris la taille de la colonne du dessus (700pixels) et a donc décalé la seconde colonne à droite. Je précise que la seconde a gardé ses 350pixels de large.
 
J'imagine que je peux régler mon soucis avec un colspan mais je n'arrive pas à l'appliquer correctement.
 
Vous pouvez voir le bug ici : http://presentcontinu.com/NL/2013/NL1/index.html
 
Quelqu'un pourrait-il m'aider ?
 
Voici mon code :
 
<table border="0" cellspacing="0" cellpadding="0" width="700" align="center">
   <tr>
    <td class="header" align="left" valign="top">
     <p>image1 (width="700" height="150" )</p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image2 (width="700" height="50" )</p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image3 (width="700" height="50" )</p>
     <p>&nbsp;</p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image4 (width="700" height="50" )</p>
     <p>&nbsp;</p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image5 (width="700" height="50" )</p>
     <p>&nbsp;</p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image6 (width="700" height="50" )</p>
     <p>&nbsp;</p>
    </td>
   </tr>
   <tr>
    <td width="350" align="left" valign="top">
     <p>image7 (width="350" height="50" )</p>
     <p class="retrait25"></p>
    </td>
    <td width="350" align="left" valign="top">
     <p>image8 (width="350" height="50" )</p>
     <p class="retrait25"></p>
    </td>
   </tr>

   <tr>
    <td align="left" valign="top">
     <p>image8 (width="700" height="50" )</p>
     <p class="retrait25"></p>
    </td>
   </tr>
   <tr>
    <td>
     <p class="retrait25" align="center"></p>
    </td>
   </tr>
</table>  
 
 
Et le css :
 
body {
 color: #666666;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 margin: 20px 20px 0 0;
 padding: 0;
 font-size: 11px;
 line-height: 1.3em;
 }
 td {  
 font-size: 11px;
 }
 a {
 color: #666666;
 }
 a img {
 border: none;
 }
 .header {
 padding-bottom: 15px;
 background-repeat: no-repeat;
}
 .retrait25 {
 padding-right: 25px;
 padding-left: 25px;
 }
 
 
Merci beaucoup et désolé par avance si mon code vous faisait bondir !!

mood
Publicité
Posté le 05-03-2013 à 11:26:03  profilanswer
 

n°2178776
Yonel
Monde de merde !
Posté le 05-03-2013 à 12:36:24  profilanswer
 

Euh alors les tableaux c'est le mal, on code plus du tout comme ça normalement (faut utiliser des div + css).
 
Mais en admettant que tu veuilles garder le code tel quel, il suffirait de faire un sous tableau.  
 
Autrement dit remplacer :

Code :
  1. <tr>
  2.     <td width="350" align="left" valign="top">
  3.      <p>image7 (width="350" height="50" )</p>
  4.      <p class="retrait25"></p>
  5.     </td>
  6.     <td width="350" align="left" valign="top">
  7.      <p>image8 (width="350" height="50" )</p>
  8.      <p class="retrait25"></p>
  9.     </td>
  10. </tr>


par :

Code :
  1. <tr>
  2.     <td align="left" valign="top">
  3.        <table border="0" cellspacing="0" cellpadding="0" width="100%">
  4.           <tr>
  5.             <td width="350" align="left" valign="top">
  6.              <p>image7 (width="350" height="50" )</p>
  7.              <p class="retrait25"></p>
  8.             </td>
  9.             <td width="350" align="left" valign="top">
  10.              <p>image8 (width="350" height="50" )</p>
  11.              <p class="retrait25"></p>
  12.             </td>
  13.            </tr>
  14.         </table>
  15.     </td>
  16. </tr>

n°2178789
futursc
Posté le 05-03-2013 à 14:35:22  profilanswer
 

Merci beaucoup c'est très gentil ! En fait j'ai suivi les conseils d'un graphiste qui m'a dit que, pour une newsletter, il vallait mieux essayer de mettre le moins possible de css pour éviter que cela bouge ... Mais j'imagine que c'est un peu la soluce fainéant !
 
Quoi qu'il en soit merci beaucoup, tout fonctionne très bien maintenant !

n°2178839
gatsu35
Blablaté par Harko
Posté le 05-03-2013 à 21:16:18  profilanswer
 

je confirme pour une newsletter il faut encore utiliser des tableaux


---------------
Blablaté par Harko

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  HTML tableau colspan

 

Sujets relatifs
brobleme: tableau de structureSignature HTML à l'aide svp - superposition a href sur image
Récupérer une "colonne" d'un tableauCode Html pour une fonction multiplication (débutant)
Suppression des doublons dans un tableau des chaines des caractèresConseille livre html/css ?!
editeur HTML source / live previewediteur html
Script PHP qui génère une page html grâce a un formulaireProbleme : Tableau de pointeurs sur structure
Plus de sujets relatifs à : HTML tableau colspan


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR