PDA

View Full Version : Help with Table



Citrusgirl
Dec 22nd, 2011, 11:52 PM
I have found the problem. Apparently the cells in the row with <img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_14.jpg" height="47" width="216" alt=""> were all different sizes that were upsetting the format. With some help from a friend I learned that I just needed to place the code with a table, modify the cell sizes, and tadah! problem fixed.

Below I placed the fixed code for reference to those of whom may be experiencing the same issue.

So I've been working on an email blast for a client for the holidays, but I've been running into issues. I'll state them below.

1. FIXEDThe cells are creating spaces randomly through out the piece and I can't seem to figure out why.


2. FIXED The image tag
<img scr="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_16.gif" height="47" width="90" alt="" /> is not appearing in the Live View of the template.

http://i772.photobucket.com/albums/yy1/santosfel5/Picture5-1.png



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Essencia 2011 Holiday Email Blast</title>


<style type="text/css">
img{display:block;}
td img {display: block;line-box-contain: font replaced;}
.mainEmail p {margin:0px;padding:0px;}
.mainEmail a:link, .mainEmail a:visited {color:#ac428d;text-decoration:none;}
a img{outline: none; border-style:none; border:none;}

</style>

</head>

<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" >


<tr><td colspan="9" height="210" width="600"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_01.jpg" height="210" width="600" alt="" /></td>
</tr>

<tr><td colspan="9" height="189" width="600"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_02.gif" height="189" width="600" alt="" /> </td>
</tr>

<tr>



<td height="326" width="92" rowspan="8" valign="top" >
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_03.gif" height="326" width="92" alt="" /></td>


</tr>



<tr>
<td height="28" width="225">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_04.jpg" height="28" width="225" alt="" /></td>

<td height="109" width="23" bgcolor="#f0f8ff" rowspan="2">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_05.gif" height="109" width="23" alt="" /></td>

<td height="109" width="170" bgcolor="#f0f8ff" rowspan="2">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_06.jpg" height="109" width="170" alt="" /></td>

<td height="161" width="90" bgcolor="#f0f8ff" rowspan="3" valign="left">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_07.gif" height="161" width="90" alt="" /></td>



</tr>


<tr>
<td width="225" height="188" bgcolor="#243e19" rowspan="3">
<p style=" font-family:Helvetica; font-size:14px; text-align:left; margin-left:5px; color:#b6f694; margin-right:20px;">
We now have gift certificates
available online. Who wouldn’t
love the gift of beauty and
wellness?<br /><br />

Visit our retail area for more gift
ideas including Bare Minerals
kits, jewelry, and a selection
of fabulous hair and skin
care products.
</p></td>

</tr>

<tr>



<td height="52" width="23" bgcolor="#90ee90">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_09.gif" height="52" width="23" alt="" />
</td>

<td height="52" width="170" bgcolor="#f0f8ff" style="border:0px;">
<a href="https://essenciaspasalon.boomtime.com/lgift" title="" ><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_10.jpg" height="52" width="170" alt="" /></a></td>



</tr>


<tr> <td height="56" width="283" bgcolor="#90ee90" colspan="3">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_11.gif" height="56" width="283" alt="" />
</td>
</tr>

<tr>

<td height="28" width="508" bgcolor="#90ee90" colspan="5">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_12.gif" height="28" width="508" alt="" />
</td>

</tr>


<tr>

<td height="34" width="508" bgcolor="#90ee90" colspan="5">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_13.jpg" height="34" width="508" alt="" />
</td>

</tr>


<tr>

<td height="47" width="216" bgcolor="#90ee90" >
<a href="http://www.essencia-spa.com" title=""><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_14.jpg" height="47" width="216" alt="" /></a>
</td>

<td height="47" width="202" bgcolor="#90ee90" valign="top" colspan="3" >
<a href="http://www.facebook.com/EssenciaSpa" title=""><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_15.jpg" height="47" width="202" alt="" /></a>
</td>

<td height="47" width="90" bgcolor="#90ee90">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_16.gif" height="47" width="90" alt="" />
</td>

</tr>

<tr>

<td height="39" width="600" bgcolor="#90ee90" colspan="5">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_17.gif" height="39" width="600" alt="" />
</td>

</tr>

<tr>

<td height="101" width="600" bgcolor="#90ee90" colspan="5">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_18.gif" height="101" width="600" alt="" />
</td>

</tr>

</table>
</body>
</html>





FIXED CODE


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Essencia 2011 Holiday Email Blast</title>


<style type="text/css">
img{display:block;}
td img {display: block;line-box-contain: font replaced;}
.mainEmail p {margin:0px;padding:0px;}
.mainEmail a:link, .mainEmail a:visited {color:#ac428d;text-decoration:none;}
a img{outline: none; border-style:none; border:none;}

</style>

</head>

<body>
<table width="600" cellpadding="0" cellspacing="0" border="0">


<tr>
<td colspan="9" height="210" width="600"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_01.jpg" height="210" width="600" alt=""></td>
</tr>

<tr>
<td colspan="9" height="189" width="600"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_02.gif" height="189" width="600" alt=""> </td>
</tr>

<tr>
<td height="326" width="92" rowspan="8" valign="top"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_03.gif" height="326" width="92" alt=""></td>
</tr>



<tr>
<td height="28" width="225"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_04.jpg" height="28" width="225" alt=""></td>
<td height="109" width="23" bgcolor="#f0f8ff" rowspan="2"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_05.gif" height="109" width="23" alt=""></td>
<td height="109" width="170" bgcolor="#f0f8ff" rowspan="2"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_06.jpg" height="109" width="170" alt=""></td>
<td height="161" width="90" bgcolor="#f0f8ff" rowspan="3"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_07.gif" height="161" width="90" alt=""></td>
</tr>


<tr>
<td width="225" height="188" bgcolor="#243e19" rowspan="3">
<p style=" font-family:Helvetica; font-size:14px; text-align:left; margin-left:5px; color:#b6f694; margin-right:20px;">
We now have gift certificates
available online. Who wouldn&rsquo;t
love the gift of beauty and
wellness?<br><br>

Visit our retail area for more gift
ideas including Bare Minerals
kits, jewelry, and a selection
of fabulous hair and skin
care products.
</p></td>

</tr>

<tr>
<td height="52" width="23" bgcolor="#90ee90"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_09.gif" height="52" width="23" alt="">
</td>
<td height="52" width="170" bgcolor="#f0f8ff" style="border:0px;"><a href="https://essenciaspasalon.boomtime.com/lgift" title=""><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_10.jpg" height="52" width="170" alt=""></a></td>
</tr>


<tr>
<td height="56" width="283" bgcolor="#90ee90" colspan="3">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_11.gif" height="56" width="283" alt="">
</td>
</tr>

<tr>
<td height="28" width="508" bgcolor="#90ee90" colspan="4">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_12.gif" height="28" width="508" alt="">
</td>
</tr>
<tr>
<td height="34" width="508" bgcolor="#90ee90" colspan="4">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_13.jpg" height="34" width="508" alt="">
</td>
</tr>
<tr>
<td height="47" width="508" bgcolor="#90ee90" colspan="4">
<table width="508" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="47" width="216" colspan="3">
<a href="http://www.essencia-spa.com" title=""><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_14.jpg" height="47" width="216" alt=""></a>
</td>
<td height="47" width="202" bgcolor="#90ee90">
<a href="http://www.facebook.com/EssenciaSpa" title=""><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_15.jpg" height="47" width="202" alt=""></a>
</td>
<td height="47" width="90" bgcolor="#90ee90">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_16.gif" height="47" width="90" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="39" width="600" bgcolor="#90ee90" colspan="5">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_17.gif" height="39" width="600" alt="">
</td>
</tr>
<tr>
<td height="101" width="600" bgcolor="#90ee90" colspan="5">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_18.gif" height="101" width="600" alt="">
</td>
</tr>

</table>
</body>
</html>

Kevin_M_Schafer
Dec 23rd, 2011, 12:25 AM
Hi Citrusgirl,

I think a couple of your images are too large for the cells in which you are trying to place them: 2012_6 & 2012_10 (the Essentia logo and the Click Here image). Try reducing the width and heights of your images -- one at a time -- and notice when your overall template/image goes back together.

As far as an image not showing, check your url. Take the url address of the image and paste it in your browser and hit enter. If it doesn't show up, you may have the address wrong.

You're dealing with a table template, and it's designed -- overall -- to stay intact, providing nothing upsets its dimensions. An oversized image or too much content/text will expand the table.

I hope this helps somewhat.

MrTaz
Dec 23rd, 2011, 04:44 AM
Hi Citrusgirl,

So your issue is with the cell sizes in the same columns. Let's break it down.


<tr>
<td height="28" width="225"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_04.jpg" height="28" width="225" alt="" /></td>
<td height="109" width="23" bgcolor="#f0f8ff" rowspan="2"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_05.gif" height="109" width="23" alt="" /></td>
<td height="109" width="170" bgcolor="#f0f8ff" rowspan="2"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_06.jpg" height="109" width="170" alt="" /></td>
<td height="161" width="90" bgcolor="#f0f8ff" rowspan="3"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_07.gif" height="161" width="90" alt="" /></td>
</tr>

In this section your first cell has a width of 225, you then have a spacer cell that has a width of 23, next is the logo with a width of 170 and finally the end of image with a width of 90. These all add up to 508, which matches to the rest of the table rows from here down.

The problem is this section further down the image:

<tr>
<td height="47" width="216" bgcolor="#90ee90" >
<a href="http://www.essencia-spa.com" title=""><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_14.jpg" height="47" width="216" alt="" /></a>
</td>
<td height="47" width="202" bgcolor="#90ee90" valign="top" colspan="3" >
<a href="http://www.facebook.com/EssenciaSpa" title=""><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_15.jpg" height="47" width="202" alt="" /></a>
</td>
<td height="47" width="90" bgcolor="#90ee90">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_16.gif" height="47" width="90" alt="" />
</td>
</tr>

The first image has a width of 216, the next image has a width of 202 and the final image has a width of 90.

If we compare the 2 rows, we can see that we have only one colspan that we can play with. If we put it in the first cell the cell will grow to 225 + 23, which is way to large for the image that is here. If we add it to the second cell it will be 23+170 which is too small for the image. So we could cut the images up to make them fit or stretch the second image to fit, but it will probably look grainy and messy.

My perfered way of handling this is to simply nest a table into the row with the issue. So make the first cell have a colspan of 3 with a width of 225+23+170. Then put a nested table with the same width and border 0 etc. In the nested table make each cell the correct value (216 for the first cell and 202 for the second cell).

So that almost works, but there is one more problem. There is a spacer row in the between our 2 problem rows. Here is that code:

<tr>
<td height="56" width="283" bgcolor="#90ee90" colspan="3">
<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_11.gif" height="56" width="283" alt="" />
</td>
</tr>

The issue here is that this cell has a width of 283 and spans across 3 cells. This would be fine, but the last 2 images in our nested table row do not add up to the correct amounts, the easiest solution here is to simply pull in the last cell and put that in the nested table too. So expand the cellspan for the nested table to 4 and increase the size of the table to 216+202+90 (or 508). Here is the updated code, and it should be fine:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> Essencia 2011 Holiday Email Blast</title>





<style type="text/css">

img{display:block;}

td img {display: block;line-box-contain: font replaced;}

.mainEmail p {margin:0px;padding:0px;}

.mainEmail a:link, .mainEmail a:visited {color:#ac428d;text-decoration:none;}

a img{outline: none; border-style:none; border:none;}



</style>



</head>



<body>

<table width="600" cellpadding="0" cellspacing="0" border="0" >





<tr>

<td colspan="9" height="210" width="600"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_01.jpg" height="210" width="600" alt="" /></td>

</tr>



<tr>

<td colspan="9" height="189" width="600"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_02.gif" height="189" width="600" alt="" /> </td>

</tr>



<tr>

<td height="326" width="92" rowspan="8" valign="top"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_03.gif" height="326" width="92" alt="" /></td>

</tr>







<tr>

<td height="28" width="225"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_04.jpg" height="28" width="225" alt="" /></td>

<td height="109" width="23" bgcolor="#f0f8ff" rowspan="2"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_05.gif" height="109" width="23" alt="" /></td>

<td height="109" width="170" bgcolor="#f0f8ff" rowspan="2"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_06.jpg" height="109" width="170" alt="" /></td>

<td height="161" width="90" bgcolor="#f0f8ff" rowspan="3"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_07.gif" height="161" width="90" alt="" /></td>

</tr>





<tr>

<td width="225" height="188" bgcolor="#243e19" rowspan="3">

<p style=" font-family:Helvetica; font-size:14px; text-align:left; margin-left:5px; color:#b6f694; margin-right:20px;">

We now have gift certificates

available online. Who wouldn�t

love the gift of beauty and

wellness?<br /><br />



Visit our retail area for more gift

ideas including Bare Minerals

kits, jewelry, and a selection

of fabulous hair and skin

care products.

</p></td>



</tr>



<tr>

<td height="52" width="23" bgcolor="#90ee90"><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_09.gif" height="52" width="23" alt="" />

</td>

<td height="52" width="170" bgcolor="#f0f8ff" style="border:0px;"><a href="https://essenciaspasalon.boomtime.com/lgift" title="" ><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_10.jpg" height="52" width="170" alt="" /></a></td>

</tr>





<tr>

<td height="56" width="283" bgcolor="#90ee90" colspan="3">

<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_11.gif" height="56" width="283" alt="" />

</td>

</tr>



<tr>

<td height="28" width="508" bgcolor="#90ee90" colspan="4">

<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_12.gif" height="28" width="508" alt="" />

</td>

</tr>

<tr>

<td height="34" width="508" bgcolor="#90ee90" colspan="4">

<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_13.jpg" height="34" width="508" alt="" />

</td>

</tr>

<tr>

<td height="47" width="508" bgcolor="#90ee90" colspan="4">

<table width="508" cellpadding="0" cellspacing="0" border="0">

<tr>

<td height="47" width="216" colspan="3">

<a href="http://www.essencia-spa.com" title=""><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_14.jpg" height="47" width="216" alt="" /></a>

</td>

<td height="47" width="202" bgcolor="#90ee90">

<a href="http://www.facebook.com/EssenciaSpa" title=""><img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_15.jpg" height="47" width="202" alt="" /></a>

</td>

<td height="47" width="90" bgcolor="#90ee90">

<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_16.gif" height="47" width="90" alt="" />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td height="39" width="600" bgcolor="#90ee90" colspan="5">

<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_17.gif" height="39" width="600" alt="" />

</td>

</tr>

<tr>

<td height="101" width="600" bgcolor="#90ee90" colspan="5">

<img src="http://i772.photobucket.com/albums/yy1/santosfel5/christmas_2012_18.gif" height="101" width="600" alt="" />

</td>

</tr>



</table>

</body>

</html>