html - 我可以将表格中的一些单元格居中，而将其他单元格左对齐吗？

Question

我是一个非常非常新的初学者。我的老板让我做一个电子邮件签名，但我不知道如何制作它。我正在使用 Dreamweaver 并编写了成功发送的非常基本的 HTML 电子邮件，所以我的代码并不是最糟糕的。

我正在尝试重新创建这个(用 word 制作):

我希望 Logo 右侧的四行左对齐，底部两行居中。我没有在表 {} 或 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;
    }

在表格>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

好的，请检查一下，看看是否对您有帮助。关于表的问题。某些电子邮件程序不会将内联 CSS 呈现到电子邮件正文中。您可以考虑使用 style 属性来支持表格设计所缺少的内容。我以前在生成时事通讯时这样做。

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