Search code examples
javascripthtmlcsshtml-emailcss-tables

HTML put 4 tables with different sizes side by side

I can't use div since this is for HTML Emails. I want to put multiple table with different height side by side, but that one table below doesn't take up the free space above. I am trying to achieve this using <table>: enter image description here

But I am getting this instead:

enter image description here

This is currently my code:

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

  • Tables only approach. Floats are considered bad practice in most cases these days. Also, they just are messy to work with.

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