I need a specific table construction with borders. I have problem with table in IE. Rowspan not work. Table schedule from 6 cols.
I need use table, because requires marketing platform
I need this view. It's working in Chrome and Firefox:
This is the view in IE:
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td width="600px" style="text-align:center;">
<table width="600px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" width="364px" height="15px"></td>
<td colspan="2" rowspan="2" width="236px" height="60px"><img src="logo.jpg" alt=" Logo" border="0" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2" width="364px" height="225px" style="border-top: 1px solid #000000; border-left: 1px solid #000000;"><img src="header.jpg" alt=" Header" border="0" /></td>
</tr>
<tr>
<td colspan="2" width="236px" height="180px" style="border-right: 1px solid #000000;"></td>
</tr>
<tr>
<td colspan="6" style="border-left: 1px solid #000000; border-right: 1px solid #000000;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td width="175px"></td>
<td valign="top" align="right">
<p style="padding: 0; margin: 0; font-family: 'Tahoma', sans-serif; font-size: 14px; font-weight: normal; color: #000000; line-height: 22px;">Loren</p>
</td>
<td width="80px"></td>
</table>
</td>
</tr>
<tr>
<td colspan="6" width="600px" height="30px" style="border-left: 1px solid #000000; border-right: 1px solid #000000;"></td>
</tr>
<tr>
<td width="29px" height="126px"><img src="icons.jpg" alt=" Icons" border="0" /></td>
<td width="146px" height="126px" style="border-bottom:1px solid #000000;"></td>
<td colspan="3" height="126px" style="border-bottom:1px solid #000000;" valign="top" align="right"></td>
<td width="80px" height="126px" style="border-bottom:1px solid #000000; border-right: 1px solid #000000;"></td>
</tr>
<tr>
<td colspan="5" width="520px" height="30px" valign="top" align="left"><p style="padding: 0; margin: 0; font-family: 'Tahoma', sans-serif; font-size: 8px; font-weight: normal; color: #000000;">123</p> </td>
<td colspan="1" width="80px" height="30px" valign="top" align="right"><p style="padding: 0; margin: 0; font-family: 'Tahoma', sans-serif; font-size: 8px; font-weight: bold; color: #000000;">123</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
Related
I stuck and basically I do not understand why.
I need to move my <tr> elemnent from right side, directky below other <tr> tags, which are higher.
One requirement: I'm creating mailing template for outlook, so I cannot change display parameters (as I read here), cause it does not work on Outlook client.
I hope that I have made some stupid mistake here which I have not seen yet, or someone will suggest to me some clearer solution.
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px"
>
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>test</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
And if you just remove the first inner table tags?
<table border="0" cellpadding="0" cellspacing="0" border-collapse="collapse" width="768" style="font-family: 'Roboto', 'Montserrat', sans-serif; background-color: #fff;">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td width="100px;" style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;">
<img src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg" alt="photo" width="100" height="100" style="padding-right: 3px" />
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table border="0" cellpadding="0" cellspacing="0" width="618" style="font-size: 15px; color: #595b5d">
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d">test</span>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block">test</span>
<span style="color: #d2222d; padding-top: 5px; display: block">Back</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
By commenting out the below you effectively put them in the same tbody just separate trs. that seems to slide it over as desired.
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<!-- </tbody>
</table>
</td>
</tr> -->
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>Back</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I'm trying to align this text and button but I can't manage to do it. I want them to be on the same row no matter the length of the text.
If you need the CSS styling please let me know.
<div style="float: left; width: 100%;" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td width="640" align="center" style="width: 640px; min-width: 640px;" class="wrapto100pc">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto100pc">
<tbody>
<tr>
<td align="center" style="">
<table bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="min-width: 100%;" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size: 0; direction: ltr;">
<!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%" dir="ltr"><tr><td valign="middle"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> DONE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> Lorem ipsum, lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="middle" style="font-size:0;"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> STOPE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size: 0px;" class="nomob"> </td>
</tr>
</tbody>
</table>
</div>
I think for your requirement we would need to make some changes in the structure of your table. we need to keep button and text in the same and with different s.
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td width="640" align="center" style="width: 640px; min-width: 640px;" class="wrapto100pc">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto100pc">
<tbody>
<tr>
<td align="center" style="">
<table bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="min-width: 100%;" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size: 0; direction: ltr;">
<!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%" dir="ltr"><tr><td valign="middle"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr width="320" style="max-width:320px">
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="320" align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr width="320">
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> DONE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td width="160" align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> Lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum </td>
<td width="160" align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="middle" style="font-size:0;"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> STOPE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size: 0px;" class="nomob"> </td>
</tr>
</tbody>
Try above snippet. It might work for you. I have made few changes in structure of table.
I'm formatting a table on 2 rows with 3 images but the 2nd image in each row keeps dipping down and hugging to the wrong direction. I'm not sure what's causing it.
This is for an email and I'm just trying to pick apart some of the template to better fit my needs, thus all that inline CSS.. The responsiveColumn class is just for a media query just an fyi.
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div></td></tr>
</tbody></table></td>
I put it in jsfiddle so you can see it more clearly. You'll see how the 2nd image in each row just dips down and moves to the left opposed to keeping everything evenly on one line
https://jsfiddle.net/9f5c2zh6/1/
Remove the padding-top
<td style="padding-top: 20px;padding-right: 5px;padding-bottom: 20px;padding-left: 5px;background-color: #ffffff;color: #000000;" valign="top" bgcolor="#ffffff">
This is why we avoid inline styles because it's difficult to debug, However after some fiddling around, i found some problems
First: certain p elements have the following styles, And some others don't
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
Second: certain td elements have the following styles, And some others don't
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
The fix is to add the missing styles to where they belongs so everything is aligned nicely together
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end 3 column section -->
<!-- 3 column section -->
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image on 2nd row -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Occasionally, I get notified of issues from clients that the HTML email signature I created for them is collapsing upon itself in the default Apple Mail app on iOS.
This tends to only occur when I implement multiple tables on top of each other, which is necessary for designs such as the one below in order to ensure one of the tables has a complete background color, with no hairlines of white in between table cells.
Anyway, what seems to happen is the tables collapse upon each other, but I can't replicate the issue on my iPad 3 running iOS 9.3.5, which is the only Mac device I own and can test installing and sending from (I use Email on Acid to test receiving on multiple devices and platforms).
Below is an example of the issue and the underlying code... Any help would be greatly appreciated... Thanks!
How it should look vs how it sometimes looks from Apple Mail on iOS:
And here's the code for this example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="130" rowspan="4" valign="bottom" style="padding: 0px 10px 0px 0px; vertical-align: bottom;"><img alt="Headshot" height="120" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Headshot-v2.png" style="display: inline-block;" width="120"></td>
</tr>
<tr>
<td width="295" style="padding: 5px 0px 1px 0px;"><img alt="Signature" height="55" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Signature-v1.png" style="display: inline-block;" width="50"></td>
</tr>
<tr>
<td width="295" valign="middle" style="padding: 0px 0px 3px 0px; border-bottom: #00aeef 1px dotted; font-family: Arial, sans-serif; font-size: 14px; line-height: 15px; color: #3a3a3c;"><span style="font-weight: bold; font-size: 11pt;">Tony Ashmore</span> <span style="font-weight: normal; font-size: 8pt; color: #00aeef;">REAL ESTATE PROFESSIONAL</span>
</td>
</tr>
<tr>
<td width="295" valign="bottom" style="padding: 3px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 8pt; color: #3a3a3c; line-height: 15px; vertical-align: bottom;">
<div nowrap style="white-space: nowrap;">
<span style="color: #00aeef; font-weight: bold; font-size: 6pt;">M</span> 345 324 3333 <span style="color: #00aeef; font-weight: bold;">•</span> Tony#AshmoreAlexander.com<br>
<span style="color: #3a3a3c;">P.O. Box 31673, Grand Cayman KY1-1207, Cayman Islands</span><br>
www.AshmoreAlexander.com
</div></td>
</tr>
<tr>
<td width="130" height="10" style="font-size: 10px; mso-line-height-rule: exactly; line-height: 10px;"> </td>
<td width="295" height="10" style="font-size: 10px; mso-line-height-rule: exactly; line-height: 10px;"> </td>
</tr>
</tbody>
</table>
<table bgcolor="#00aeef" width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#ffffff" width="200" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
<td bgcolor="#ffffff" width="225" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
</tr>
<tr>
<td width="250" height="46" bgcolor="#00aeef" valign="middle" rowspan="2" style="padding: 8px 0px 5px 10px; vertical-align: middle; background-color: #00aeef;"><img alt="Logo" height="50" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Logo-White-v2.png" style="text-decoration: none; border: 0;" width="195"></td>
<td width="175" height="23" bgcolor="#00aeef" align="right" valign="bottom" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><img alt="Properties For Sale" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-For-Sale-Button-v2.png" style="text-decoration: none; border: 0;" width="165">
</td>
</tr>
<tr>
<td width="210" height="23" bgcolor="#00aeef" align="right" valign="top" style="padding: 2px 10px 5px 0px; vertical-align: top; background-color: #00aeef;"><img alt="What's Your Home Worth?" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Worth-Button-v1.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
<tr>
<td width="425" colspan="2" height="5" bgcolor="#3a3a3c" style="background-color: #3a3a3c; font-size: 5px; line-height: 5px;"> </td>
</tr>
</tbody>
</table>
<table width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="125" valign="top" style="padding: 10px 0px 10px 0px; vertical-align: top;">
<img alt="Facebook" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Facebook.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Instagram" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Instagram.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Linkedin" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Linkedin.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Twitter" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Twitter.png" style="text-decoration: none; border: 0;" width="22"></td>
<td width="300" valign="top" align="right" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="CIREBA MLS Regal Realty" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-cireba_mls_regal-realty.png" style="text-decoration: none; border: 0;" width="267"></td>
</tr>
</tbody>
</table>
<table width="auto" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 20px 0px 0px 0px;"><img alt="Think before you print" height="12" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Think-v1.png" style="text-decoration: none; border: 0;" width="128"></td>
</tr>
</tbody>
</table>
</body>
</html>
Like i said in my above comment, you are using heights on td's, rowspan and colspan. Try to stay away from them. I have recoded bits and pieces of your HTML and added a few more things.
<table width="425" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="120" valign="bottom" style="padding: 0px 10px 0px 0px; vertical-align: bottom;"><img alt="Headshot" height="120" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Headshot-v2.png" style="display: inline-block;" width="120"></td>
<td width="295" valign="bottom"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td style="padding: 5px 0px 1px 0px;"><img alt="Signature" height="55" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Signature-v1.png" style="display: inline-block;"></td>
</tr>
<tr>
<td valign="middle" style="padding: 0px 0px 3px 0px; border-bottom: #00aeef 1px dotted; font-family: Arial, sans-serif; font-size: 14px; line-height: 15px; color: #3a3a3c;"><span style="font-weight: bold; font-size: 11pt;">Tony Ashmore</span> <span style="font-weight: normal; font-size: 8pt; color: #00aeef;">REAL ESTATE PROFESSIONAL</span></td>
</tr>
<tr>
<td valign="bottom" style="padding: 3px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 8pt; color: #3a3a3c; line-height: 15px; vertical-align: bottom;"><div nowrap style="white-space: nowrap;"> <span style="color: #00aeef; font-weight: bold; font-size: 6pt;">M</span> 345 324 3333 <span style="color: #00aeef; font-weight: bold;">•</span> Tony#AshmoreAlexander.com<br>
<span style="color: #3a3a3c;">P.O. Box 31673, Grand Cayman KY1-1207, Cayman Islands</span><br>
www.AshmoreAlexander.com</div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table bgcolor="#00aeef" width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#ffffff" width="200" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
<td bgcolor="#ffffff" width="225" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
</tr>
<tr>
<td width="250" bgcolor="#00aeef" valign="middle" style="padding: 8px 0px 5px 10px; vertical-align: middle; background-color: #00aeef;"><img alt="Logo" height="50" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Logo-White-v2.png" style="text-decoration: none; border: 0;" width="195"></td>
<td bgcolor="#00aeef" align="left" valign="top" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#00aeef" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#00aeef" align="right" valign="bottom" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><img alt="Properties For Sale" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-For-Sale-Button-v2.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
<tr>
<td bgcolor="#00aeef" align="right" valign="top" style="padding: 2px 10px 5px 0px; vertical-align: top; background-color: #00aeef;"><img alt="What's Your Home Worth?" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Worth-Button-v1.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="125" valign="top" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="Facebook" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Facebook.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Instagram" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Instagram.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Linkedin" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Linkedin.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Twitter" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Twitter.png" style="text-decoration: none; border: 0;" width="22"></td>
<td width="300" valign="top" align="right" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="CIREBA MLS Regal Realty" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-cireba_mls_regal-realty.png" style="text-decoration: none; border: 0;" width="267"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 20px 0px 0px 0px;"><img alt="Think before you print" height="12" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Think-v1.png" style="text-decoration: none; border: 0;" width="128"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
Hope this works for you.
I am adding webfonts to an email template - I add the webfont from google fonts in the head.
The email html editor I paste the code into - takes the style details and moves them to the end of the email - in turn does not use the web font
any solutions?
here is the code -
note - I have used a few different combinations - including the
<style>
#import url('https://fonts.googleapis.com/css?family=Cabin');
</style>
<table style="background-color: rgb(230, 230, 230);" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" bgcolor="#e6e6e6" class="table_full editable-bg-color bg_color_e6e6e6 editable-bg-image">
<tbody>
<tr>
<td height="10">
<tr>
<td>
<table style="margin: 0px auto; background-color: rgb(112, 174, 76);" cellpadding="0" cellspacing="0" border="0" align="center" width="600" bgcolor="#303f9f" class="table1 editable-bg-color bg_color_303f9f">
<tbody>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<table style="margin: 0 auto;" cellpadding="0" cellspacing="0" border="0" align="center" width="520" class="table1">
<tbody>
<tr>
</tr>
<tr>
<td style="color: #ffffff; font-size: 30px; font-weight: 700; font-family: 'Cabin', sans-serif;; mso-line-height-rule: exactly;" class="text_color_ffffff" align="center">
<div class="editable-text"><span style="font-family: 'Cabin', sans-serif;"><span style="color:#102743">TITLE</span></span>
</div>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td style="color: #ffffff; font-size: 24px; font-weight: 300; font-family: 'Cabin', sans-serif;; mso-line-height-rule: exactly;" class="text_color_ffffff" align="center">
<div class="editable-text"><span style="font-family: 'Cabin', sans-serif;"><span style="color:#102743">SUB HEAD</span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table style="margin: 0 auto;" cellpadding="0" cellspacing="0" border="0" align="center" width="600" bgcolor="#ffffff" class="table1 editable-bg-color bg_color_ffffff">
<tbody>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<table style="margin: 0 auto;" cellpadding="0" cellspacing="0" border="0" align="center" width="520" class="table1">
<tbody>
<tr>
<td height="10"></td>
</tr>
<tr>
<td style="color: #102743; font-size: 14px;line-height: 1.5; font-weight: 500; font-family: 'Cabin', sans-serif;; mso-line-height-rule: exactly;" class="center_content text_color_102743" align="left">
<div style="line-height: 1.5;" class="editable-text"><span style="font-family: 'Cabin', sans-serif;">body</span></div>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td style="color: rgb(112, 174, 76); font-size: 14px; font-weight: 700; font-family: 'Cabin', sans-serif;;" class="text_color_282828" align="center">
<div class="editable-text">Interview Date & Time</div>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td style="color: rgb(16, 39, 67); font-size: 18px; font-weight: 700; font-family: 'Cabin', sans-serif;;" class="text_color_282828" align="center">
<div class="editable-text">TEXT</div>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</tbody>
<tbody>
<tr>
<td height="10"></td>
</tr>
</tbody>
<tbody>
<tr></tr>
<tr>
<td style="color: rgb(112, 174, 76); font-size: 14px; font-weight: 700; font-family: 'Cabin', sans-serif;;" class="text_color_282828" align="center">
<div class="editable-text">text</div>
</td>
</tr>