在表格内向左填充

Question

我正在尝试制作新闻稿，并设计为通过电子邮件发送。我现在遇到的问题是文本周围的图像没有空间，我想将background-color文本字段的颜色更改为灰色，如下所示：

如果我给它一个新td的代码，那么整个代码将无法正常工作，请您帮我。

这是完整的代码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

让我们看一下这个。

即使对于表格布局来说也很糟糕，但我们只会使用我们现有的东西。

填充文本：

要填充文本，我们需要将其包装在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>

演示在这里