知道如何并排放置两个 table，并在底部放置第三个 table

Question

我正在尝试使用 html 创建电子邮件签名。但我想做的是并排放置 2 个 table。第三个在底部。我设法通过在第一个 table 上使用 align="left" 来做到这一点。但是，我有 3 tables。前两个应该并排。但是第三个必须在底部。它在浏览器中工作。但在 Outlook 中，底部 table 向右移动，紧随第二个 table。第一个有文字，第二个有图像。

我为我想要得到的东西画了漂亮的设计：

我想要什么：

我得到的：

我尝试了以下方法：
1. 使用 display:inline-block，不起作用
2. 第一和第二，甚至全部使用align="left"。没有
3.使用浮动，在浏览器中工作。但在 Outlook 中没有。
4. 将图像放在单元格中，看起来不太好。

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>emailsignature</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

a
{
    color: white;
    text-decoration: none;
}

table{
    border-collapse: collapse;
    mso-cellspacing: 10px; 
    mso-padding-alt: 10px 10px 10px 10px;
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}

td{
    padding: 0px;
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}

.footer{
    font-size: 6.5pt;
}

</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;width: 650px;margin:0;padding:0 !important; mso-line-height-rule: exactly;">
    <table bgcolor="#FFFFFF" id="Table_01" width="325" height="200" border="0" align="left">
        <tr>
            <td height="25" width="650"></td>
        </tr>
        <tr>
            <td width="173" height="25">
                <p style="font-size:16pt; font-weight:600; margin:0;">John Doe</p></td>
        </tr>
        <tr>
            <td height="21" width="173">
                <p style="font-size:11pt; font-weight:300; margin:0;">Operationeel Manager</p></td>

        </tr>
        <tr>
            <td width="245" height="12">
                <hr style="margin:0; width: 200px;"></td>
            <td width="245" height="12"></td>
        </tr>
        <tr>
            <td width="198" height="74" style="padding-bottom: 40px;">
                <p style="font-size:10pt; margin:0;">
                    Straatstraat 18<br>
                    3333 AA Rotterdam<br>
                    Telefoon: +31 (0) 10 111 11 11<br>
                    Mobiel: +31 (0) 6 111 111 111 <br>
                </p></td>

        </tr>
        </table>
<table bgcolor="#FFFFFF" id="Table_02" width="325" height="200" border="0" >
            <tr>
                <td width="15">&nbsp;</td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    <img src="image" width="210" height="130" border="0" alt="logo">
                </td>
            </tr>
            <tr>
                <td width="15">&nbsp;</td>
            </tr>

        </table>
    <table bgcolor="#E53212" class="footer" id="Table_03" width="650" height="20" border="0">
        <tr>
            <td width="15">&nbsp;
                </td>
            <td width="50" style="text-align: center;" >
                <a href="https://www.google.com" title="disclaimer " target="_blank">

                    disclaimer
                </a>
            </td>
            <td width="12" height="32" style="text-align: center;">

                <p style="margin:0; color:#CE2811;">|</p>
            </td>
            <td width="48" height="18" style="text-align: center;">
                <a href="https://www.google.com" title="privacy pagina " target="_blank">

                    privacy
                </a>
            </td>
            <td width="16" height="32" style="text-align: center;">

                <p style="margin:0; color:#CE2811;">|</p>
            </td>
            <td width="200" height="18" style="text-align: center;">
                <a href="" title="algemene voorwaarden" target="_blank">

                    algemene voorwaarden
                </a>
            </td>
            <td width="13" height="32" style="text-align: center;">

                <p style="color:#CE2811; margin:0;">|</p>
            </td>
            <td width="120" height="18" style="text-align: center;">
                <a href="https://www.google.com" title="kvk uitreksel" target="_blank">

                    kvk uittreksel
                </a>
            </td>
            <td width="14" height="32" style="text-align: center;">

                <p style="color:#CE2811; margin:0;">|</p>
            </td>
            <td width="150" height="18" style="text-align: center;">
                <a href="https://www.google.com" title="wka verklaring" target="_blank">

                    wka verklaring
                </a>
            </td>
            <td width="300" height="32">

            </td>
            <td width="21" height="18">
                <a href="" title="Website van Stecon" target="_blank">
                    <img src="image" width="21" height="20" border="0" alt="Een wereldbol icoon">
                </a>
            </td>
            <td width="6" height="32">

            </td>
            <td width="20" height="18">
                <a href="https://www.linkedin.com" title="Linkedin page" target="_blank">
                    <img src="image" width="20" height="20" border="0" alt="Linkedin logo">
                </a>
            </td>
            <td width="18" height="32">
            </td>
            <td width="15">&nbsp;</td>
        </tr>
    </table>

</body>
</html>

Answer 1

据我所知，outlook不支持浮动。

此外，如果您考虑多种情况，在一个 table 中写一个 table 而不是几个 table 对电子邮件模板来说是好的。

对不起我的英语。

    <table style="width: 500px;">
      <tr>
        <td style="width: 50%;">
          <p style="font-size:16pt; font-weight:600; margin:0;">John Doe</p>
          <p style="font-size:11pt; font-weight:300; margin:0;">
            Operationeel Manager
          </p>
          <p style="font-size:10pt; margin:0;">
            Straatstraat 18<br />
            3333 AA Rotterdam<br />
            Telefoon: +31 (0) 10 111 11 11<br />
            Mobiel: +31 (0) 6 111 111 111 <br />
          </p>
        </td>
        <td style="width: 50%;">
          <img src="image" width="210" height="130" border="0" alt="logo" />
        </td>
      </tr>
      <tr>
        <td colspan="2" style="background-color: #f00; padding: 10px 0;">
          <ul style="padding: 0; margin: 0;">
            <li
              style="display: inline-block; border-right: solid 1px #000; margin-right: 10px; padding-right: 10px;"
            >
              <a
                href="https://www.google.com"
                title="disclaimer "
                target="_blank"
                style="font-weight: 400;"
              >
                disclaimer
              </a>
            </li>
            <li
              style="display: inline-block; border-right: solid 1px #000; margin-right: 10px; padding-right: 10px;"
            >
              <a
                href="https://www.google.com"
                title="disclaimer "
                target="_blank"
                style="font-weight: 400;"
              >
                disclaimer
              </a>
            </li>
            <li
              style="display: inline-block; border-right: solid 1px #000; margin-right: 10px; padding-right: 10px;"
            >
              <a
                href="https://www.google.com"
                title="disclaimer "
                target="_blank"
                style="font-weight: 400;"
              >
                disclaimer
              </a>
            </li>
            <li
              style="display: inline-block; border-right: solid 1px #000; margin-right: 10px; padding-right: 10px;"
            >
              <a
                href="https://www.google.com"
                title="disclaimer "
                target="_blank"
                style="font-weight: 400;"
              >
                disclaimer
              </a>
            </li>
          </ul>
        </td>
      </tr>
    </table>

并且参考以下地址就好了

https://www.caniemail.com/search/?s=float

https://caniuse.email/

Answer 2

您需要一个包装 table 来设置要占用的 table 的定义宽度。否则您的内容将占据电子邮件的整个宽度 window.
不要为 table 的身高而烦恼。您的内容将定义 table 的高度。 table 单元格的高度也是如此。您的内容将为您完成此操作，除非您将其用于间隔单元等。
您的 table 行之间有 table 个单元格不匹配。您要么需要在所有行中有两个单元格以匹配水平线，要么将 colspan="2" 添加到只有一个单元格的所有行。
您所有单元格的宽度都不起作用。当一行中只有一个单元格时，该单元格将填充 table 设置的宽度。没有办法解决这个问题，这是 table 细胞的自然行为。删除只有一个单元格的行的宽度。同时删除具有两个单元格的行中其中一个单元格的宽度。第二个单元格将填充剩余的宽度，由定义宽度的单元格留下。
在您 table 上设置的当前 650px 宽度下，您的两个内部 table 将不会并排放置，因为 Outlook 中的一个愚蠢的怪癖迫使 [=32] 之间有 20px 的差距=]秒。解决此问题的选项是 1) 将主 table 的宽度增加到 670px。 2) 将一个或两个内部 table 的宽度总共减少 20px。 3) 使用 ghost tables 来模拟 table 细胞结构。 4) 按照@SJ_OWOW的建议，将你的内部 tables 包裹在 table 单元格中。

这是我的代码版本。我从第 5 点开始使用 table 单元格选项，因为您没有在您的签名中添加任何移动响应支持，所以为了方便我使用了它。还有一些我要解决的问题，但这至少应该解决您的主要问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>emailsignature</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

a
{
    color: white;
    text-decoration: none;
}

table{
    border-collapse: collapse;
    mso-cellspacing: 10px; 
    mso-padding-alt: 10px 10px 10px 10px;
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}

td{
    padding: 0px;
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}

.footer{
    font-size: 6.5pt;
}

</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;width: 650px;margin:0;padding:0 !important; mso-line-height-rule: exactly;">
    
<table width="100%" border="0">
    <tr>
        <td align="center">
    
            <table width="650" border="0">
                <tr>
                    <td width="325">
                        <table bgcolor="#FFFFFF" id="Table_01" width="325" height="200" border="0" align="left">
                            <tr>
                                <td colspan="2" height="25"></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <p style="font-size:16pt; font-weight:600; margin:0;">John Doe</p></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <p style="font-size:11pt; font-weight:300; margin:0;">Operationeel Manager</p></td>

                            </tr>
                            <tr>
                                <td width="245" height="12">
                                    <hr style="margin:0; width: 200px;"></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="2" style="padding-bottom: 40px;">
                                    <p style="font-size:10pt; margin:0;">
                                        Straatstraat 18<br>
                                        3333 AA Rotterdam<br>
                                        Telefoon: +31 (0) 10 111 11 11<br>
                                        Mobiel: +31 (0) 6 111 111 111 <br>
                                    </p></td>

                            </tr>
                        </table>
                    </td>
                    <td>
                        <table bgcolor="#FFFFFF" id="Table_02" width="325" height="200" border="0" align="right">
                            <tr>
                                <td width="15">&nbsp;</td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">
                                    <img src="image" width="210" height="130" border="0" alt="logo">
                                </td>
                            </tr>
                            <tr>
                                <td width="15">&nbsp;</td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <table bgcolor="#E53212" class="footer" id="Table_03" width="650" height="20" border="0">
                            <tr>
                                <td width="15">&nbsp;
                                    </td>
                                <td width="50" style="text-align: center;" >
                                    <a href="https://www.google.com" title="disclaimer " target="_blank">

                                        disclaimer
                                    </a>
                                </td>
                                <td width="12" height="32" style="text-align: center;">

                                    <p style="margin:0; color:#CE2811;">|</p>
                                </td>
                                <td width="48" height="18" style="text-align: center;">
                                    <a href="https://www.google.com" title="privacy pagina " target="_blank">

                                        privacy
                                    </a>
                                </td>
                                <td width="16" height="32" style="text-align: center;">

                                    <p style="margin:0; color:#CE2811;">|</p>
                                </td>
                                <td width="200" height="18" style="text-align: center;">
                                    <a href="" title="algemene voorwaarden" target="_blank">

                                        algemene voorwaarden
                                    </a>
                                </td>
                                <td width="13" height="32" style="text-align: center;">

                                    <p style="color:#CE2811; margin:0;">|</p>
                                </td>
                                <td width="120" height="18" style="text-align: center;">
                                    <a href="https://www.google.com" title="kvk uitreksel" target="_blank">

                                        kvk uittreksel
                                    </a>
                                </td>
                                <td width="14" height="32" style="text-align: center;">

                                    <p style="color:#CE2811; margin:0;">|</p>
                                </td>
                                <td width="150" height="18" style="text-align: center;">
                                    <a href="https://www.google.com" title="wka verklaring" target="_blank">

                                        wka verklaring
                                    </a>
                                </td>
                                <td width="300" height="32">

                                </td>
                                <td width="21" height="18">
                                    <a href="" title="Website van Stecon" target="_blank">
                                        <img src="image" width="21" height="20" border="0" alt="Een wereldbol icoon">
                                    </a>
                                </td>
                                <td width="6" height="32">

                                </td>
                                <td width="20" height="18">
                                    <a href="https://www.linkedin.com" title="Linkedin page" target="_blank">
                                        <img src="image" width="20" height="20" border="0" alt="Linkedin logo">
                                    </a>
                                </td>
                                <td width="18" height="32">
                                </td>
                                <td width="15">&nbsp;</td>
                            </tr>
                        </table>

                    </td>
                </tr>
            </table>
    
        </td>
    </tr>
</table>

</body>
</html>

知道如何并排放置两个 table，并在底部放置第三个 table

Any idea how I could get two tables side by side, and third table at the bottom

html

html-email

inline-styles

代码