I have received a html block of code (email template so lots of tables) that I have to work with that has no spacing or indentation aand is essentially all on one line. It's a nightmare to try and edit it.
Does anyone know of any online tools or applications that you can copy and paste code into where it organises it for you?
olor="#e5e5e5" alink="#000000" class="yfix" leftmargin="0" rightmargin="0" topmargin="0"> <!--//--> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="100%" valign="top" bgcolor="#e5e5e5" align="center"> <table width="698" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="5"><img hspace="0" height="1" width="5" src="http://info.page7media.ie/img/trans.gif" /></td> <td align="left"> <table width="688" cellspacing="0" cellpadding="0" border="0"> <tr> <td height="10"><a name="top_of_mail"></a></td> </tr> <tr> <td align="center"><font face="Arial, Helvetica, sans-serif" size="2" color="red" style="font-size: 12px; line-height: 17px;">If you are unable to see this message, click <a target="_blank" href="http://info.page7media.ie/u/gm.php?UID=JJ20yz3nz2&ID=279438389_478447_36061" style="text-decoration: underline;"><font face="Arial, Helvetica, sans-seri
Try Dirty Markup, it cleaned this markup up nicely
http://www.dirtymarkup.com/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
olor="#e5e5e5" alink="#000000" class="yfix" leftmargin="0" rightmargin="0"
topmargin="0"> <!--//-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="background-color: #E5E5E5" valign="top"
width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="698">
<tr>
<td width="5"><img height="1" hspace="0" src=
"http://info.page7media.ie/img/trans.gif" width=
"5"></td>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0"
width="688">
<tr>
<td height="10">
<a id="top_of_mail" name=
"top_of_mail"></a>
</td>
</tr>
<tr>
<td align="center">
If you are unable to see this message,
click <a href=
"http://info.page7media.ie/u/gm.php?UID=JJ20yz3nz2&ID=279438389_478447_36061"
style="text-decoration: underline;"
target="_blank"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You're looking for something called a "beautifier".
Here's an online beautifier that supports HTML: http://ctrlq.org/beautifier/
I beautified it for you but noticed the beginning of your code sample is missing.
olor="#e5e5e5" alink="#000000" class="yfix" leftmargin="0" rightmargin="0" topmargin="0">
<!--//-->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" valign="top" bgcolor="#e5e5e5" align="center">
<table width="698" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="5">
<img hspace="0" height="1" width="5" src="http://info.page7media.ie/img/trans.gif" />
</td>
<td align="left">
<table width="688" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="10">
<a name="top_of_mail">
</a>
</td>
</tr>
<tr>
<td align="center">
<font face="Arial, Helvetica, sans-serif" size="2" color="red" style="font-size: 12px; line-height: 17px;">
If you are unable to see this message, click
<a target="_blank" href="http://info.page7media.ie/u/gm.php?UID=JJ20yz3nz2&ID=279438389_478447_36061" style="text-decoration: underline;">
<font face="Arial, Helvetica, sans-seri
Use an online code formatter.
http://ctrlq.org/beautifier/
I grabbed the first one that looked interesting. There are others out there.
http://bit.ly/1Eqgeqr
Related
I am setting up an email newsletter template however the images at the top as well as the video link at the bottom are not aligned correctly.
When I preview the template/ code in sublime text as well as the email composition page the images look fine but once the email is sent the images bleed out the right-hand side. Help!
body {
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_white a {
color: #ffffff !important;
text-decoration: none !important;
}
.em_black a {
color: #000000;
text-decoration: none;
}
.em_green a {
color: #737f48;
text-decoration: none;
}
<!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" />
<meta content="telephone=no" name="format-detection" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Our Preschool Program</title>
</head>
<body style="margin:0px; padding:0px;" bgcolor="#ffffff">
<table width="100%" border="0" align="center" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<!-- Emailer Starts Here-->
<td align="center" valign="top"><table style="table-layout:fixed;" width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_top.jpg" style="background-repeat:no-repeat;" width="313" height="451" valign="top" bgcolor="#4c6211"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:313px;height:451px;">
<v:fill type="tile" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_top.jpg" color="#4c6211"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="313" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="313" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="106"> </td>
<td valign="top" align="center" width="105"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/logo_header.png" width="105" height="105" alt="PRIMROSE SCHOOL" style="display:block; font-family:Arial, sans-serif; font-size:15px; line-height:22px; color:#ffffff; font-weight:bold;" border="0"/></td>
<td width="102"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="61"> </td>
</tr>
<tr>
<td class="em_white" valign="top" align="center" style="font-family:UnitOT, sans-serif; font-size:43px; line-height:50px; color:#ffffff;">Our <br />Preschool<br/>Program</td>
</tr>
<tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
<td valign="top" align="left"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/banner.jpg" width="487" height="451" alt="Our preschool Program" style="display:block;" border="0"/></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="28" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="36" bgcolor="#f2f2f2"> </td>
<td valign="top" align="center"><table width="728" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="18" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="728" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18"> </td>
<td width="1" bgcolor="#737f48"></td>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"> </td>
<td valign="top" align="center"><table width="645" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td class="em_black" valign="top" align="left" style="font-family:Arial, sans-serif; font-size:12px; line-height:15px; color:#000000;"><TemplateField Name="Message" Width="645" MinHeight="30" MaxHeight="1000" Height="30">Thank you for inquiring about the [{CenterName}] for your preschooler! We hope we have the opportunity to partner with you to provide an unparalleled early learning experience for your child and family.<br /><br />
<b>About <i>Primrose®</i> and <i>Balanced Learning®</b></i><br />
At Primrose, we believe who children become is as important as what they know. That's why our exclusive <i>Balanced Learning </i> approach emphasizes character development and life skills in addition to nurturing children's intellectual, creative and physical development.<br /><br />
<i>Balanced Learning</i> is created from the best early education wisdom to ensure we offer the highest quality early education and care possible. Meaningful daily classroom experiences weave learning and fun together for children, and a balance of purposeful play and nurturing guidance from teachers gives every child the opportunity to reach his full learning potential.<br /><br />
<b>About our Preschool Classroom</b><br />
Our Preschool classroom is part of our Venture Program for children ages 3 to 5, which focuses on building children's confidence and independence so they feel comfortable venturing out, exploring on their own and asking questions. We invite you to watch the video below for a glimpse inside our Preschool classroom and to learn more about the unique experiences designed to nurture curiosity, creativity, confidence and compassion.<br /><br />
We would love to speak with you more about what you are looking for in a child care provider. Please let us know a time that is convenient for you to visit our school and meet our School Leadership Team and teachers.<br /><br />
Thank you again for your interest in the [{CenterName}]. We look forward to meeting you and your child soon!<br /><br />
Sincerely,
</TemplateField></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, sans-serif;font-size:12px;height:19px;color:#231f20;text-align:left;">[{CenterName}]<br />
[{CenterAddress1}] [{CenterAddress2}] | [{CenterCity}], [{CenterState}] [{CenterZip}]<br />
[{CenterPhone}] | [{CenterWebsite}]</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</table></td>
<td width="20"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="1" bgcolor="#737f48"></td>
<td width="18"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18" height="182" bgcolor="#f1f2f2" valign="top"><table width="18" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="162" bgcolor="#ffffff"></td>
</tr>
</table></td>
<td valign="top" height="182" ><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" valign="top" bgcolor="#f1f2f2"><table width="1" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="145" bgcolor="#737f48"></td>
</tr>
<tr>
<td width="1" height="17" bgcolor="#ffffff"></td>
</tr>
</table></td>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center"><table width="380" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="144" align="center" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0">
<tr>
</tr>
<tr>
<td height="10" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td class="em_green" valign="top" align="right" style="font-family:'Unitot', Trebuchet MS, Arial, sans-serif; font-size:15px; line-height:18px; color:#737f48; font-weight:bold;">Learn more about our </td>
</tr>
<tr>
<td class="em_green" valign="top" align="right" style="font-family:'Unitot', Trebuchet MS, Arial, sans-serif; font-size:15px; line-height:18px; color:#737f48; font-weight:bold;">Preschool program.</td>
</tr>
<tr>
</tr>
<tr>
<td align="center" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="5" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td align="right" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="198"> </td>
<td align="right" valign="top" width="31"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/fb.jpg" width="31" height="31" alt="Fb" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/twitt.jpg" width="30" height="31" alt="Tweet" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/media.jpg" width="30" height="31" alt="YT" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/pinterest.jpg" width="30" height="31" alt="Pint" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/blog.jpg" width="30" height="31" alt="Blog" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="5" style="font-size:1px; line-height:1px;"> </td>
</tr>
</table></td>
<td width="15"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td height="17" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td height="25" style="font-size:1px; line-height:1px;" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
<td valign="top" align="left" width="293"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/Video.jpg" width="293" height="187" alt="Video" style="display:block;" border="0"/></td>
<td valign="top" align="center" width="17"><table width="17" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="144" width="17"> </td>
</tr>
<tr>
<td height="1" width="17" valign="bottom" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td height="17" width="17" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td height="25" style="font-size:1px; line-height:1px;" width="17" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="1" valign="top" bgcolor="#f1f2f2"><table width="1" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="145" bgcolor="#737f48"></td>
</tr>
<tr>
<td width="1" height="17" bgcolor="#ffffff"></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="18" height="182" bgcolor="#f1f2f2" valign="top"><table width="18" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="162" bgcolor="#ffffff"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="36" bgcolor="#f2f2f2"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" bgcolor="#f1f2f2"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_bottom.jpg" style="background-repeat:no-repeat;" width="800" height="135" valign="top" bgcolor="#4c6211"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:135px;">
<v:fill type="tile" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_bottom.jpg" color="#4c6211"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="25"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="36"> </td>
<td width="320" valign="top" align="left"><table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td height="22"> </td>
</tr>
<tr>
<td class="em_white" align="left" valign="top" style="font-family:'Century Gothic', Arial, sans-serif; font-size:8px; line-height:10px; color:#ffffff;"><span style="font-weight:bold;">Confidentiality Notice:</span> This message (including any attachments) contains information that may be confidential. Unless you are the intended recipient(or authorized to receive for the intended recipient), you may not read, print, retain, use, copy, distribute or disclose to anyone the message or any information contained in the message. If you have received the message in error, please advise the sender by reply e-mail, and destroy all copies of the original message (including any attachments). </td>
</tr>
</table></td>
<td width="300" valign="top" align="center"><table width="300" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td height="57"> </td>
</tr>
<tr>
<td valign="top" align="right" style="font-size:0px; line-height:0px;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/text_1.png" width="210" height="13" alt="The Leader in Early Education and Care." border="0" style="display:block; font-family:Arial, sans-serif; font-size:10px; line-height:22px; color:#ffffff;" /></td>
</tr>
</table></td>
<td width="5"></td>
<td width="91" valign="top" align="left"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/logo_ftr.png" width="91" height="92" alt="PRIMROSE SCHOOLS" border="0" style="display:block; font-family:Arial, sans-serif; font-size:15px; line-height:22px; color:#ffffff; font-weight:bold;" /></td>
<td width="48"> </td>
</tr>
</table></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="line-height:1px; font-size:1px;" width="800"><img alt="" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/spacer.gif" height="1" width="800" style="max-height:1px; min-height:1px; display:block; width:800px; min-width:800px;" border="0" /></td>
</tr>
</table></td>
</tr>
<!-- Emailer Ends Here //-->
</table>
<div style="display:none; white-space:nowrap; font:20px courier; color:#ffffff; background-color:#ffffff;"> </div>
</body>
</html>
I just need the image to fit within the box when sent and be justified with the rest of the template.
As Nisharg Shah said, use inline CSS instead of creating a style tag. Also, use of !important is usually frowned upon and candle make your CSS very confusing.
I am trying to create a responsive HTML email. The two columns should be equal height and they currently stack on mobile. Everything works properly until there is a lot of text as the Billing Information or Shipping Information. It's an unlikely case that the text will ever look like this, but I must handle all possibilities without the email breaking. How can I make my td stretch vertically instead of horizontally? I cannot use a fixed width as it will break the responsiveness of my table.
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnTextBlock" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="top" width="100%" class="mcnTextBlockInner" style="padding-top:9px; padding-right:18px; padding-left: 18px; padding-bottom: 15px;">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" bgcolor="white" border="0" cellpadding="5" cellspacing="0" style="max-width:100%; min-width:100%;" width="100%" class="mcnTextContentContainer">
<tbody>
<tr>
<td valign="top" width="50%" class=" templateColumnContainer"">
<!--<td valign="top" width="300" class="mcnTextBlockInner" style="padding-top:9px;padding-right:18px;padding-left:18px;padding-bottom:15px;"> -->
<table border="0" cellpadding="5" cellspacing="0" width="100%" style="max-width:100%; min-width:100%;" class="mcnTextContentContainer">
<tr>
<td valign="top" align="center" class="leftColumnContent" style="text-align: center;" >
<span style="color:#000000; font-size:18px; display: block; width:100%; height:auto;"><strong>Billing Information</strong></span>
</td>
</tr>
<tr>
<td valign="middle" class="leftColumnContent" style="text-align: center;">
<span style="font-size:14px; color: #000000!important;">{{ receipt.order.get_billing_html|safe }}</span>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent" style="text-align: center;">
<span style="font-size:18px; color:#000000; text-align:center; display: block; width:100%; height:auto;"><strong>Shipping Information</strong></span>
</td>
</tr>
<tr>
<td valign="middle" class="rightColumnContent" style="text-align: center;">
<span>
Shipping Address
</span>
<br><span style="font-size:14px; color: #000000!important;">Shipping speed description
{% endif %}
{% if receipt.order.shipper_tracking_number %}
<br><strong style="color: #000000;!important">Tracking: </strong>Shipper Name</span><br>
<a href="shipping tracking number" target="_blank" style="color: #000000; font-size: 14px;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Found the answer in post: HTML CSS How to stop a table cell from expanding
Using style="overflow-wrap: break-word;" on the <td> solved my problem. It is compatible across Gmail, Apple Mail, Yahoo, latest Outlook.
I have an issue with HTML email where gmail is puts a gap after my tables. It has been driving me crazy and tried nesting my tables in all kind of different way. Here is my code:
<html>
<head>
</head>
<body bgcolor="#000000" yahoo="fix">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0 auto">
<tbody>
<tr>
<td width="600" style="background-color:#fafafa" bgcolor="#fafafa">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto">
<tbody>
<tr>
<td width="600">
<table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" style="background-color:#000000;margin:0 auto">
<tr><td>
<table align="top" border="0" cellpadding="0" cellspacing="0" width="600" height="auto">
<tr>
<td valign="bottom" width="600">
<table border="0" cellpadding="0" cellspacing="0" width="600" align="top">
<a href="#">
<tr>
<td width="600" align="center">
<img height="80" src="http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif" width="600" style="display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img alt="" height="820" src="http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif" width="600" style="display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img height="225" src="http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif" width="600" style="display:block;" />
</td>
</tr>
</a>
</table>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body></html>
And this is how it looks like in gmail. I am trying to get rid of the black bar at the end of my html email. Seems to be very difficult...
Your HTML tags such as the table, tbody and tr did not close properly. I tried to send to myself via mailchimp with the updated one and no black bars I see from gmail's interface.
Updated one:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body bgcolor="#000000" yahoo="fix">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
align="center" style="margin:0 auto">
<tbody>
<tr>
<td width="600" style="background-color:#fafafa" bgcolor=
"#FAFAFA">
<table width="600" border="0" align="center"
cellpadding="0" cellspacing="0" style="margin:0 auto">
<tbody>
<tr>
<td width="600">
<table width="600" cellpadding="0" cellspacing=
"0" border="0" bgcolor="#000000" style=
"background-color:#000000;margin:0 auto">
<tr>
<td>
<table align="top" border="0"
cellpadding="0" cellspacing="0" width=
"600" height="auto">
<tr>
<td valign="bottom" width="600">
<table border="0" cellpadding="0"
cellspacing="0" width="600" align=
"top">
<tr>
<td width="600" align="center">
<img height="80" src=
"http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif"
width="600" style=
"display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img alt="" height="820" src=
"http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif"
width="600" style=
"display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img height="225" src=
"http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif"
width="600" style=
"display:block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have an html file that looks like
<HTML>
<BODY>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="400" align="right" valign="top" class="text_rail_left"></td>
<td width="100%" align="left" valign="top" class="text_back_color"><table border="0" cellPadding="0" cellSpacing="0" width="100%"><tr>
</tr><tr>
<td width="100%" align="left" align="top"><table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="center" valign="top" class="inside_heading_text">Train Names with Details</td>
</tr> <tr>
<td><b><BR><BR> SORRY !!! No Matching buses Found</b></td></tr>
<tr><td>
</td></tr></table>
<td align="left" valign="top" class="pad_self"><table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr><td align="right" valign="top"> </td>
</tr></table></td>
</tr></table></td>
<td align="left" valign="top" class="text_rail_right"> </td>
</tr>
<tr>
<td width="10" align="left" valign="top"><img src="http://www.indianrail.gov.in/main_text_left_bottom2.gif" alt="" width="8"/></td>
<td width="100%" align="left" valign="top" class="text_rail_bottom"><img src="http://www.indianrail.gov.in/blank.gif" alt="" width="1" height="8" /></td>
<td width="10" align="right" valign="top"> <img src="http://www.indianrail.gov.in/main_text_right_bottom2.gif" alt="" width="8" /></td>
</tr></table><body>
<FONT size=1>No. of Queries : 0839425885
, Server : YAMUNA
, Dated : 15-05-2014 Time:07:15:26 Hrs</font></td></tr></table></td></tr> </table></td></tr></table></td></tr></table></td></tr><tr><td align="left"valign="top"><table width="970" border="0" cellspacing="0" cellpadding="0"><tr> <td width="9" align="left" valign="top"><img src="http://www.indianrail.gov.in/images/footer_upper_lft.gif" alt="" width="9" height="49" /></td><td width="100%%" align="left" valign="top" class="footer_upper"><table width="100%%" border="0" cellspacing="1" cellpadding="0"><tr><td align="center" valign="top" class="main_footer_upper">Home | Ministry of Railways | Trains between Stations | Booking Locations | CRIS | CONCERT | Advertise with CRIS | Railway Map | FAQ | Sitemap | Feedback</td></tr><tr><td align="center"valign="top" class="copy_footer" style="padding-top:3px;"><span class="main_footer_copy">Copyright</span> © 2010, Centre For Railway Information Systems, Designed and Hosted by CRIS | <span class="main_footer_copy">Disclaimer</span><br />Best viewed at 1024 x 768 resolution with Internet Explorer 5.0 or Mozila Firefox 3.5 and higher</td></tr> </table></td><td width="9" align="right" valign="top"><img src="http://www.indianrail.gov.in/images/footer_upper_rgt.gif" alt="" width="9" height="49" /></td></tr></table></td></tr></table></td></tr></table><script type="text/javascript">anylinkmenu.init("menuanchorclass")</script>
</BODY>
</HTML>
I want to write an xpath query to read the string
SORRY !!! No Matching buses Found
There's no unique class that identifies the class with the string. I tried the xpath query
#"//td[#class='inside_heading_text']/tr"
but it doesnt seem to work.
Can someone point me in the right direction? I'm using the ONO library in Objective-C to parse the html.
Well, this would get you the container of the "SORRY" text
//*[contains(text(),'SORRY')]
I recommend firefinder extension for firebug (on firefox) for an easy way to try xpaths.
That's some ugly HTML you got there.
There are unclosed elements, repeated td/#align attributes, etc. You're going to have to clean it up first if you want to use XPath.
If you can manually or automatically clean it up at least to this point:
<?xml version="1.0" encoding="utf-8"?>
<HTML>
<BODY>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="400" align="right" valign="top" class="text_rail_left">
</td>
<td width="100%" align="left" valign="top" class="text_back_color">
<table border="0" cellPadding="0" cellSpacing="0" width="100%">
<tr>
</tr>
<tr>
<td width="100%" align="left">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="center" valign="top" class="inside_heading_text">Train Names with Details</td>
</tr>
<tr>
<td>
<b>
<BR/>
<BR/> SORRY !!! No Matching buses Found</b>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td align="left" valign="top" class="text_rail_right"></td>
</tr>
</TABLE>
</BODY>
</HTML>
Then this XPath will select the "SORRY..." text given the inside_heading_text point of reference that you mention:
//td[#class='inside_heading_text']/../following-sibling::tr[1]/td[1]/b
I will post my HTML, but I'm not sure how the first table (which contains all subsequent tables) is always an additional 2-3 pixels wider than the rest of the content. I have spent the last 2 hours troubleshooting what I believe should be an easy fix... but I can't seem to find any other areas that may be causing the problem. I apologize if the solution is obvious, I haven't designed a website since I was in high school so my skills are a little rusty/aged.
<html>
<head>
<title>Piedmont Wealth Solutions</title>
<style type="text/css"><!--
a:link {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:visited {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:active {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:hover {
color:000000; font-face:arial; font-size:10pt; text-decoration:underline
}
body {
color:Body; font-size:10pt; font-family:Arial;
}
td {
color:Body; font-size:10pt; font-family:Arial
}
--></style>
</head>
<body bgcolor="e9e9e9" background="page_bg.gif" font face="arial" size="10" valign="top" topmargin="0" leftmargin="180">
<table width="537" cellspacing="0" cellpadding="0" valign="top" align="left" height="100%" border="0" bgcolor="265b78">
<tr width="537" valign="top" align="left">
<td valign="top" align="left" width="36" background="table_bg_left.gif">
</td>
<td width="501" valign="top" align="left">
<!------banner/nav----->
<table width="501" valign="top" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="c5c5c5">
<tr valign="top" align="left" border="0">
<img src="banner_nav.jpg" border="0" valign="top" align="left">
<img src="content_top_spacer.jpg" border="0" valign="top" align="left">
</td>
</tr>
</table>
<!------content------>
<table width="501" height="350" cellspacing="0" cellpadding="0" border="0" align="left">
<tr valign="top" align="left">
<td valign="top" align="left" width="356" bgcolor="f5F8Fa">
<img src="aboutus_header.jpg" border="0" valign="top">
<br>
<br>
Content
</td>
<td valign="top" width="144" bgcolor="f0f3f5">
<img src="news_header.jpg" border="0" align="left" valign="top"> <br><br>
google news feed
</td>
</tr>
</table>
<!------address/disclaimer------>
<table width="501" cellspacing="0" cellpadding="0" height="45%" border="0" valign="top" align="left" bgcolor="265b78">
<tr valign="top" align="left">
<td valign="top" align="left" height="15" bgcolor="aac6d5">
</td>
</tr>
<tr valign="top" align="left">
<td valign="top" align="left" height="15" bgcolor="7da6bc">
</td>
</tr>
<tr valign="top" align="left">
<td valign="top" align="left">
<img src="bottom_disclosure.jpg" align="left" valign="top" border="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Tables should not be used for layout purposes, that's what CSS is for. Tables are for tabular data. With CSS you have a very nice control over the positioning and dimensions of your content.
Here's a collection of reasons why you should opt for CSS.
This is (IMHO) the best book for a head start.