html表＆amp;内联样式

时间：2013-10-28 23:24:57

标签： html css html-table html-email

我对HTML表格和内联CSS没有太多经验，但我正在尝试创建HTML电子邮件签名。理想情况下，我希望左侧有一个小图片，中间有文字，右侧有一个较大的徽标，一行文字位于所有内容的下方。

我有基本的内容，但是我试图将所有内容与浮动相对齐，这些浮动似乎不起作用。什么是水平排列所有内容的最佳方法？

jsfiddle 

<br />
<meta name="format-detection" content="telephone=no">
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:0;padding:0;">
<tr>
<td width="47" style="float:left;width:47px;margin:0;padding:0;">
<a href='http://example.com' style="border:none;text-decoration:none;"><img src="http://lorempixel.com/47/43/" alt="First Last" style="border:none;width:47px;"></a>
</td>

<td width="10" style="width:10px;">&nbsp;</td>  

<td valign='top' style="margin:0;padding:0;">
<table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="float:left;padding:0;margin:0;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:13px;color:#D31145;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;"><a style="border:none;text-decoration:none;color:#D31145;" href="mailto:email@example.com">FIRST LAST</a>
</td>
</tr>

<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;">
<span style="border:none;text-decoration:none;color:#000104;">REALTOR | P <a style="border:none;text-decoration:none;color:#000104;" href="tel:1111111111">111.111.1111</a></span>
</td>
</tr>

<td width="177" style="float:right;width:177px;margin:0;padding:0;">
<a href='http://example.com' style="border:none;text-decoration:none;"><img src="http://lorempixel.com/177/54/" alt="ZOPA Realty Group" style="border:none;width:177px;"></a>
</td>
</table>

<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:-15 0 0 60;padding:0;">
<tr>
<td><span style="margin:0;padding-left:8px;font-size:7px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;color:#000104;white-space:nowrap;">BRE xxxxxxxx | Broker BRE xxxxxxxx. In association with Keller Williams.  Each Keller Williams Realty office is independently owned and operated.</span></td>

<br />
&nbsp;

example

2 个答案:

答案 0 :(得分：4)

忘记浮动，保证金和html 3/5。邮件非常陈旧。你需要用桌子来做所有事情。 一行=一张表。你需要保证金或填充？做另一个专栏。

Codepen

示例：我需要一行 1张40 * 40的一张照片 2一个10 px的边距 3 400px的一个文本

我开始行：

<table style=" background-repeat:no-repeat; width:450px;margin:0;" cellpadding="0" cellspacing="0" border="0">
   <tr style="height:40px; width:450px; margin:0;">
     <td style="height:40px; width:40px; margin:0;">
        <img src="" style="width=40px;height40;margin:0;display:block"
     </td>
     <td style="height:40px; width:10px; margin:0;">        
     </td>
     <td style="height:40px; width:400px; margin:0;">
     <p style=" margin:0;"> my text   </p>
     </td>
   </tr>
</table>

答案 1 :(得分：3)

这应该可以解决问题：

<table width="400" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" height="40" valign="top" rowspan="3">
      <img alt="" src="" width="40" height="40" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="350" height="40" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<a href="" style="color: #D31145; font-weight: bold; text-decoration: none;">LAST FIRST</a><br>
REALTOR | P 123.456.789
    </td>
  </tr>
  <tr>
    <td width="350" height="70" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<img alt="" src="" width="200" height="60" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
  <tr>
    <td width="350" height="20" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
    </td>
  </tr>
</table>

更新：根据评论调整代码：

在查看jsFiddle之后，关于表格的一个重要注意事项是每个附加行中的表格单元格宽度都必须与第一行的宽度相同，并且所有单元格必须添加到表格的总宽度。

以下是一个不起作用的示例：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" bgcolor="#252525">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="300" bgcolor="#252525">&nbsp;
    </td>
    <td width="300" bgcolor="#454545">&nbsp;
    </td>
  </tr>
</table>

虽然第二行确实添加了600，但它（和任何其他行）必须与第一行具有相同的200-400分割，除非您使用的是colspans。如果你使用colspan，你可以有一行，但它需要与它所跨越的单元格具有相同的宽度，所以这可行：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" bgcolor="#252525">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="600" colspan="2" bgcolor="#353535">&nbsp;
    </td>
  </tr>
</table>

不是一个完整的教程，但我希望将来有助于引导你朝着正确的方向前进。

以下是您要使用的代码：

<table width="900" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="57" height="43" valign="top" rowspan="2">
      <img alt="Rashel Adragna" src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_head.png" width="47" height="43" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="843" height="43" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<a href="" style="color: #D31145; font-weight: bold; text-decoration: none;">RASHEL ADRAGNA</a><br>
REALTOR | P 855.900.24KW
    </td>
  </tr>
  <tr>
    <td width="843" height="64" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<img alt="Zopa Realty Group logo" src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_logo.png" width="177" height="54" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
  <tr>
    <td width="843" colspan="2" height="20" valign="bottom" align="center" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
    </td>
  </tr>
</table>

你会注意到我已经为你的一些表格单元添加了额外的10px。这与对齐/对齐组合在一起充当您的单元格之间的填充。这是一种巧妙的方法，可以实际添加填充，边距或空填充单元格。

相关问题
最新问题