I'm developing a newsletter for Mailchimp with below HTML structure for one of the block -
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td valign="top" class="complete-block">
<a href="#" target="_blank">
<table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable>
<tr>
<td align="center" valign="middle" class="templateButtonContent"> Amazon </td>
</tr>
</table>
</a>
<a href="#" target="_blank">
<table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable>
<tr>
<td align="center" valign="middle" class="templateButtonContent"> Apple iBooks </td>
</tr>
</table>
</a>
<a href="#" target="_blank">
<table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable>
<tr>
<td align="center" valign="middle" class="templateButtonContent"> Nook </td>
</tr>
</table>
</a>
<a href="#" target="_blank">
<table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable>
<tr>
<td align="center" valign="middle" class="templateButtonContent"> Google </td>
</tr>
</table>
</a>
<a href="#" target="_blank">
<table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable>
<tr>
<td align="center" valign="middle" class="templateButtonContent"> Kobo </td>
</tr>
</table>
</a>
<a href="#" target="_blank">
<table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable>
<tr>
<td align="center" valign="middle" class="templateButtonContent"> Sony </td>
</tr>
</table>
</a>
</td>
</tr>
The problem is that when I tested the template on Outlook, I found that my buttons [Amazon, google, nook etc] don't have LINK.
What am I missing? Can't we wrap a table in anchor tag?
HTML emails still lack the features that browsers makeup for on websites, it's like developer in HTML for IE 5. The anchor tag will not work around tables and sometimes will not even work around divs, however obviously webpages do not have these problems. This is due to the standards not really being recognised by mail clients as they are in browsers.
Try wrapping the content in the cells in just the anchor tag, around your button:
<table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton displayinline" mc:hideable>
<tr>
<td align="center" valign="middle" class="templateButtonContent">
Sony
</td>
</tr>
</table>
I know it's not ideal, however it is a way around this problem.
Related
My code:
<td bgcolor="#0096d6">
<table cellspacing="0" cellpadding="0" border="0" width="393" align="center">
<tr>
<td>
<img src="images/x.gif" width="30" height="1" style="display:block;"/>
</td>
<td>
<font style="font-family:'HP Simplified';font-size:28px;color:#ffffff;font-weight:bold;">New Platforms to Elevate ProTrain to the next level in February</font>
</td>
<!--space problem-->
<td>
<img src="images/x.gif" width="30" height="1" style="display:block;"/>
</td>
</tr>
</table>
</td>
How can anybody help to solve this? Here 1 px space is coming after the end of the text <td> in outlook 2016 only.
I wish to scrape multiple product names from a single page while using Scrapy
<!-- body_text //-->
<td width="601" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td class="pageHeading">Pool (Pocket Billiards) Table</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td class="main">A Victoria table is more than mere wood and slate. By paying attention to the details - the hidden differences - Victoria tables have become known name as masterpieces of original design and craftmanship, and most prestigious name in billiards.<br><br>
These tables, available in two sizes 9’ X 4.5’ and 8’ X 4’, are made of frames with selected good quality solid wood and finely crafted rose wood legs with Mahagony polish.<br><br>
Slate Beds used are either Indian Bangalore Black Slate or Imported Slate. Slates are covered with worsted wool cloth optionally from Jupiter (China) or Strachan (West of England cloth, U.K.) to have proper speed, accuracy and responsiveness of the table to spin. Chrome nuts and adjusters are used for leveling. It is surrounded with standard imported vulcanized 'L' shaped or 'V' shaped rubber cushions or Northern Cushions (Made in England) to cause billiard balls to rebound while minimizing the lose of kinetic energy.</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs20b"></a>VS-20B</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>Size: 9‘ X 4.5‘</strong></li><li>Rose Wood Legs</li><li>Mahgony Polish</li><li>S.B. Frame</li><li><strong>Bangalore Slate</strong></li><li>Standard Accessories</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-20b.jpg" alt="VS-20B" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs20b"></a>VS-20C</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>Size: 8‘ X 4‘</strong></li><li>Rose Wood Legs</li><li>Mahgony Polish</li><li>S.B. Frame</li><li><strong>Bangalore Slate</strong></li><li>Standard Accessories</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-20c.jpg" alt="VS-20C" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs23b"></a>VS-23B</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>Size: 9‘ X 4.5‘</strong></li><li>Rose Wood Legs</li><li>Mahgony Polish</li><li>S.A.L. Frame</li><li><strong>Imported Slate</strong></li><li>Standard Accessories</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-23b.jpg" alt="VS-23B" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs23b"></a>VS-23C</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>Size: 8‘ X 4‘</strong></li><li>Rose Wood Legs</li><li>Mahgony Polish</li><li>S.A.L. Frame</li><li><strong>Imported Slate</strong></li><li>Standard Accessories</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-23c.jpg" alt="VS-23C" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs9"></a>VS-9</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>Size: 9‘ X 4.5‘</strong></li><li>Auto Ball Return System</li><li>Pro Speed Cloth</li><li>American Pocket Size</li><li>Standard Accessories</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-9.jpg" alt="VS-9" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs7"></a>VS-7</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>PLAYING AREA : 88" X 44"</strong></li><li><strong>OVERALL SIZE : 98"L X 54" W X 31" H</strong></li><li>Solid oak for top/brand rails, Dark cherry finish</li><li>Rams head solid rubber wood with # 6 leather drop pocket. Easy assembly</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-7.jpg" alt="VS-7" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs8"></a>VS-8/Light Oak</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>POOL TABLE : 8‘ X 4‘</strong></li><li><strong>PLAYING AREA : 88" X 44"</strong></li><li><strong>OVERALL SIZE : 98" X 54"W X 31"H</strong></li><li>Solid oak for top/brand rails, Light oak finish</li><li>Rams head solid rubber wood with # 6 leather drop pocket, Easy assembly</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-8.jpg" alt="VS-8/Light Oak" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs12"></a>VS-12</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>POOL TABLE : 8‘ X 4‘</strong></li><li><strong>PLAYING AREA : 88" X 44"</strong></li><li><strong>OVERALL SIZE : 99-3/4"L X 55 - 3/4" W X 31" H</strong></li><li>Black laminate, pedestal legs, with drop pocket, Steel frame Easy assembly. Accessories included.</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-12.jpg" alt="VS-12" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs10"></a>VS-10</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>POOL TABLE : 8‘ X 4‘</strong></li><li><strong>PLAYING AREA : 88" X 44"</strong></li><li><strong>OVERALL SIZE : 98" L X 54"W X 31"H</strong></li><li>Solid oak for top/brand rails, oak finish</li><li>Rams head solid rubber wood with # 6 leather drop pocket, Easy assembly</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-10.jpg" alt="VS-10" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs11"></a>VS-11</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>POOL TABLE : 8‘ X 4‘</strong></li><li><strong>PLAYING AREA : 88" X 44"</strong></li><li><strong>OVERALL SIZE : 100" X 56"</strong></li><li>Solid wood for top/brand rails</li><li>Mahogany finish</li><li>Rams head solid rubber with # 6 leather drop pocket</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-11.jpg" alt="VS-11" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0" class="product_box">
<tr>
<td width="50%" valign="top" class="product_name" colspan="2"><strong><a name="vs13"></a>VS-13</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" >
<tr>
<td width="60%" valign="top" class="product_text"><ul><li><strong>POOL TABLE : 8‘ X 4‘</strong></li><li><strong>PLAYING AREA : 88" X 44"</strong></li><li><strong>OVERALL SIZE : 100" X 56"</strong></li><li>Solid wood for top/brand rails,</li><li>Dark cherry finish</li><li>Rams head solid rubber wood<br />
<br />
with # 6 leather drop pocket</li></ul></td>
<td width="40%" align="center"><img src="images/products/vs-13.jpg" alt="VS-13" border="0" width="250px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
</tr>
<tr>
<td>
<table cellpadding="4" cellspacing="0" width="100%" border="0">
<tr>
<td width="50%" valign="top" class="product_name1" colspan="2"><strong>Standard Accessories for Pool</strong></td>
</tr>
</table>
<table cellpadding="4" cellspacing="4" width="100%" border="0" class="product_box1">
<tr>
<td width="50%" valign="top" class="product_text">
<ul>
<li>Aramith Pool Ball 2.1/4" or 2.1/16"</li>
<li>Table Brush</li>
<li>60" Rest Stick C/W Brass Cross Head Rest</li>
<li>Wall Cue Rack</li>
</ul></td>
<td width="50%" valign="top" class="product_text">
<ul>
<li>Plastic Triangle</li>
<li>Triangle Chalk X 12 Pcs.</li>
<li>Pool House Cue X 4 Pcs.</li>
<li>Table Cover</li>
<li>Round Type Lamp Shade X 2 Pcs.</li>
</ul></td>
</tr>
</table>
</td>
</tr>
</table></td>
<!-- body_text_eof //-->
<td width="45" valign="top">
<table border="0" width="45" cellspacing="0" cellpadding="0">
<!-- right_navigation //-->
As you can see from the code, the are fields which I want to scrape_ which are at the xpath: td[#class='product_name']/strong/a/#name
I also need to pull the images as well from this xpath: rd[#align='center']/a/img/#src
I'm exporting my data in CSV and Currently my scraper stores all the product names in one cell. I'm trying to make it such that it stores each product name and the image URL individually in a single cell in my CSV.
I tried using a loop for this but can't make it to work
My Code:
def parse(self, response):
hxs = HtmlXPathSelector(response)
titles = hxs.select("//head")
items = []
item = item()
for i in range(0,5):
item ["productname"] = titles.select("//td[#class='product_name'][i]/strong").extract()
item ["imgurl"] = titles.select("//td[#align='center'][i]/a/img/#src").extract()
items.append(item)
return(items)
names = hxs.xpath('//td[#class="product_name"]/strong/text()')
imageurls = hxs.xpath('//tr/td[#align="center"]/a/img/#src')
for name, url in zip(names, imageurls):
item["productname"] = name
item["imgurl"] = url
yield item
Simplest way of doing it since the order of the names and image urls would correspond with each other when they are extracted.
You don't need to select the elements one by one (by changing the i index in a loop as you did). The path expression below:
//td[#class='product_name']/strong/a/#name
already returns a node-set containing two items. You just have to loop over the elements that were returned to extract each attribute string.
As for the second expression:
//td[#align='center']/a/img/#src
there is only one match and you could extract the string directly.
I wish to parse through a epinions.com page to gather some statistics about a few companies. Epinions have almost no id's or classes, so it's quite difficult to parse the site.
I need to loop through all <tr bgcolor="white"> objects. I have put in 2 samples of this.
From the sample 1, I need to extract:
The alt on this line:
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
The href this line:
CHUMBO ROCKS!
The author at this line:
<span class="rgr">by whitey436, Jan 18, 2006
Here is sample 1:
<tr bgcolor="white">
<td style="padding:10px 5px" align="right" valign="top" height="100%">
<table cellspacing="4" cellpadding="0" border="0" width=100% height="100%">
<tr valign="top">
<td class="rkr" nowrap>Overall Rating:</td>
<td width=80>
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
</td>
</tr>
<span class="rgr">
<tr>
<td class="rgr" nowrap>Ease of Ordering:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
<tr>
<td class="rgr" nowrap>Customer Service:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
<tr>
<td class="rgr" nowrap>Selection:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
<tr>
<td class="rgr" nowrap>On-Time Delivery:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
</span>
<tr valign="bottom" height="100%">
<td class="rkb" colspan="2">
<div align="center"> </div>
<div align="center"> </div>
</td>
</tr>
</table>
</td>
<td style="padding:10px;" colspan=2 width="100%" align="left" valign="top">
<h2 style="font-family:arial,helvetica,sans-serif; font-size:87%; color:#000000; font-weight:bold; margin-bottom:0px;">
CHUMBO ROCKS!
</h2>
<span style="line-height:110%">
<span class="rgr">by whitey436, Jan 18, 2006
Rated a <span style="color:#000;">Very Helpful Review</span> by the Epinions community</span>
</span>
<span class="rkr">
<div style="padding:5px 0px"> Its just this simple, I tried buying this receiver from another online supplier who had the lowest price only to find they didnt have any of these units and they wanted to sell me extra warranty then tried to sell a different model in stock from Yamaha ...</div>
<b>
Read the full review
</b>
</span>
</td>
</tr>
From the sample 2, I need to extract:
The alt on this line:
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
The href on this line:
Read more
The author at this line:
<span class="rgr">by whitey436, Jan 18, 2006
Rated a <span style="color:#000;">Very Helpful Review</span> by the Epinions community</span>
Here is sample 2:
<tr bgcolor="white">
<td style="padding:10px 5px" align="right" valign="top">
<table cellspacing="4" cellpadding="0" border="0" width=100%>
<tr>
<td class="rkr" nowrap>Overall Rating:</td>
<td width=80>
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
</td>
</tr>
<tr>
<td class='rgr' > </td>
<td>
<img src='http://img.epinions.com/images/epi_images/spacer.gif' width=80 height=11>
</td>
</tr>
</table>
</td>
<td style="padding:10px;" colspan=2 width="100%" align="left" valign="top">
<span class="rgr">Mar 27, 2006 <br>(Not Yet Rated)</span><br>
<span class="rkr"> Very helpful in giving me the information I needed to make a purchase.<br><b>
Read more
</b></span>
</td>
</tr>
Here is some Nokogiri code to print out the information you want using XPath:
xml.xpath("//tr[#bgcolor='white']").each do |el|
# Get the "Overall rating" tr block from the first td and get (first) img alt
puts el.at_xpath("td[1]//tr[td/text()='Overall Rating:']//img/#alt")
# Get the first link from the second td that contains "content" and get href
puts el.at_xpath("td[2]//a[contains(#href, '/content')][1]/#href")
# Get the (first) link that has an itemprop author value and get the href
puts el.at_xpath("td[2]//a[#itemprop='author']/#href")
end
use Nokogiri will be ok.
to get alt, get back all the image tags and keep the img tag with the specified src
imgs = doc.css('img[src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif"]')
to get back the href
links = doc.css('a[href*="/content"]')
to get back the author
links = doc.css('a[href*="/user"]')
I am trying to create a two column email flyer but I'm having trouble with the coding as Outlook hates CSS.
I'm using tables to keep it as simple as possible but I want two separate tables on the left and the right so I can add data into it as I wish.
I tried using float left and right on the two tables but Outlook ignores this style.
I know the two grey tables at the bottom are each in their own separate "holder" tables but this is so I can duplicate the grey "data" tables for when I add new articles.
<table class="all" width="auto" height="auto" border="0" cellspacing="0"><tr><td height="504">
<table width="750" height="140" border="0" cellspacing="0">
<tr>
<td width="200" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="345" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
</tr>
<tr>
<td width="200" valign="bottom" bgcolor="#E6E6E6"> </td>
<td align="center" valign="bottom" bgcolor="#E6E6E6"><font color="#111111" face="Arial Narrow" size="+2">DECEMBER NEWSLETTER</font></td>
<td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"><font size="2"><strong>#4 - <span class="orange">04.12.13</span></strong></font></td>
<td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75" height="50" bgcolor="#E6E6E6" scope="row"> </td>
<td width="600" rowspan="2" scope="row"><img src="http://placehold.it/600x200"/></td>
<td width="75" bgcolor="#E6E6E6" scope="row"> </td>
</tr>
<tr>
<td width="75" height="81" scope="row"> </td>
<td scope="row"> </td>
</tr>
</table>
<table class="holder" width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" scope="row">
<table class="inlinetableleft" width="360">
<tr>
<td width="371" align="left">
<!------------LEFT COLUMN------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<th height="103" colspan="4" align="left" valign="middle" bgcolor="#CCCCCC" scope="row"> </th>
</tr>
</table>
<!--------------LEFT COLUMN END------------->
</td>
</tr>
</table>
<table class="inlinetableright" width="360">
<tr>
<td align="left">
<!------------RIGHT COLUMN------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="106" align="left" bgcolor="#CCCCCC" scope="row"> </td>
</tr>
</table>
<!-----------RIGHT COLUMN END-------------->
</td></tr>
</table>
</td>
</tr>
</table>
Here is a fiddle of my newsletter so far, it's the bottom two grey tables that I want to be side by side.
Fiddle
For HTML emails, nested tables are your friend :)
JSFiddle
Note: the border around the table is just to show you where the tables are.
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2">
header content here
</td>
</tr>
<tr>
<td width="300">
<table border="0" width="300" cellpadding="1" cellspacing="0" align="left">
<tr>
<td>Left Content</td>
</tr>
</table>
</td>
<td width="300">
<table border="0" width="300" cellpadding="1" cellspacing="0" align="left">
<tr>
<td>Right content</td>
</tr>
</table>
</td>
</tr>
</table>
I'm building a mobile friendly email and the main images do not load when the email initially loads (the small facebook and twitter icons in the footer do load). I say, loading rather than displaying bc there aren't any red x's on the screen or any indication there there should be images there. However, if I go back to the inbox and click on the email to view it again, the images load just fine. I tested this on the iPhone and Android in the web email clients, yahoo and gmail, and it's happening in all those instances. I've received mobile emails in the past where the images load just fine, so it's got to be my code. I've been having a heard time finding the answer to this, so I hope someone here is familiar with this issue and can help me out. Let me know if you have questions. I appreciate the help, very much.
Note: I discovered it's also not displaying the images in Safari but only on first load. When the page is reloaded - just like in the mobile browsers, it loads the images.
Here's a link from Campaign Monitor:
http://testclient.createsend4.com/t/ViewEmail/y/8B8E5FE792737812
Here's the code:
<html>
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<title></title>
<style type="text/css">
<!--
img {display:block; border:0;}
body {
background-color: #ffffff;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
margin:0;
padding:0;
} -->
</style>
</head>
<body bgcolor="#ffffff" style="width:100%;height:100%;">
<table cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#ffffff" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr><td>
<!-- HEADER -->
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" height="37" align="center" bgcolor="#ffffff" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr>
<td valign="bottom" style="text-align:center; color:#5b5a5a; font-size:11px;">
Email not displaying correctly? <webversion style="color:#5b5a5a; text-decoration:underline;">View it in your browser</webversion>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" height="34" align="center" bgcolor="#ffffff" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr>
<td style="color:#939497; text-align:center;"><strong>Shop Online</strong> | <strong>Find A Store</strong> | <strong>Forward To A Friend</strong>
</td>
</tr>
</table>
</div>
<table cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#000000" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr><td>
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_06.png" width="100%" style="display:block;border:0;color:#ffffff;" alt="Beyond RTO Home Furnishings & Appliances For Less." border="0" /></td>
</tr>
</table>
</div>
</td></tr>
</table>
<!-- PROMO -->
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_07.jpg" border="0" width="100%" style="display:block;" alt="Celebrate Christmas in July - Register to Win $1000 Shopping Spree!"/></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_08.jpg" border="0" width="100%" style="display:block;" alt="Plus enjoy this bonus offer and SAVE!"/></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_09.jpg" width="100%" border="0" style="display:block;" alt="Reveal Your Deal with Beyond RTO!"/></td>
</tr>
</table>
</div>
<!-- FOOTER -->
<table cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#000000" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr><td>
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_10.png" width="100%" border="0" style="display:block;" alt="Beyond RTO Home Furnishings & Appliances For Less."/></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" height="21" align="center" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td align="center" valign="top" style="font-size:13px;color:#939497;"><strong>Shop Online</strong> | <strong>Find A Store</strong> | <strong>Forward To A Friend</strong></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="center" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_13.png" width="40" height="44" border="0" style="display:block;"/></td>
<td><img src="images/2959_BYRTO_July_emailer_14.png" width="36" height="44" border="0" style="display:block;"/></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" height="50" align="center" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td align="center" valign="top" style="font-size:10px;color:#bebebe;line-height:14px;">
© Copyright 2013 Baber's. All Rights Reserved.<br/>
You are currently subscribed as [email]. Click here to <unsubscribe style="color:#82c13a;text-decoration:underline;">unsubscribe</unsubscribe>.</td>
</tr>
</table>
</div>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
I finally figured this out. Once I discovered this was also happening in Safari, it was easier to trouble shoot. I figured out that some of the tables did not have a width defined and Safari requires a width value and so do mobile email clients apparently. I normally have widths on all my tables, so didn't realize that was the culprit this time.