Coding a newsletter for email - trouble setting my tables

Discussion in 'Web Design and Development' started by jive, Dec 10, 2008.

  1. jive macrumors 6502a

    Joined:
    Apr 14, 2006
    Location:
    Scotland
    #1
    Why does the table sit out of order? I've not used tables in such a long time I've forgotten how to tweak them.

    Code:
    <html>
    <head>
    <title>goodspaces</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table id="Table_01" width="600" height="707" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="9">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_01.jpg" alt="" width="600" height="232" hspace="0" vspace="0" border="0"></td>
    	</tr>
    	<tr>
    		<td rowspan="7">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_02.jpg" width="20" height="475" alt="" hspace="0" vspace="0" border="0"></td>
    		<td colspan="3">
    			<img src="http://thetwoofhearts.com/goodspaces/images/image1.jpg" width="270" height="180" alt="" hspace="0" vspace="0" border="0"></td>
    		<td rowspan="7">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_04.jpg" width="20" height="475" alt="" hspace="0" vspace="0" border="0"></td>
    		<td colspan="3">
    			<img src="http://thetwoofhearts.com/goodspaces/images/image2.jpg" width="270" height="180" alt="" hspace="0" vspace="0" border="0"></td>
    		<td rowspan="7">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_06.jpg" width="20" height="475" alt="" hspace="0" vspace="0" border="0"></td>
    	</tr>
    	<tr>
    		<td colspan="3">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_07.jpg" width="270" height="20" alt="" hspace="0" vspace="0" border="0"></td>
    		<td colspan="3">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_08.jpg" width="270" height="20" alt="" hspace="0" vspace="0" border="0"></td>
    	</tr>
    	<tr>
    		<td colspan="3">
    			<img src="http://thetwoofhearts.com/goodspaces/images/image3.jpg" width="270" height="180" alt="" hspace="0" vspace="0" border="0"></td>
    		<td colspan="3">
    			<img src="http://thetwoofhearts.com/goodspaces/images/image4.jpg" width="270" height="180" alt="" hspace="0" vspace="0" border="0"></td>
    	</tr>
    	<tr>
    		<td colspan="3">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_11.jpg" width="270" height="20" alt="" hspace="0" vspace="0" border="0"></td>
    		<td colspan="3" rowspan="2">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_12.jpg" width="270" height="37" alt="" hspace="0" vspace="0" border="0"></td>
    	</tr>
    	<tr>
    		<td rowspan="3">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_13.jpg" width="132" height="75" alt="" hspace="0" vspace="0" border="0"></td>
    		<td>
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaceslink.jpg" width="127" height="17" alt="" hspace="0" vspace="0" border="0"></td>
    		<td rowspan="3">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_15.jpg" width="11" height="75" alt="" hspace="0" vspace="0" border="0"></td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_16.jpg" width="127" height="58" alt="" hspace="0" vspace="0" border="0"></td>
    		<td rowspan="2">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_17.jpg" width="25" height="58" alt="" hspace="0" vspace="0" border="0"></td>
    		<td>
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_18.jpg" width="26" height="16" alt="" hspace="0" vspace="0" border="0"></td>
    		<td rowspan="2">
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_19.jpg" width="219" height="58" alt="" hspace="0" vspace="0" border="0"></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="http://thetwoofhearts.com/goodspaces/images/goodspaces_20.jpg" width="26" height="42" alt="" hspace="0" vspace="0" border="0"></td>
    	</tr>
    </table>
    </body>
    </html>
    Anyone care to point out the obvious?
     

    Attached Files:

  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Can you elaborate on what you mean by 'out of order,' and how it should be? My rendering seems the same except doesn't have those white lines at the bottom of your screen shot.
     
  3. jive thread starter macrumors 6502a

    Joined:
    Apr 14, 2006
    Location:
    Scotland
    #3
    Well, it should render perfectly (as it does on Firefox, Safari etc) but in Gmail it doesn't and I don't know why but I would like to fix it.

    Testing the code in a browser shows it fine, but due to Email programs being years behind it's throwing me a bit of a curve ball.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    That didn't quite explain the 'out of order.' Are the text and images suppose to be in a different order? Is it those white lines you're concerned with? Testing for email app specifics is tough, especially since I can't test it out. Code-wise, it's OK, doesn't validate, but nothing huge. So there's nothing obvious that may be wrong. Maybe it's Gmail's fault.
     
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    I suggest removing the height and width from the table tag. I didn't bother to check the math, but some browsers/web interfaces/apps might render oddly if the combined static height and width of the images in all the TD's do not match the table static height and width. In your case, all TD's are sized statically by the images you inserted. Just a quick thing to check, otherwise, it does look ok and validates as others noted so that's my only guess so far.

    -jim
     
  6. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #6
    If your still having issues, you could have a look at Mail Chimp, which has a lot of useful information and templates for e-mail marketing.
     

Share This Page