I have written an email template, its only a set of images with hyperlinks. Its working good on my browser, but when I send it through email, it gets broken due to unnecessary padding between tds.
This is how it should render. But what I see:
And when I inspected it:
You see the unnecessary padding? Here's the code:
<html><head>
<title>Email Template</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">
<!-- Save for Web Slices (594bfefd1385a.jpeg) -->
<table id="Table_01" width="1004" height="577" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68d7e313.gif" width="231" height="173" alt=""></td>
<td colspan="8" rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dbb799.gif" width="411" height="445" alt=""></td>
<td colspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68db1f3f.gif" width="361" height="163" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="163" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dd8c60.gif" width="361" height="105" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68de43fb.gif" width="231" height="403" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="95" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e02a9f.gif" width="164" height="177" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e23617.gif" width="72" height="73" alt=""></td>
<td rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e25d27.gif" width="125" height="244" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e4689f.gif" width="72" height="171" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="104" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e47c27.gif" width="42" height="131" alt=""></td>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></td>
<td colspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e677fe.gif" width="281" height="2" alt=""></td>
<td colspan="2" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></td>
<td colspan="2" rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e877be.gif" width="150" height="67" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ea96be.gif" width="89" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eab5fe.gif" width="51" height="50" alt=""></td>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ec9295.gif" width="15" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ecb9a6.gif" width="50" height="50" alt=""></td>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eeadad.gif" width="76" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="50" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eebd4d.gif" width="51" height="79" alt=""></td>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f15f75.gif" width="51" height="79" alt=""></td>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f16f15.gif" width="50" height="79" alt=""></td>
<td colspan="2" rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f37e75.gif" width="51" height="79" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f36aec.gif" width="62" height="64" alt=""></td>
<td colspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f589ec.gif" width="285" height="25" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f5a15d.gif" width="285" height="39" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="231" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="42" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="89" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="15" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="50" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="76" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="37" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="14" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="62" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="88" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="72" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="125" height="1" alt=""></td>
<td></td>
</tr>
</tbody></table>
<!-- End Save for Web Slices -->
</body></html>
Please help, Thanks in advance.
I take it this is the first email you have built? It is not padding, its the display block that is missing from the images. Use the below code for all images in the html:
style="display:block;" hspace="0" vspace="0" alt="" border="0"
Note: Since you have so many colspan and rowspan the template might not work properly in some email clients. The above code will ensure all your images are sitting flush against each other.
A word of advice not to be taken lightly:
Never do Save for web from Photoshop. It creates table that is not fixable most of the time.
Don't use col span. Some email email clients don't like it.
Only image emails will have delivery problem, general rule is to have 70/30 (some day 60/40) to get best results.
Use media queries or Gmail fix or your emails will look really messed up in Gmail apps.
Let me know if the above fix works.
Cheers
Related
I created a newsletter with photoshop and Dreamweaver. I use the slice tools to edit certain parts of the newsletter. When I receive the newsletter everything is ok and looks good. When I forward it to another email, then everything is uneven and there's a big white line where I used the slice tool.
I use
td img { display:block;) code but it doesn't take effect when I forward the email. Here is the code:
<html>
<head>
<style type="text/css">
td img {
display: block;
}
</style>
<title>COMEME</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (COMEME.psd) -->
<table id="Table_01" width="613" height="2101" border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto 0 auto;">
<tr>
<td colspan="16">
<a href="https://comemearreglos.com/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/b2337bae-4f09-4cbd-a86c-36d9a75a69be.jpg" width="612" height="298" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="298" alt=""></td>
</tr>
<tr>
<td colspan="16">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/d388fb87-d763-489d-8357-58611c94338a.jpg" width="612" height="59" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td colspan="16">
<a href="https://www.youtube.com/watch?v=lWXPkCBUFnYa">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/609b07a7-1537-4808-bdd5-9e0075aad773.jpg" width="612" height="349" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="349" alt=""></td>
</tr>
<tr>
<td colspan="16">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/d5734d30-bbff-4612-97a5-bf0d06974ea9.jpg" width="612" height="17" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/ff459b85-e0b4-4746-baee-08f8a866c5a4.jpg" width="252" height="234" alt=""></td>
<td colspan="8" rowspan="2">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/florecer-de-margaritas">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/71ff2c8f-a5c2-4640-8d8a-6a7d9b1ce5ff.jpg" width="353" height="518" border="0" alt=""></a></td>
<td rowspan="4">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/850e2f71-cfeb-4e4c-8b2b-23f56afca360.jpg" width="7" height="599" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="234" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/alegria-de-margarita">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/faf69cb1-f878-4f53-8786-62580a2214e6.jpg" width="252" height="345" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="284" alt=""></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/c256f1f3-896d-4e39-8823-5d96361f79d3.jpg" width="353" height="81" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="61" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/25661d89-4fb7-402d-a7d5-69333c050f54.jpg" width="252" height="20" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/ramo-bombon-grande">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/078da33a-90f6-4b9c-ba95-bfd6930a2888.jpg" width="204" height="264" border="0" alt=""></a></td>
<td colspan="8">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/abanico-de-margaritas">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2ec18a16-da30-4998-98e5-2222e7d50d1a.jpg" width="204" height="264" border="0" alt=""></a></td>
<td colspan="4">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/caja-sorpresa">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/c2f034a3-9c6a-493d-a877-1f5179f198f0.jpg" width="204" height="264" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="264" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/7d0e5d3f-bd0c-42e4-b9c3-d5d3815459b2.jpg" width="3" height="514" alt=""></td>
<td colspan="4">
<a href="https://comemearreglos.com/products/corazon-de-fresa-normal">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/5cbd5ac8-eba3-49e7-ae7c-98455ef803e0.jpg" width="203" height="294" border="0" alt=""></a></td>
<td colspan="8">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/ramo-sorpresa">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f961ee13-9185-416b-ae26-234ff3ff171f.jpg" width="219" height="294" border="0" alt=""></a></td>
<td colspan="3">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/kyara">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/319c70e6-0880-497e-9fd0-42eb101065e9.jpg" width="187" height="294" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="294" alt=""></td>
</tr>
<tr>
<td colspan="15">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/093c362d-72ae-48b9-8d2f-273fcf08b010.jpg" width="609" height="76" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="76" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/565d44c0-88c8-46e8-ac3e-a5266ac185a5.jpg" width="190" height="96" alt=""></td>
<td colspan="8">
<a href="https://comemearreglos.com/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/bec9d089-7f39-46d3-a7b9-7e125b5d1806.jpg" width="205" height="37" border="0" alt=""></a></td>
<td colspan="5" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/614847c7-6dca-42df-8f28-c0fb7d46a342.jpg" width="214" height="96" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/b2498e85-f1a1-4141-84d9-cef2157d7436.jpg" width="205" height="59" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2f9ad99a-57db-4455-bb47-33e8268f8605.jpg" width="183" height="48" alt=""></td>
<td colspan="4">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2748320c-5a61-4321-a0c5-d7ee800ca95a.jpg" width="45" height="41" alt=""></td>
<td colspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/36cb6fe6-5e0d-4129-93ee-ab3cc76a4be6.jpg" width="44" height="41" alt=""></td>
<td>
<a href="https://www.facebook.com/acomeme">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/1524864e-1691-4dc5-b348-f8c2f127a034.jpg" width="44" height="41" border="0" alt=""></a></td>
<td>
<a href="https://www.instagram.com/comemearreglos/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/9fe75a76-b488-4a99-bedd-018154afbbf8.jpg" width="44" height="41" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://es.pinterest.com/arregloscomeme/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/e75c1785-63c1-4d29-8f7b-ca052c56985a.jpg" width="45" height="41" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://www.youtube.com/user/ComemeArreglos">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/1de8b935-c5b4-4ca1-b292-1f94fe5ca573.jpg" width="44" height="41" border="0" alt=""></a></td>
<td colspan="2" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/07cfe6db-5679-4694-b24a-87884f4c1410.jpg" width="160" height="48" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2e95bd34-40d0-4c96-af9b-d81a9f6b60ae.jpg" width="266" height="7" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="3" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="183" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="7" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="11" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="2" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="25" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="21" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="23" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="44" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="44" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="35" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="10" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="17" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="27" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="153" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="7" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to *|EMAIL|*
<br>
<em>why did I get this?</em> unsubscribe from this list update subscription preferences
<br>
*|LIST:ADDRESSLINE|*
<br>
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
#media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></body>
</html>
Hi i sliced the image and coded it, but its in fix size, how can i make this responsive? without using bootstrap can u help me ? and this is the whole image of it, Image you can see the the code below thank you so much
<table id="Table_01" width="1001" height="720" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="images/Info_01.png" width="1000" height="29" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Info_02.png" width="361" height="4" alt=""></td>
<td rowspan="3">
<img src="images/Info_03.png" width="348" height="308" alt=""></td>
<td rowspan="3">
<img src="images/Info_04.png" width="291" height="308" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Info_05.png" width="69" height="289" alt=""></td>
<td>
<img src="images/Info_06.png" width="292" height="289" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="289" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/Info_07.png" width="361" height="332" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Info_08.png" width="348" height="317" alt=""></td>
<td>
<img src="images/Info_09.png" width="291" height="317" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="317" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/Info_10.png" width="1000" height="66" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="66" alt=""></td>
</tr>
</table>
<html>
<head>
<title>website page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" width="50%" height="50%">
<!-- Save for Web Slices (website page.psd) -->
<table id="Table_01" width="1681" height="1051" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td colspan="2">
<img src="images/website-page_01.gif" width="302" height="65" alt=""></td>
<td colspan="6">
<img src="images/website-page_02.gif" width="999" height="65" alt=""></td>
<td colspan="2">
<img src="images/website-page_03.gif" width="379" height="65" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="65" alt=""></td>
</tr>
<tr>
<td>
<img src="images/website-page_04.gif" width="3" height="1" alt=""></td>
<td rowspan="2">
<img src="images/website-page_05.gif" width="299" height="606" alt=""></td>
<td colspan="7" rowspan="2">
<img src="images/website-page_06.gif" width="1050" height="606" alt=""></td>
<td rowspan="2">
<img src="images/website-page_07.gif" width="328" height="606" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/website-page_08.gif" width="3" height="984" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="605" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/website-page_09.gif" width="639" height="379" alt=""></td>
<td rowspan="2">
<img src="images/website-page_10.gif" width="18" height="379" alt=""></td>
<td rowspan="2">
<img src="images/website-page_11.gif" width="342" height="379" alt=""></td>
<td colspan="2">
<img src="images/website-page_12.gif" width="22" height="1" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/website-page_13.gif" width="656" height="379" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/website-page_14.gif" width="21" height="378" alt=""></td>
<td>
<img src="images/website-page_15.gif" width="1" height="378" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="378" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="299" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="340" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="342" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="277" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="328" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
after I finished designing the page using PS and export it as html file, it is ok with 15 inch screen but very big with 13 inch screen.
how can I make it compatible with all screens , with out scrolling .
Solution Update:
I resized the psd file and make it smaller 780*800 , then export it as image/HTML and it is work fine now with all browsers.
You 15 inch display must have higher resolution than the 13 inch display. So its looking bigger. Your webpage should look same on any display having same resolution. You should check your resolution.
Make <img src="images/website-page_02.gif" width="999" height="65" alt=""></td> 's width smaller.
Solution Update: I resized the psd file and make it smaller 780*800 , then export it as image/HTML and it is work fine now with all browsers.
i seem to have a bit of a problem. I've set the table to 100% for the width attribute, but the window stays the same at 1600. How do i go about making the webpage fit into my browser? (Lets say my browser's width is 1024.)
Also, ignore the main.css. It only has a background attribute on it.
Here's my code:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="1200" border="0" align="center" cellpadding="0" cellspacing="0" id="page">
<tr>
<td colspan="17">
<img src="images/index_01.png" width="1600" height="39" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td rowspan="10">
<img src="images/index_02.png" width="57" height="1161" alt=""></td>
<td colspan="5" rowspan="2">
<img src="images/indexpic_01.png" width="668" height="177" alt=""></td>
<td colspan="11">
<img src="images/index_04.png" width="875" height="154" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="154" alt=""></td>
</tr>
<tr>
<td colspan="9" rowspan="2">
<img src="images/index_05.png" width="539" height="44" alt=""></td>
<td rowspan="2">
<img src="images/indexpic_02.png" width="189" height="44" alt=""></td>
<td rowspan="9">
<img src="images/index_07.png" width="147" height="1007" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/index_08.png" width="668" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/index_09.png" width="94" height="963" alt=""></td>
<td colspan="14">
<img src="images/indexpic_11.png" width="1302" height="480" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="480" alt=""></td>
</tr>
<tr>
<td colspan="14">
<img src="images/index_11.png" width="1302" height="24" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_12.png" width="291" height="60" alt=""></td>
<td rowspan="5">
<img src="images/index_13.png" width="46" height="459" alt=""></td>
<td colspan="3">
<img src="images/index_14.png" width="291" height="60" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/index_15.png" width="46" height="411" alt=""></td>
<td colspan="4">
<img src="images/index_16.png" width="291" height="60" alt=""></td>
<td rowspan="5">
<img src="images/index_17.png" width="46" height="459" alt=""></td>
<td colspan="2">
<img src="images/index_18.png" width="291" height="60" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="60" alt=""></td>
</tr>
<tr>
<td>
<img src="images/indexpic_05.png" width="291" height="320" alt=""></td>
<td colspan="3">
<img src="images/indexpic_06.png" width="291" height="320" alt=""></td>
<td colspan="4">
<img src="images/indexpic_07.png" width="291" height="320" alt=""></td>
<td colspan="2">
<img src="images/indexpic_08.png" width="291" height="320" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="320" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_23.png" width="291" height="79" alt=""></td>
<td colspan="3">
<img src="images/index_24.png" width="291" height="31" alt=""></td>
<td colspan="4">
<img src="images/index_25.png" width="291" height="31" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/index_26.png" width="291" height="79" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_27.png" width="78" height="48" alt=""></td>
<td colspan="2">
<img src="images/indexpic_09.png" width="213" height="31" alt=""></td>
<td rowspan="2">
<img src="images/index_29.png" width="29" height="48" alt=""></td>
<td colspan="2">
<img src="images/indexpic_10.png" width="109" height="31" alt=""></td>
<td>
<img src="images/indexpic_12.png" width="17" height="31" alt=""></td>
<td>
<img src="images/indexpic_13.png" width="97" height="31" alt=""></td>
<td rowspan="2">
<img src="images/index_33.png" width="85" height="48" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_34.png" width="213" height="17" alt=""></td>
<td colspan="4">
<img src="images/index_35.png" width="223" height="17" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="57" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="94" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="291" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="78" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="159" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="54" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="97" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="85" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="189" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="147" height="1" alt=""></td>
<td></td>
</tr>
</table>
</body>
</html>
Anyone can help?
Thanks.
All of your image widths are set explicitly, and they add up to 1601px, which would stretch your table (and page) to fit.
Here's my recommendation: Ditch the images and try to do you layout with actual content (and elements other than tables). You can't very easily dynamically size this width as it stands now.
If you are dead set on this (and I cringe at the thought) you can convert the pixel widths of all the images into percentage width, and, while you'll have issues with rounding, you should get a resized layout based on width. But it won't look pretty.
Your row widths adds up to more than 1024, so you wont be able to set it to 100%.
The browser picks up the highest of the width in % and the total width of your <td>s.
Sorry I'm completely new to this.
Ive designed a website in photoshop, and exported it 'for use with web and devices', (HTML/IMAGES). And I now want to be able to write and add content over a specific 'content slice' (images/GSGOPSD_13.gif (900px X 756px))
Here is the code i have from photoshop:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<center>
<body bgcolor="#2c2c2c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (GSGOPSD.psd) -->
<table id="Table_01" width="1051" height="1235" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="images/GSGOPSD_01.gif" width="1050" height="359" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="359" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/GSGOPSD_02.gif" width="92" height="2" alt=""></td>
<td rowspan="3">
<img src="images/GSGOPSD_03.gif" alt="" name="Twittr" width="55" height="62" id="Twittr"></td>
<td colspan="2" rowspan="4">
<img src="images/GSGOPSD_04.gif" width="903" height="119" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/GSGOPSD_05.gif" width="13" height="873" alt=""></td>
<td colspan="2">
<img src="images/GSGOPSD_06.gif" alt="" name="Fbook" width="61" height="59" id="Fbook"></td>
<td colspan="2" rowspan="3">
<img src="images/GSGOPSD_07.gif" width="18" height="117" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/GSGOPSD_08.gif" width="61" height="58" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_09.gif" width="55" height="57" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="57" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_10.gif" alt="" name="thumdown" width="60" height="59" id="thumdown"></td>
<td colspan="2" rowspan="2">
<img src="images/GSGOPSD_11.gif" width="16" height="756" alt=""></td>
<td colspan="3">
<img src="images/GSGOPSD_12.gif" alt="" name="thumup" width="61" height="59" id="thumup"></td>
<td rowspan="2">
<img src="images/GSGOPSD_13.gif" width="900" height="756" alt=""></td>
<td> //------------I WANT TO ADD CONTENT OVER THIS IMAGE.
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_14.gif" width="60" height="697" alt=""></td>
<td colspan="3">
<img src="images/GSGOPSD_15.gif" width="61" height="697" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="697" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="55" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="900" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>
I thought that there would be a tut for this somewhere, and it would be a pretty simple thing, thanks for any help!
try going through this tutorial as I think it is what you are trying to aim for. You can relate it to your .psd along the way
You need to remove the image and then you will be able of insert content in the place where the image was.
BUT I would not recommend use tables for designing your layout and also do not use fixed sizes for widht/height. This should be achieved with CSS