padding-left inside a table

Question

I'm trying to build a newsletter which I've designed to be sent by email. I've now the problem that the text has no space to the images around it and I would like to change the background-color of the text field to grey just like:

If I'm giving it a new td is the whole code not working anymore could you help me please.

Here is the complete code jsfiddle

<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

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