我可以在表格中将某些单元格居中并左对齐其他单元格吗？

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

在表格中>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 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 代码：

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