Padding-left inside table

Question

I am trying to create a newsletter that I designed to send via email. I now have a problem that the text does not have room for images around it, and I would like to change the background-colortext field to gray, like:

If I give him a new one td, all the code no longer works, you can help me.

Here is the full jsfiddle code

<table width="600*" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr><br>
        <td width="201" valign="top"  >
            <img src="images/angebot1.jpg" style="display: block;" border="0" width="201" height="394"/><br />
            <br />
        </td>

        <td width="291" valign="top">
            <img src="images/angebotbild1.jpg" style="display: block;" border="0" width="335" height="150"/>
            <div style="margin-top: 3px;"></div>
            <font color="#778da7" face="Trebuchet, Arial, Verdana, Helvetica, sans-serif" size="2" style="font-size: 12px"> the text </font><br><br>
            <a  href="#" alt="Book now" target="_blank" style="color:#cc1f2f; font-weight:bold; text-decoration:none;float:left"><img src="images/button.jpg" width="335" height="60" style="display:block;" border="0" /></a>
        </td>
    </tr>
</table>

Answer 1

Let's take a look at this.

Even for the layout of the table, this is pretty bad, but we will just work with what we have.

Text to fill in:

, div. , .. <td>.

, :

<div style="padding: 10px;"></div>

:

, <td>, , , . , <td> :

<td style="background: #eee;" width="291" valign="top">

. , , , , .

:

<td>, <br /><br />, , . <td> <tr> , .

:

<td width="201"valign="top">
   <img src="images/angebot1.jpg" style="display: block;" border="0" width="201" height="394" />
<br />
<br />
</td>

, :

<td width="201"valign="top">
   <img src="images/angebot1.jpg" style="display: block;" border="0" width="201" height="394" />
</td>

Answer 2

div. padding-left set display: inline-block. , td , .

Answer 3

, , . floated divs, , , , div . , , , - , CSS .

<div style="width:546px; margin: 0 auto;">
<a href="http://www.costakreuzfahrten.de/de/kreuzfahrten_liste/westliches_mittelmeer-savona_italien;-costa_serena-201402.html?utm_source=care&utm_medium=email&utm_content=mittelmeer&utm_campaign=4mio">
            <img src="images/head.jpg" width="536px"/></a>
<font color="#81878b" face="Trebuchet, Arial, Verdana, Helvetica, sans-serif" size="2" style="font-size: 12px">
<br />Sehr geehrte Frau Muster,<br /><br />
haben Sie schon Pläne für die schönste Zeit des Jahres 2014? Wir haben ein paar verlockende 
Urlaubsideen für Sie zusammen gestellt. Eine Kreuzfahrt mit Costa ist die stilvolle Art, neue Länder, 
aufregende Metropolen und nette Menschen kennen zu lernen. Entdecken Sie die schönsten 
Plätze der Ostsee, des Orients und des Mittelmeers auf einer Kreuzfahrt mit Costa!
</font> 
    <div>
    <div style="width:201px; float:left;"  >
        <img src="images/angebot1.jpg" style="display: block;" border="0" width="201" height="394"/>                        
    </div>

    <div style="width:335px; float:left; padding-left:10px;" >
        <img src="images/angebotbild1.jpg" style="display: block;" border="0" width="335" height="150"/>
        <font color="#778da7" face="Trebuchet, Arial, Verdana, Helvetica, sans-serif" size="2" style="font-size: 12px; padding:10px;">
        Wie gemacht für alle, die den etwas anderen Sommer 
        erleben wollen: Diese Reise führt Sie zu den großen 
        Metropolen und kleinen Städten des Baltikums. Jede 
        davon wird Sie durch den Kontrast zwischen prunkvoller 
        Architektur in den historischen Stadtzentren und der 
        nachhaltigen in den neuen Arealen Bauweise faszinieren. 
        Jeder Ort erzählt hier seine eigene, spannende 
        Geschichte. Lassen Sie sich verzaubern.
        </font>
        <a  href="#" alt="Book now" target="_blank" style="color:#cc1f2f; font-weight:bold; text-decoration:none;float:left"><img border="0"  src="images/button.jpg" width="335" height="60" style="display:block;" border="0" /></a>
    </div>
    </div>
</div>

Answer 4

Here is the solution you need, it will work on Outlook too :)

<table width="600*" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr><br>
        <td width="201" valign="top"  >
            <img src="images/angebot1.jpg" style="display: block;" border="0"              width="201" height="394"/><br />
            <br />
        </td>

        <td width="291" valign="top" style="background-color:#eee;">
            <img src="images/angebotbild1.jpg" style="display: block;" border="0" width="335" height="150"/>


 <div style="padding:30px;">The text</div>

            <br><br>
            <a  href="#" alt="Book now" target="_blank" style="color:#cc1f2f; font-weight:bold; text -decoration:none;float:left"><img src="images/button.jpg" width="335" height="60" style="display:block;" border="0" /></a>
        </td>
    </tr>
</table>