Question

我真的是一个非常新的初学者。我的任务是由我的老板制作电子邮件签名，我无法弄清楚如何制作它。我正在使用Dreamweaver并编写了成功发送的基本HTML电子邮件，所以我的代码并不是最糟糕的。

我正在尝试重新创建（用词语制作）：

我希望徽标右侧的四行左对齐，底部的两行要居中。我没有在表{}或tbody中定义任何对齐tr td {}。

以下是它在Chrome预览中的外观：

我会发表评论，向您展示它在Dreamweaver中的外观

风格：

    table {
    border-collapse: collapse;
    border-spacing: 0;
}

    tbody tr td {
    font-family: sans-serif;
    font-style: bold;
    color: black;
    font-size: 13px;
}

.B {font-size: 14px;
    text-align: left !important;
}

.smallcaps {
    font-variant: small-caps;
    font-size: 14px;
    text-align: left !important;
}

.bcorp {
    font-variant: small-caps;
    font-size: 14px;
    text-align: center;
}

.pad {
    padding-left: 12px;
    padding-right: 12px;
    vertical-align: bottom;
    text-align: center;
    }   

    a {
        text-decoration: none;
        text-align: center;
    }

在表＆gt; tbody：

中

<tr>
        <td width="96" rowspan="6"><a><img src="http:///wp-content/uploads/2016/09/Logo-01.jpg"  alt="Logo" width="96" height="90"/></a></td>
      <td height="1" colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td height="9" colspan="2"><span class="B">Name Here, Position Title</span></td>
    </tr>
    <tr>
      <td height="20" colspan="2"><span class=smallcaps>Company Name</span>.</td>
    </tr>
    <tr>
      <td height="20" colspan="2">12345 SW 22 P<span class=smallcaps>kwy</span> | P<span class=smallcaps>ortland</span>, OR 97111 | S<span class=smallcaps>te</span> 123</td>
    </tr>
    <tr>
      <td height="7" colspan="2">D<span class=smallcaps>esk</span>: 503.123.4567 | C<span class=smallcaps>ell</span>: 503.987.6543</td>
    </tr>
    <tr>
      <td height="1" colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2" cellpadding="5">
      <a href="https://www.facebook.com/">
      <img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
      </a>
      <a href="https://www.facebook.com/">
      <img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
      </a>
      <a href="https://www.facebook.com/">
      <img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
      </a>
      <a href="https://www.facebook.com/">
      <img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
      </a>
      <a href="https://www.facebook.com/">
      <img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
      </a>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
        <td height="30" colspan="2"><span class=bcorp>A Certified B Corporation®</span></td>
      <td width="101">&nbsp;</td>
    </tr>

编辑：添加了代码 - 希望它足够清楚，以帮助

Answer 1

好的，请检查一下，看看这对你有帮助。关于表问题。某些电子邮件程序不会将Inline-CSS呈现给电子邮件正文。您可以考虑使用style属性来支持缺少Table设计。我曾经在制作时事通讯时这样做。

<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
  <tr>
    <td>
      <table cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
          <td style="line-height:1.6;padding: 5px 15px;">
            <div>Name Here, Position Title</div>
            <div>Company Name</div>
            <div>Stress address wrapped around here</div>
            <div>Desk: 123.456.789 | Cell: 123.456.789</div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding: 5px;">
      <table width="100%" cellspacing="0" cellpadding="5" border="0">
        <tr>
          <td align="center">
            <table align="center" width="50%" cellspacing="0" cellpadding="5" border="0">
              <tr>
                <td> <a href="#">Icon1</a> </td>
                <td> <a href="#">Icon2</a> </td>
                <td> <a href="#">Icon3</a> </td>
                <td> <a href="#">Icon4</a> </td>
                <td> <a href="#">Icon5</a> </td>                
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td align="center">
            A Certified B Corporation <sup>&reg;</sup>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 2

您可以使用CSS属性在单元格中实现所需的对齐：text-align：center和text-align：left。顺便说一句，一行默认为text-align：left，所以如果你没有放置对齐，那么它默认为左对齐。

对于合并单元格，您可以在HTML中的标记中使用rowspan和colspan属性。

我发布了一个包含完整CSS和HTML代码的工作示例供您考虑：https://jsfiddle.net/rahuldhangar/0s5usofv/

HTML code：

<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
  <tr>
    <td>
      <table cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
          <td style="line-height:1.6;padding: 5px 15px;">
            <div>Name Here, Position Title</div>
            <div>Company Name</div>
            <div>Stress address wrapped around here</div>
            <div>Desk: 123.456.789 | Cell: 123.456.789</div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding: 5px;">
      <table width="100%" cellspacing="0" cellpadding="5" border="0">
        <tr>
          <td align="center">
            <ul style="list-style:none;margin:0;padding:0;">
              <li style="display:inline-block;padding:0 5px;"> Icon </li>
              <li style="display:inline-block;padding:0 5px;"> Icon </li>
              <li style="display:inline-block;padding:0 5px;"> Icon </li>
              <li style="display:inline-block;padding:0 5px;"> Icon </li>
              <li style="display:inline-block;padding:0 5px;"> Icon </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td align="center">
            A Certified B Corporation <sup>&reg;</sup>
          </td>
        </tr>
      </table>
    </td>

我可以将一些细胞集中在一张桌子中并保持对齐吗？

2 个答案: