HTML并排放置4张不同尺寸的桌子

Question

我不能使用 div，因为这是 HTML 电子邮件。我想并排放置多个不同高度的table，但是下面那个table并没有占用上面空闲的space。我正在尝试使用 <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>

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

Answer 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并排放置4张不同尺寸的桌子

HTML put 4 tables with different sizes side by side

html

javascript

css

html-email

css-tables