HTML 将 4 个不同大小的表格并排放置答案

【问题标题】：HTML put 4 tables with different sizes side by sideHTML 将 4 个不同大小的表格并排放置
【发布时间】：2021-10-22 13:52:25
【问题描述】：

我不能使用 div，因为这是用于 HTML 电子邮件的。我想并排放置多个不同高度的桌子，但是下面的一张桌子不会占用上面的可用空间。我正在尝试使用<table> 来实现这一点：

但我得到的是这个：

这是我目前的代码：

<style>
   .textCenter {
        text-align: center;
   }
</style>

<body>

    <table width="48.5%" style="float:left">
    
        <tr>
            <td id="td1" class="textCenter">
    
            </td>
    
        </tr>
    
    </table>
    
    <table width="3%" height="20px" style="float:left">
        <tr width="100%">
            <td width="100%"></td>
        </tr>
    </table>
    
    <table width="48.5%">
        <tr>
            <td id="td2" class="textCenter">
            
            </td>
    
        </tr>
    </table>
    
    <table width="48.5%" style="float:left; top:20%">
        <tr>
            <td id="td3" class="textCenter">
    
            </td>
        </tr>
    </table>
    
    <table width="3%" height="20px" style="float:left">
        <tr width="100%">
            <td width="100%"></td>
        </tr>
    </table>
    
    <table width="48.5%" style="float:left">
    
        <tr>
            <td id="t4" width="44%" class="textCenter">
    
            </td>
        </tr>
    </table>

</body>

【问题讨论】：

你有6张桌子，但图片有4张？
你为什么不能使用div的？电子邮件模板支持它们。为 2 列创建 2 个包装 div，并使用 float 或 ìnline-block` 将它们彼此相邻放置。
额外的 2 个表格无关紧要，仅用于边距（因为我不想将边距 css 用于 HTML 电子邮件。）

标签： javascript html css html-email css-tables

【解决方案1】：

只有表格的方法。如今，在大多数情况下，浮动被认为是不好的做法。此外，它们只是处理起来很麻烦。

.textCenter {
        text-align: center;
}
.wrapper table {border: solid 2px red;}

<table class="wrapper">
  <tr>
    <td style="width: 50%; vertical-align: top;">

      <table>
          <tr>
              <td id="td1" class="textCenter">
       Table 1
              </td>
          </tr>
      </table>

      <table>
          <tr>
              <td id="td3" class="textCenter">
      Table 3
              </td>
          </tr>
      </table>

    </td>
    <td style="width: 50%; vertical-align: top;">

      <table>
          <tr>
              <td id="td2" class="textCenter">
              Table 2 <br />
              Table 2 <br />
              Table 2 <br />Table 2 <br />
              </td>
          </tr>
      </table>

      <table>
          <tr>
              <td id="t4" width="44%" class="textCenter">
      Table 4
              </td>
          </tr>
      </table>

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

【讨论】：

先生，您为我节省了很多时间。我希望你今晚/今天有一顿美餐。真的很感激！
float 是不好的做法，因为现在你有 flexbox 和 css-grid。然而，两者都只支持约 70% 的电子邮件客户端。这就是为什么在 emai-tempaltes 中滥用其他工具（例如表格和浮动）来进行样式设置仍然是可以接受的做法。
@tacoshy flexbox 不被 Outlook 读取。我们必须使用较旧的 CSS 进行编码。
@syfer，再次阅读我的评论。我说过，flexbox 和 css-grid 都只支持 ~70%。这就是为什么 float 和 tabels 仍然是电子邮件模板可接受的做法

【解决方案2】：

我建议您将样式逻辑与您的 html 代码分开。我强烈建议您使用 flexbox css 而不是 float properties。例如，这是我应用于您的代码的逻辑。

div {
  display: flex;
  flex-wrap: wrap;
}

table {
  width: 40%;
  border: 2px solid red;
  margin: 2px;
  }
  
  table tr td {
    text-align: center;
  }
  table.table1 {
    height: 12rem;
  }
  table.table2 {
    height: 21rem;
  }
  
  table.table3 {
    height: 16rem;
    position: relative;
      top: -9rem;
  }
  
  table.table4 {
    height: 7rem;
  }

<body>

    <div>
      <table class="table1">
          <tr>
            <td id="td1" class="textCenter">
              table 1
            </td>
        </tr>
    </table>
    <table class="table2">
          <tr>
            <td id="td2" class="textCenter">
              table 2
            </td>
        </tr>
    </table>
    <table class="table3">
          <tr>
            <td id="td3" class="textCenter">
              table 3
            </td>
        </tr>
    </table>
    <table class="table4">
          <tr>
            <td id="td4" class="textCenter">
              table 4
            </td>
        </tr>
    </table>
    </div>

</body>

【讨论】：

这是HTML邮件，大部分不支持flex和更高级的网络标准