bash -> delete tableData lines that have no visble html content - html

I have a table.html file which contains a large table with a lot of inline style
The file is formatted that a tableData tag is in one line.
Here is a short example:
<table>
<tbody>
<tr style="height: 17px;">
<td style="width: 120.078px; height: 17px;" align="RIGHT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong>CEO </strong></span></td>
<td style="width: 438.922px; height: 49px;" rowspan="2" align="LEFT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong> Name<br/></strong> E-Mail<br/></span></td>
</tr>
<tr style="height: 32px;">
<td style="width: 120.078px; height: 32px;" align="RIGHT" valign="TOP"><span style="font-family: verdana, geneva, sans-serif; font-size: 10pt;"> </span></td>
</tr>
</tbody>
The file is huge and I want to delete every line that is a <td> </td> line and has no content (whitepaces counts also as no content)
I tried to use awk but my knowledge is not enough
In this short example the output after the delete would look like this:
<table>
<tbody>
<tr style="height: 17px;">
<td style="width: 120.078px; height: 17px;" align="RIGHT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong>CEO </strong></span></td>
<td style="width: 438.922px; height: 49px;" rowspan="2" align="LEFT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong> Name<br/></strong> E-Mail<br/></span></td>
</tr>
<tr style="height: 32px;">
</tr>
</tbody>

Using sed
$ sed -E '/\<td\>/{\~(<[^>]*>)+ *[[:alpha:]] *~!d}' input_file
<table>
<tbody>
<tr style="height: 17px;">
<td style="width: 120.078px; height: 17px;" align="RIGHT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong>CEO </strong></span></td>
<td style="width: 438.922px; height: 49px;" rowspan="2" align="LEFT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong> Name<br/></strong> E-Mail<br/></span></td>
</tr>
<tr style="height: 32px;">
</tr>
</tbody>

Related

Unable to remove spaces between table column (td)

Unable to remove space between td between numeric digit (td) and the background red td
https://jsfiddle.net/297zgLon/
I have tried using suggested css way of doing it i.e.
CSS
border-collapse:collapse;border-spacing:0px;
HTML
<table style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-spacing: 0;border-collapse: collapse;width:100%;text-align: left;border: 0px;border-collapse:collapse;border-spacing:0px;" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; display: inline-block; font-size: 24px;color: #177fff; text-align: right; font-weight: 600; font-family:'Open Sans', sans-serif, Arial;"> 1.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;background:red"> </td>
<td align="left"> TEST CASE 1 </td>
</tr>
<tr align="left">
<td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px" class="spacerMobile8"> </td>
</tr>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; display: inline-block; font-size: 24px; font-family:'Open Sans', sans-serif, Arial; color: #5d636a; text-align: right; font-weight: 600"> 2.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> </td>
<td style=" color: #5d636a;font-size: 18px;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> Test case 2 tools</td>
</tr>
<tr align="left">
<td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px"> </td>
</tr>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; display: inline-block; font-size: 24px;color: #5d636a; text-align: right;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> 3.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> </td>
<td style="font-size: 18px;font-weight: 600; font-family:'Open Sans', sans-serif, Arial;color: #5d636a;"> Test case 3 </td>
</tr>
</tbody>
</table>
There should be no space between 1. and red background td(column)
removed display: inline-block; on first <td>
<table style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-spacing: 0;border-collapse: collapse;width:100%;text-align: left;border: 0px;border-collapse:collapse;border-spacing:0px;" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; font-size: 24px;color: #177fff; text-align: right; font-weight: 600; font-family:'Open Sans', sans-serif, Arial;"> 1.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;background:red"> </td>
<td align="left"> TEST CASE 1 </td>
</tr>
<tr align="left">
<td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px" class="spacerMobile8"> </td>
</tr>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; font-size: 24px; font-family:'Open Sans', sans-serif, Arial; color: #5d636a; text-align: right; font-weight: 600"> 2.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> </td>
<td style=" color: #5d636a;font-size: 18px;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> Test case 2 tools</td>
</tr>
<tr align="left">
<td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px"> </td>
</tr>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; font-size: 24px;color: #5d636a; text-align: right;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> 3.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> </td>
<td style="font-size: 18px;font-weight: 600; font-family:'Open Sans', sans-serif, Arial;color: #5d636a;"> Test case 3 </td>
</tr>
</tbody>
</table>

HTML Email Signature CSS Not Working in Some Email Clients [duplicate]

This question already has an answer here:
Wrong display of html e-mail in Outlook
(1 answer)
Closed 4 years ago.
I'm trying to create a html based email signature with tables.
It's definitely working in html, works when I copy and paste into gmail, however when I copy into Outlook, the CSS break. Did I do something wrong here?
<table style="width: 500px; font-size: 12pt; font-family: Arial,sans-serif; line-height:normal;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width:86px; vertical-align:middle;" valign="middle">
<img border="0" alt="Logo" height="auto" width="148" style="width:148px; height:auto; border:0;" src="https://i.imgur.com/1HlZfl8.png">
</td>
<td style="width:45px; text-align:center; vertical-align:middle;" valign="middle">
<div style="margin-left:15px"><img src="https://i.imgur.com/mNNR1Ga.png"></div>
</td>
<td style="width:500px; vertical-align:middle;" valign="middle">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-size:12pt; font-family: Arial, sans-serif; color: #3d3c3f; padding-bottom:3px;"><span style="font-weight: bold; font-family: Arial, sans-serif; color:#3c3c3b;">Jessica Smith</span>
<span style="font-size:9pt; font-family: Arial, sans-serif; color:#3c3c3b;"> | CEO/Founder</span></td>
</tr>
<tr>
<td style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b;"><div style="font-weight:bold; display: inline-block; width: 15px;">t </div>(07) 3281 0000</span><span style="font-family: Arial, sans-serif; color:#3c3c3b"></span><span style="font-family: Arial, sans-serif; color:#3c3c3b; margin-left:10px;"><div style="font-weight:bold; display: inline-block; width: 15px;">f</div>(07) 3281 0000</span>
</td>
</tr>
<tr>
<td width="20px" style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b; "><div style="font-weight:bold; display: inline-block; width: 15px;">e </div>info#domainnamehere.com.au</span>
</td>
</tr>
<tr>
<td style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b;"><div style="font-weight:bold; display: inline-block; width: 15px;">w </div>domainnamehere.com.au</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width:500px; padding-top:16px;" colspan="3" width="500">
<img border="0" alt="Banner" width="500" style="width:500px; height:auto; border:0;" src="https://i.imgur.com/NBxWjRC.png">
</td>
</tr>
</tbody>
</table>
Gmail Screenshot
Outlook Screenshot
Not sure what's going on.
Email clients does not strictly follow HTML Standards. The viewing technology of a typical email client isn't as up-to-date as a web browser. You need to be careful about that. HTML code works in your browser may not work on Email Clients.
You may want to read Mailchimps Article and visit this link for the CSS Support

Table width larger in Outlook even with conditional commenting

I'm trying to place a table within a cell in an email, and cannot figure out how to limit the width of the inside table in Outlook. I've tried to use "The Hybrid Coding Approach" (http://labs.actionrocket.co/the-hybrid-coding-approach) and THINK I tried Outlook conditional statements correctly (http://labs.actionrocket.co/microsoft-outlook-conditional-statements). There's a lot of places where I'm seeing the conditional commenting for mso, but whenever I test the email in Litmus, Outlook still displays this giant set of images in the middle. What am I doing wrong? Any help would be greatly appreciated.
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">April is always <span class="highlighted" style="color: #518fce;">#BetterWithStraw</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">Introductory text.
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
<!-- End of content 1--> <!-- Start of content 2-->
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">Vote <span class="highlighted" style="color: #518fce;">here</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">
<!--[if mso>
<table width="540" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<![endif]-->
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="100%" /></th></tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="100%" /></th></tr>
</tbody>
</table>
<!--[if mso>
</td>
</tr>
</table>
<![endif]-->
<div style="display: none;"> </div>
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
Thank you!
The issue is that Lotus Notes, Outlook 2003, 2010 and 2016, needs to have a fixed width on any image. If you insert a 1280px wide retina image, and set it to 100% in width, then it will ignore the outside box, and just become 100% of its original width.
So what you need to do is make a width on each image like this:
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="536" /></th>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="536" /></th>
</tr>
</tbody>
</table>
And then with Media queries make it optimal for mobile
#media screen and (max-width: 480px) {
a img{
max-width:100% !important;
width:100% !important;
}
}

HTML Email CSS Not Rendering Properly in Outlook

I am trying to generate an html email being sent to customers. It renders find in most email clients but I am experiencing issues in Outlook Express and Outlook. Basically, I am trying to reserve two lines of space for my product link (two lines to be shown even if there is only one line of text). This works fine is other clients but not in these. Additionally, in outlook express the hyperlinks are always dark blue with a text underline. How can I standardize the size of the grid boxes along with fixing the hyperlink color. The color issue only happens in outlook express. The missing images are to remove logos from the posted image, this is not an issue.
<table width="600" align="center" cellspacing="0" cellpadding="0" style="width:600px;">
<tbody>
<tr>
<td>
<table width="290" align="left" border="0" cellspacing="0"
cellpadding="0" style="width:290px;background-color:#403E3E;">
<tbody>
<tr>
<td width="290" style="width:290px;"><a href=
"javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
<img src=
"https://img.examplecom/deal/usifhj6vPAYwqyziASU3bQ/la_giralda_guanaja 960x582/v1/t440x300.jpg"
border="1" width="290" height="180" style=
"border-width: 0px;" /></a></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="7" style="width:100%;">
<tbody>
<tr>
<td align="left" style=
"text-align:justify;"><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
alt="company" style=
"border-width: 0px;" /></span></font></td>
<td align="right" style=""><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">$525</span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&URL=http%3a%2f%2f-featured_url-"
target="_blank">Name of the product being
sold</a></span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">Other
info</span></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=
"width:100%;height:15px;background-color:white;">
<span style="background-color:white;"> </span></td>
</tr>
</tbody>
</table>
<table width="290" align="right" border="0" cellspacing="0"
cellpadding="0" style="width:290px;background-color:#403E3E;">
<tbody>
<tr>
<td width="290" style="width:290px;"><a href=
"javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
<img src=
"https://img.example.com/deal/k44bFhz77oXnzEEcyTBW/y9-960x582/v1/t440x300.jpg"
border="1" width="290" height="180" style=
"border-width: 0px;" /></a></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="7" style="width:100%;">
<tbody>
<tr>
<td align="left" style=
"text-align:justify;"><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
alt="Logo" style=
"border-width: 0px;" /></span></font></td>
<td align="right" style=""><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">$1355</span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&URL=http%3a%2f%2f-featured_url-"
target="_blank">This is an example
product description for an item being
sold</a></span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">Other
info</span></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=
"width:100%;height:15px;background-color:white;">
<span style="background-color:white;"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
The code used to generate these boxes are:
$html = '<table align="'.$side.'" border="0" cellpadding="0" cellspacing="0" class="BoxWrap" style="background-color: #403e3e" width="290">
<tbody>
<tr>
<td border="0" class="RespoImage_TwoThirdsW" width="290"><img alt="" border="0" class="RespoImage_TwoThirds" height="180" src="'.$params['image'].'" style="width: 290px; height: 180px; display: block;" width="290" alt="'.$params['title'].'" /></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 18px; text-align: left;"><img height="15" src="'.$this->siteurl.$params['provider']['logo'].'" style="height:15px;" alt="'.$params['provider']['provider_display'].'"></td>
<td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: right;"><span>'.$params['price'].'</span></td>
</tr>
<tr>
<td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
'.$params['title'].'
</td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">'.$this->create_location($params['location']['mapped_address']['address']['city'],$params['location']['mapped_address']['address']['state'],$params['location']['mapped_address']['address']['country']).'</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" class="RespoShowMedium" height="15" style="display:none;" width="100%"> </td>
</tr>
</tbody>
</table>';
I am going to give the exact row of the project description changes.
Instead of this
<tr>
<td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
'.$params['title'].'
</td>
</tr>
Use like this
<tr>
<td align="justify" border="0" height="60" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
<span style="color:#fff;">'.$params['title'].'</span>
</td>
</tr>

gmail email template: how to get table right on mobile in portrait?

So, I'm trying to make a email template with a table.
I have the following table right under the body tag
<table style="padding-top:0px; max-width: 650px;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
<tr>
<td height="10" style="width: 650px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody width="100%">
<tr width="100%">
<td width="2.5%"> </td>
<td width="22%" style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">AAAA AAAA</td>
<td width="40%" style="text-indent: 4%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">BBBB</td>
<td width="22%" align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">CCC</td>
<td width="13%" style="text-indent: 4.5%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">DDDDD</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
And it looks just the way I want in Outlook (desktop, mobile portrait, mobile landscape). And it looks fine in gmail on the desktop and in mobile landscape.
But if you open it in gmail on mobile portrait, the td's are pretty bunched up on the left hand side.
Anyone know why? If it matters, I'm testing in the gmail app on a Nexus 5 phone.
Try this:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25%" style="padding-left:3%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">AAAA AAAA</td>
<td width="40%" style="padding-left: 4.5%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">BBBB</td>
<td width="22%" align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">CCC</td>
<td width="13%" style="padding-left: 4.5%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">DDDDD</td>
</tr>
</table>
Not sure if text-indent works, but padding does. If you want a max-width fluid layout, wrap it inside this fluid template example