CODEWITHSUNDEEP
html-tablehtml-email
Joe Isaacson
Joe Isaacson

Reputation: 4132

How can I maintain the width of a table?

I am trying to set up a table for an email template with an image on top that takes up the full width (600px) followed by two columns of images that split down the middle. But for some reason the right column pushes the table width too far right.

JS fiddle : http://jsfiddle.net/5QEhK/1/ 

<table width="600" style="border: 1px solid #b8b7b7;margin-bottom: 10px;">


    <!--Main Image-->

       <tr align="center" valign="center" width="580px">
           <td align="center" valign="center" width="580px">
               <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png" width="570px">
           </td>
       </tr> 



    <!--Two Columns-->
                 <tr>
                    <td valign="top" width="260" class="leftColumnContent">
                        <table border="0" cellpadding="15" cellspacing="0" width="100%">
                            <tr>
                                <td valign="top">
                                    <img style="width: 260px;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_left.png" mc:label="image"/></a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>


                    <td valign="top" width="260" class="rightColumnContent">

                        <table border="0" cellpadding="15" cellspacing="0" width="100%">
                            <tr>
                                <td valign="top">
                                    <img style="width: 260px;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_right.png" mc:label="image" mc:edit="tiwc300_image01" /></a>
                                </td>
                            </tr>

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

    </table>​

Upvotes: 0

Views: 206

Answers (2)

Varun Sheth
Varun Sheth

Reputation: 156

Try this code

I have removed some styles but you can put it back you should ideally just use colspan for this kind of requirement

<table width="600px" style="border: 1px solid #b8b7b7;margin-bottom: 10px;">
<!--Main Image-->

<tr>
   <td colspan="2" valign="center">
       <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png">
   </td>
</tr>

<!--Two Columns-->
<tr>
  <td valign="top" width="50%" class="leftColumnContent"> 
    <img style="" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_left.png" mc:label="image"/>
  </td>
  <td valign="top" width="50%" class="rightColumnContent">
      <img style="" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_right.png" mc:label="image" mc:edit="tiwc300_image01" /></a>
  </td>  
</tr>              
</table>

Upvotes: 1

Yograj Gupta
Yograj Gupta

Reputation: 9869

Your first issue is you have single td in you Main Image section it should be with colspan="2" like this.

   <!--Main Image-->

   <tr align="center" valign="center" width="580">
       <td align="center" valign="center" colspan="2">
           <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png" width="570px">
       </td>
   </tr>

second it is not an issue but it is wrong to have an attribute width with value in "px".

If width is coming as an attribute, it should be use without "px", if width is coming as css style then it is required to have some measurement unit like "px", "em", "pt"

Check this DEMO

Upvotes: 2

Related Questions