Home/ Questions/Q 8905331
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T02:22:10+00:00

I tried creating the table below using 2 tables side by side (300 width

  • 0

I tried creating the table below using 2 tables side by side (300 width and 300 width for each), however, because of the layout, if I create it as one table which is what I am trying to achieve, the left and right heights get all jumbled up because the cells on the left extend to the height of the cells on the right.

How can I achieve this (it’s for a HTML email newsletter so no div’s)?

enter image description here

My two table layout that I would prefer doing in one table 

 <table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="300" style="float: left; display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr><td style="border-collapse: collapse;">
<img align="top" border="0" src="images/content-top-left.png" width="300" height="74" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
<tr><td height="163" style="border-collapse: collapse;vertical-align: top;">
<p class="l1" style="margin-left: 25px; margin-bottom: 0; margin-right: 0; margin-top: 0; color: #ed1c24; font-family: arial, serif; font-size: 26.5px; line-height: 26.5px;">Content left</p>
</td></tr>
<tr><td valign="top" style="border-collapse: collapse;">
<img style="vertical-align: top; outline: none; text-decoration: -ms-interpolation-mode: bicubic;" border="0" src="images/content-bottom-left.png" width="300" height="75">
</td></tr>
<tr><td valign="top" style="background-color: #a4000f; height: 148px; border-collapse: collapse;" bgcolor="#a4000f">
<img border="0" src="images/content-bottom-left-2.png" width="300" height="146" style="vertical-align: top; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="300" style="float: right; display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr><td style="border-collapse: collapse;"><img border="0" align="top" src="images/right.png" height="162" width="300" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"></td></tr>
<tr><td style="border-collapse: collapse;">
<img align="top" border="0" src="images/content-bottom-right.png" width="300" height="138" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
<tr><td width="292" height="158" valign="top" style="background-color: #a4000f; padding-top: 0; padding-left: 0; padding-bottom: 0; padding-right: 8px; height: 160px; border-collapse: collapse;margin-top:0;" bgcolor="#a4000f">
<p class="c1" style="margin-left: 0; margin-bottom: 0.5em; margin-right: 0; text-align: left; color: #fff; font-family: arial, serif; font-size: 15px; line-height: 15px; font-weight: 500;" align="left">The right content<span style="font-size: 10px; line-height: 10px; vertical-align: text-top;">*</span></p>
</td></tr>
</table>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would simply use a table with one row and two cells, one for each column. Stack all the content in each cell.

    If you need to nest another table inside each cell to put paddings around the text, that’s easy to do.

    For an example (off the top of my head, I haven’t done this in a long time!)

    with single table:

    <table width="600">
  <tr>
    <td width="300">
      <img src="top_left.png"><br>
      Text goes here<br>
      <img src="left.png"><br>
      <img src="bottom_left.png">
    </td>
    <td width="300">
      <img src="top_right.png"><br>
      <img src="right.png"><br>
      More text goes here
    </td>
  </tr>
</table>

    or with two tables:

    <table width="600">
  <tr>
    <td width="300">
      <table>
        <tr><td><img src="top_left.png"></td></tr>
        <tr><td style="padding: 20px;">text goes here</td></tr>
        <tr><td><img src="left.png"></td></tr>
        <tr><td><img src="bottom_left.png"></td></tr>
      </table>
    </td>
    <td width="300">
      <table>
        <tr><td><img src="top_right.png"></td></tr>
        <tr><td><img src="right.png"></td></tr>
        <tr><td style="padding: 20px;">more text goes here<td></tr>
      </table>
    </td>
  </tr>
</table>

    (of course I left off all the other HTML email tricks like display:block and widths and heights on all the images, but you can fill those in)

    • 0