填充左边的表格

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中包装字体标记。 然后添加padding-left并设置display：inline-block。 背景颜色也可以应用于td，因为部分的其余部分将被图像覆盖。

由于

Answer 2

我建议这不是用表格来完成的，表格很笨重，原则上不应该用于布局。您可以使用浮动div，如下面的示例代码所示，允许您添加任何填充，并简单地更新边界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 3

让我们看看这个。

即使是桌面布局也非常糟糕，但我们只会使用我们的工作。

填充文字：

要填写文本，我们需要将其包装在div中。这是因为图像等处于相同的<td>。

所以将文本包装在：

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

更改背景：

同样由于同一<td>中的图像可能会导致问题，但如果图像可见，则背景将位于它们后面。所以它应该像设置<td>背景一样简单：

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

我添加了一个演示供您查看。对于图像，它应该正确坐，否则你必须确保高度和宽度是正确的，以阻止背景颜色显示在图像下。

DEMO HERE

摆脱额外空间：

额外的空间是由包含<td>的{​​{1}}左边的<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>

DEMO HERE

Answer 4

以下是您需要的解决方案，它也适用于Outlook：）

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