padding-left inside a table

Question 1

Lets have a little look at this.

Even for a table layout its pretty bad but we will just work with what we have.

Padding Text:

To pad the text out we will need to wrap it in a div. This is due to images and so on being in the same <td>.

So wrap the text in:

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

Changing the background:

Again as there are images in the same <td> that could cause problems but if the images are visible then the background will sit behind them. So it should be as simple as setting the <td> background like so:

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

I have added a demo for you to look at. With the images it should sit correctly if not you will have to make sure the height and widths are correct to stop the background colour from showing under the images.

DEMO HERE

Getting rid of extra space:

The extra space is cause by the left <td> containing <br /><br /> take this away and it will be fine. As this is a table <td> in the same <tr> will have the same height, changing one will affect the other.

Before:

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

After:

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

DEMO HERE

Question 2

You can wrap the font tag within div. Then add padding-left and set display: inline-block. Also background-color can be applied to the td, as rest of the part will be covered by images.

Thanks

Question 3

I suggest this is not done with a table, tables are clunky, and should never be used for layout on principle. You can use floated divs, as is shown in my example code below, allowing you to add any padding you wish, and simply updating the width of the bounding div to account for this. You should use tables for data needing to be tabulated, and rarely used in layout unless it is specifically called for due to CSS not being able to style it.

<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>

Question 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>