我能把一些单元格放在桌子中间然后左对齐其他的吗？

Question

我是个真正的新手。我的任务是做一个电子邮件签名由我的老板，我不知道如何制作它。我正在使用dreamweaver，并编写了非常基本的HTML电子邮件，成功发送，所以我的代码不是绝对最糟糕的。

我试着重建这个(用文字制作的)：

​

​

我希望徽标右边的四行是左对齐的，下面的两行是居中的。我没有在表{}或tr tr {}中定义任何对齐。

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

​

​

我将发表评论，向你展示它在梦中的样子。

风格：

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

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

​

Answer 2

您可以使用CSS属性实现单元格中所需的对齐:文本对齐:中心和文本对齐:左。顺便说一句，一行默认为文本对齐: 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>