Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML table giving me trouble
    primarykey
    data
    text
    <p>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. </p> <p>How can I achieve this (it's for a HTML email newsletter so no div's)? </p> <p><img src="https://i.stack.imgur.com/sXrMD.png" alt="enter image description here"></p> <p><strong>My two table layout that I would prefer doing in one table</strong> </p> <pre><code> &lt;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;"&gt; &lt;tr&gt;&lt;td style="border-collapse: collapse;"&gt; &lt;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;"&gt; &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td height="163" style="border-collapse: collapse;vertical-align: top;"&gt; &lt;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;"&gt;Content left&lt;/p&gt; &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td valign="top" style="border-collapse: collapse;"&gt; &lt;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"&gt; &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td valign="top" style="background-color: #a4000f; height: 148px; border-collapse: collapse;" bgcolor="#a4000f"&gt; &lt;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;"&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;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;"&gt; &lt;tr&gt;&lt;td style="border-collapse: collapse;"&gt;&lt;img border="0" align="top" src="images/right.png" height="162" width="300" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td style="border-collapse: collapse;"&gt; &lt;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;"&gt; &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;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"&gt; &lt;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"&gt;The right content&lt;span style="font-size: 10px; line-height: 10px; vertical-align: text-top;"&gt;*&lt;/span&gt;&lt;/p&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload