2017-09-20 3 views
0

Je suis en train d'éditer une table où j'utilise seulement 760 images de largeur. Maintenant, j'ai besoin de mettre côte à côte 2x 2x images de largeur, mais ça ne marche pas. Quelqu'un peut-il aider? Très appréciée!Images côte à côte sur html

J'ai souligné la section commentant "J'ai des problèmes ici". Vérifiez s'il vous plaît.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<title>TITLE</title> 
 
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
 
</head> 
 
<body bgcolor="#FFFFFF" style="margin: 0px; padding: 0px; background-color: rgb(255, 255, 255);"> 
 
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4;" width="100%"> 
 
    <tbody> 
 
     <tr> 
 
     <td align="center"><!-- Header --> 
 
     <table border="0" cellpadding="0" cellspacing="0" width="760"> 
 
      <tbody> 
 
       <tr> 
 
        <td align="center"> 
 
        <p style="color: #f4f4f4;font-size:1px;">Hello 
 
        </p> 
 

 
        <p align="center" style="color:#777777;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><a href="http://www*********" style="color:#777777" target="_blank">Online version</a> 
 
        </p> 
 
        </td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 

 
     <table align="center" border="0" cellpadding="0" cellspacing="0" width="760"> 
 
      <tbody> 
 
       <tr> 
 
        <td width="760"><a border="0" ><img alt="Banner" border="0" height="224" src="http://www.************" style="display:block;border:0 none" title="Banner" width="760" /> </a></td> 
 
           </tr> 
 
      </tbody> 
 
     </table> 
 
     <!-- End Header--> 
 

 
     <table align="center" border="0" cellpadding="0" cellspacing="0" itemscope="" itemtype="http://schema.org/Offer" style="background-color:#FFFFFF;" width="760"> 
 
      <tbody><!-- Main --> 
 
       <tr> 
 
        <td align="center" colspan="2"> 
 
        <table align="center" border="0" cellpadding="0" cellspacing="0"> 
 
        <tbody> 
 
         <tr> 
 
          <td align="left"><a border="0" href="htt***************" target="_blank"><img alt="Intro" border="0" src="http://www**********.jpg?1502297240" style="display:block" title="Intro" /> </a></td> 
 
         </tr> 
 
         <tr> 
 
          <td align="left"><a border="0" href="http***************" target="_blank"><img alt="******" border="0" src="http://www*********/3.jpg?1502297240" style="display:block" title="*****" /> </a></td> 
 
         </tr> 
 
         <tr> 
 
          <td align="left"><a border="0" href="http************" target="_blank"><img alt="******" border="0" src="http://www************4.jpg?1502297240" style="display:block" title="****************" /> </a></td> 
 
         </tr> 
 

 
<!--I'M HAVING TROUBLE HERE--> 
 

 

 
         <tr> 
 
          <td align="left"><a border="0" href="*******************" target="_blank"><img alt="LEFT PICTURE" border="0" src="http://www********5.jpg?1502297240" style="display:block" title="LEFT PICTURE" /> </a></td> 
 
         </tr> 
 
         <tr> 
 
          <td align="right"><a border="0" href="https://www***************" target="_blank"><img alt="RIGHT PICTURE" border="0" src="http://www**********6.jpg?1502297240" style="display:block" title="RIGHT PICTURE" /> </a></td> 
 
         </tr> 
 
              </tbody> 
 
        </table> 
 
        </td> 
 
       </tr> 
 
       <!-- End --> 
 
      </tbody> 
 
     </table> 
 

 

 
      <!-- Unsubscribe to anti cancer foundation --> 
 

 
     <table border="0" cellpadding="10" cellspacing="4" height="70" style="margin-bottom:20px;margin-top:20px;" width="504"> 
 
      <tbody> 
 
       <tr> 
 
       <td style="background-color:#FFFFFF;border:1px solid #d1d1d1"> 
 
        <center style="font-family: Arial,Helvetica,sans-serif;font-size:13px;"> 
 
        <p style="margin:0;color:#444"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t **************</span><br> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <a href="*******************</a> 
 
        </p> 
 
        </center> 
 
       </td> 
 
</tr> 
 
      </tbody> 
 
     </table> 
 
     <!-- Donations --></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 

 
<table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4" width="100%"> 
 
    <tbody> 
 
     <tr> 
 
     <td align="center"> 
 
     <p align="center" style="color:#444444;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><br>**********</br> 
 
\t \t <br>************</br><br>**************</br><br>***********</br><br>***********</br><br><a href="**************">***************</a></br><br><a href=".***********">***************</a></br> 
 

 
     </p> 
 
     </td> 
 
     </tr> 
 
     </tbody> 
 
</table> 
 
</body> 
 
</html>

Aussi, si vous voyez quelque chose qui est tout à fait inutile, s'il vous plaît enlever ainsi. Je suis sûr que tout ce code pourrait être raccourci.

Répondre

0

utilisation tr, td comme ci-dessous pour le côté par image latérale

<tr> 
    <td><img style="float:left;width:380px" ><img style="float:right;width:380px"></td> 
</tr> 

    
             
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<title>TITLE</title> 
 
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
 
</head> 
 
<body bgcolor="#FFFFFF" style="margin: 0px; padding: 0px; background-color: rgb(255, 255, 255);"> 
 
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4;" width="100%"> 
 
    <tbody> 
 
     <tr> 
 
     <td align="center"><!-- Header --> 
 
     <table border="0" cellpadding="0" cellspacing="0" width="760"> 
 
      <tbody> 
 
       <tr> 
 
        <td align="center"> 
 
        <p style="color: #f4f4f4;font-size:1px;">Hello 
 
        </p> 
 

 
        <p align="center" style="color:#777777;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><a href="http://www*********" style="color:#777777" target="_blank">Online version</a> 
 
        </p> 
 
        </td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 

 
     <table align="center" border="0" cellpadding="0" cellspacing="0" width="760"> 
 
      <tbody> 
 
       <tr> 
 
        <td width="760"><a border="0" ><img alt="Banner" border="0" height="224" src="http://www.************" style="display:block;border:0 none" title="Banner" width="760" /> </a></td> 
 
           </tr> 
 
      </tbody> 
 
     </table> 
 
     <!-- End Header--> 
 

 
     <table align="center" border="0" cellpadding="0" cellspacing="0" itemscope="" itemtype="http://schema.org/Offer" style="background-color:#FFFFFF;" width="760"> 
 
      <tbody><!-- Main --> 
 
       <tr> 
 
        <td align="center" colspan="2"> 
 
        <table align="center" border="0" cellpadding="0" cellspacing="0"> 
 
        <tbody> 
 
         <tr> 
 
          <td align="left"><a border="0" href="htt***************" target="_blank"><img alt="Intro" border="0" src="http://www**********.jpg?1502297240" style="display:block" title="Intro" /> </a></td> 
 
         </tr> 
 
         <tr> 
 
          <td align="left"><a border="0" href="http***************" target="_blank"><img alt="******" border="0" src="http://www*********/3.jpg?1502297240" style="display:block" title="*****" /> </a></td> 
 
         </tr> 
 
         <tr> 
 
          <td align="left"><a border="0" href="http************" target="_blank"><img alt="******" border="0" src="http://www************4.jpg?1502297240" style="display:block" title="****************" /> </a></td> 
 
         </tr> 
 

 
<!--I'M HAVING TROUBLE HERE--> 
 

 

 
         <tr> 
 
          <td align="center"><a border="0" href="*******************" target="_blank"><img alt="LEFT PICTURE" style="float:left;width:380px" border="0" src="http://www********5.jpg?1502297240" style="display:block" title="LEFT PICTURE" /> </a><a border="0" href="https://www***************" target="_blank"><img alt="RIGHT PICTURE" style="float:right;width:380px" border="0" src="http://www**********6.jpg?1502297240" style="display:block" title="RIGHT PICTURE" /> </a></td> 
 
         
 
         
 
         </tr> 
 
              </tbody> 
 
        </table> 
 
        </td> 
 
       </tr> 
 
       <!-- End --> 
 
      </tbody> 
 
     </table> 
 

 

 
      <!-- Unsubscribe to anti cancer foundation --> 
 

 
     <table border="0" cellpadding="10" cellspacing="4" height="70" style="margin-bottom:20px;margin-top:20px;" width="504"> 
 
      <tbody> 
 
       <tr> 
 
       <td style="background-color:#FFFFFF;border:1px solid #d1d1d1"> 
 
        <center style="font-family: Arial,Helvetica,sans-serif;font-size:13px;"> 
 
        <p style="margin:0;color:#444"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t **************</span><br> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <a href="*******************</a> 
 
        </p> 
 
        </center> 
 
       </td> 
 
</tr> 
 
      </tbody> 
 
     </table> 
 
     <!-- Donations --></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 

 
<table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4" width="100%"> 
 
    <tbody> 
 
     <tr> 
 
     <td align="center"> 
 
     <p align="center" style="color:#444444;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><br>**********</br> 
 
\t \t <br>************</br><br>**************</br><br>***********</br><br>***********</br><br><a href="**************">***************</a></br><br><a href=".***********">***************</a></br> 
 

 
     </p> 
 
     </td> 
 
     </tr> 
 
     </tbody> 
 
</table> 
 
</body> 
 
</html>
+0

-je exécuter cet extrait de code, il résout le côte à côte problème img, Laissez-moi savoir si cela fonctionne pour vous –

+0

Bonjour, merci pour votre répondre. Il va en fait désaligner les autres tables au-dessus d'eux, je ne comprends pas. malchanceux ... –

+0

clarifier ce qui se passe quand j'ai fait vos changements https://imgur.com/a/B51WU –