Question

所以昨天感谢这里的人们，我学会了如何并排放置两张桌子。但是现在已经决定需要通过电子邮件发送这些信息。

所以在我的c＃应用程序中，我发送电子邮件（Outlook）并将HTMLBody属性设置为等于下面的html代码。

然而，当我发送电子邮件时，第二张表显示在第一张表下方，我该如何解决这个问题？

我一直在读CSS可能有用但不了解CSS。

侧点

在我的第一个表中有一行只包含空白单元格。再次阅读使用CSS，这是不需要的，但我又不知道如何在我的电子邮件的HTML中包含CSS？

HTML代码示例

<b><font color='#0033CC'>Sales Report</font></b>
<br><br>
<b>Currency</b>
<br><br>
<table style='font-size: 10pt; float: left; display: inline-block;' cellpadding='3'>
<tr><td>&nbsp</td><th bgcolor= #0033CC>Q1</th><th bgcolor= #0033CC>Q2</th><th bgcolor= #0033CC>Q3</th><th bgcolor= #0033CC>Q4</th><th bgcolor = #0033CC>YoY</th></tr>
<tr><td>CAD</td><td style='text-align: center;'>5.9%</td><td style='text-align: center;'>4.4%</td><td style='text-align: center;'>3.4%</td><td style='text-align: center;'>4.3%</td><td style='text-align: center; background-color:#99FF99'><b><font color='#009933'>4.3%</font></b></td></tr>
<tr><td>CHF</td><td style='text-align: center;'>-1.1%</td><td style='text-align: center;'>-0.4%</td><td style='text-align: center;'>0.1%</td><td style='text-align: center;'>-0.4%</td><td style='text-align: center; background-color:#FF6666'><b><font color='#990000'>-0.4%</font></b></td></tr>
<tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr>
<tr><td>&nbsp</td><td style='text-align: center;'>0%</td><td style='text-align: center;'>0%</td><td style='text-align: center;'>0%</td><td style='text-align: center;'>0%</td><td style='text-align: center; background-color:#99FF99'><b><font color='#009933'>100%</font></b></td></tr>
</table>

<table style='font-size: 10pt; float: left; display: inline-block;' cellpadding='3'>
<tr><td><b>Region Agg</b><td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr>
<tr><td>&nbsp</td><td>EUR</td><td>GBP</td><td>USD</td><td>&nbsp</td></tr>
<tr><td>Region A</td><td>775</td><td>6,774</td><td><font color='#990000'>-16,786</font></td></tr>
<tr><td>Region B</td><td>0</td><td>0</td><td>6,459</td></tr>
<tr><td>Region C</td><td>0</td><td>4,328</td><td><font color='#990000'>-4,133</font></td></tr>
<tr><td>Region D</td><td>0</td><td>0</td><td>4,350</td></tr>
</table>

Answer 1

您是否可以为表格

尝试HTML属性align="left"

<b><font color='#0033CC'>Sales Report</font></b>
<br><br>
<b>Currency</b>
<br><br>
<table style='font-size: 10pt; float: left; display: inline-block;' cellpadding='3' align="left">
<tr><td>&nbsp</td><th bgcolor= #0033CC>Q1</th><th bgcolor= #0033CC>Q2</th><th bgcolor= #0033CC>Q3</th><th bgcolor= #0033CC>Q4</th><th bgcolor = #0033CC>YoY</th></tr>
<tr><td>CAD</td><td style='text-align: center;'>5.9%</td><td style='text-align: center;'>4.4%</td><td style='text-align: center;'>3.4%</td><td style='text-align: center;'>4.3%</td><td style='text-align: center; background-color:#99FF99'><b><font color='#009933'>4.3%</font></b></td></tr>
<tr><td>CHF</td><td style='text-align: center;'>-1.1%</td><td style='text-align: center;'>-0.4%</td><td style='text-align: center;'>0.1%</td><td style='text-align: center;'>-0.4%</td><td style='text-align: center; background-color:#FF6666'><b><font color='#990000'>-0.4%</font></b></td></tr>
<tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr>
<tr><td>&nbsp</td><td style='text-align: center;'>0%</td><td style='text-align: center;'>0%</td><td style='text-align: center;'>0%</td><td style='text-align: center;'>0%</td><td style='text-align: center; background-color:#99FF99'><b><font color='#009933'>100%</font></b></td></tr>
</table>

<table style='font-size: 10pt; float: left; display: inline-block;' cellpadding='3' align="left">
<tr><td><b>Region Agg</b><td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr>
<tr><td>&nbsp</td><td>EUR</td><td>GBP</td><td>USD</td><td>&nbsp</td></tr>
<tr><td>Region A</td><td>775</td><td>6,774</td><td><font color='#990000'>-16,786</font></td></tr>
<tr><td>Region B</td><td>0</td><td>0</td><td>6,459</td></tr>
<tr><td>Region C</td><td>0</td><td>4,328</td><td><font color='#990000'>-4,133</font></td></tr>
<tr><td>Region D</td><td>0</td><td>0</td><td>4,350</td></tr>
</table>

Answer 2

过去我遇到过类似的问题。问题是Outlook使用MS Word呈现HTML而不是浏览器;我相信你是用浏览器测试过的。因此，您在浏览器上看到的内容与Outlook用户将看到的内容不同。

那么如何解决这个问题？

在电子邮件中提供“在浏览器中查看”中的链接，以便用户可以点击它并按照您期望的方式查看。您可能已经多次亲眼看过这种情况，背后的原因正是您所遇到的问题。
此选项不像选项1那样受欢迎，但我过去已成功完成此选项。的 I 即可。在MS Word中创建模板，表格，边框，字体等，并将其另存为html。基本上你使用MS Word作为设计师而不是HTML和浏览器。的 II 即可。发送电子邮件时使用此模板。将动态内容注入此模板。

Answer 3

您也可以使用嵌套表格，见下文。

顺便说一句，我在你的html中发现了几个问题：


有时会有<td><td>而不是</td><td>。

您使用&nbsp，但必须   。

最好使用bgcolor = attributes的引号。


其中大部分我已经修好了。

我还将标题文本移出第二个表格，它现在位于表格之上。原因：标题的字体变得不相等，因为标题＃1在表格之外，而标题＃2在表格内。

<b><font color='#0033CC'>Sales Report</font></b><br>
<br>
<table>
  <tr valign="top">
    <td>
      <!-- Column #1 -->
      <b>Currency</b>
      <table style='font-size: 10pt;' cellpadding='3'>
        <tr>
          <td>&nbsp;</td>
          <th bgcolor='#0033CC'>Q1</th>
          <th bgcolor='#0033CC'>Q2</th>
          <th bgcolor='#0033CC'>Q3</th>
          <th bgcolor='#0033CC'>Q4</th>
          <th bgcolor='#0033CC'>YoY</th>
        </tr>
        <tr>
          <td>CAD</td>
          <td style='text-align: center;'>5.9%</td>
          <td style='text-align: center;'>4.4%</td>
          <td style='text-align: center;'>3.4%</td>
          <td style='text-align: center;'>4.3%</td>
          <td style='text-align: center; background-color:#99FF99'><b><font color='#009933'>4.3%</font></b></td>
        </tr>
        <tr>
          <td>CHF</td>
          <td style='text-align: center;'>-1.1%</td>
          <td style='text-align: center;'>-0.4%</td>
          <td style='text-align: center;'>0.1%</td>
          <td style='text-align: center;'>-0.4%</td>
          <td style='text-align: center; background-color:#FF6666'><b><font color='#990000'>-0.4%</font></b></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td style='text-align: center;'>0%</td>
          <td style='text-align: center;'>0%</td>
          <td style='text-align: center;'>0%</td>
          <td style='text-align: center;'>0%</td>
          <td style='text-align: center; background-color:#99FF99'><b><font color='#009933'>100%</font></b></td>
        </tr>
      </table>
    </td>
    <td>
      <!-- Column #2 -->
      &nbsp;&nbsp;&nbsp;
    </td>
    <td>
      <!-- Column #3 -->
      <b>Region Agg</b>
      <table style='font-size: 10pt;' cellpadding='3'>
        <tr>
          <td>&nbsp;</td>
          <td>EUR</td>
          <td>GBP</td>
          <td>USD</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Region A</td>
          <td>775</td>
          <td>6,774</td>
          <td><font color='#990000'>-16,786</font></td>
        </tr>
        <tr>
          <td>Region B</td>
          <td>0</td>
          <td>0</td>
          <td>6,459</td>
        </tr>
        <tr>
          <td>Region C</td>
          <td>0</td>
          <td>4,328</td>
          <td><font color='#990000'>-4,133</font></td>
        </tr>
        <tr>
          <td>Region D</td>
          <td>0</td>
          <td>0</td>
          <td>4,350</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

发送包含彼此相邻表格的Outlook电子邮件

3 个答案: