I have a page but I am not able to determine it''s font style. I checked the view source but nothing is visible. Some lines are commented. Please let me know how to determine the font name:
<html>
<!-- InstanceBegin template="/Templates/inner.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title></title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #ECECEC;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style3 {
font-family: "Arial Unicode MS";
font-size: 16px;
line-height: 30px;
color: #333333;
}
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- InstanceBeginRepeat name="RepeatRegion1" -->
<!-- InstanceBeginRepeatEntry -->
<div align="center">
<!-- ImageReady Slices (Untitled-1) -->
<table id="Table_01" width="950" height="824" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="233" colspan="9"><img src="images/index_01.gif" width="950" height="233" alt=""></td>
</tr>
<tr>
<td height="57"><img src="images/index_02.gif" alt="" width="112" height="57" border="0"></td>
<td><img src="images/index_03.gif" alt="" width="87" height="57" border="0"></td>
<td colspan="2"><img src="images/index_04.gif" alt="" width="137" height="57" border="0"></td>
<td><img src="images/index_05.gif" alt="" width="161" height="57" border="0"></td>
<td><img src="images/index_06.gif" alt="" width="146" height="57" border="0"></td>
<td><img src="images/index_07.gif" alt="" width="130" height="57" border="0"></td>
<td><img src="images/index_08.gif" alt="" width="104" height="57" border="0"></td>
<td><img src="images/index_09.gif" alt="" width="73" height="57" border="0"></td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#FFFFFF"><img src="images/index_10.gif" width="232" height="507"></td>
<td height="307" colspan="6" valign="top" bgcolor="#FFFFFF">
<!-- InstanceBeginEditable name="EditRegion3" -->
<table width="716" height="493" border="0" cellpadding="0" cellspacing="0"><tr>
<td height="493" colspan="2" valign="top"><table width="719" height="529" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="74"><img src="images/parichaya.gif" width="600" height="93"></td>
</tr>
<tr>
<td valign="top"><table width="489" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td valign="top" class="style3">नाव</td>
<td valign="top" class="style3">श्री.शशिकांत जयवंतराव शिंदे</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">वडिलांचे नाव</td>
<td valign="top" class="style3">कै.जयवंतराव भाऊसाहेब शिंदे</td>
</tr>
<tr>
<td height="55"> </td>
<td valign="top" class="style3">आईचे नाव</td>
<td valign="top" class="style3">श्रीमती. कौशल्या भाऊसाहेब शिंदे</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">गाव</td>
<td valign="top" class="style3">हुमगाव, ता.जावली,जि.सातारा. <br>
बॉम्बे लिंक को-ऑप.हौसिंग सोसायटी,<br>
४ था मजला, सेक्टर नं.१७,<br>
वाशी, नवी.मुबंई ४००७०५</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">जन्म </td>
<td valign="top" class="style3">१९ ऑक्टोबर १९६३</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">जन्म ठिकाण</td>
<td valign="top" class="style3">हुमगाव, ता.जावली, जि.सातारा.</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">शिक्षण </td>
<td valign="top" class="style3">बी.कॉम.</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">न्यात भाषा </td>
<td valign="top" class="style3">मराठी, हिंदी व इंग्रजी.</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">पत्नीचे नाव </td>
<td valign="top" class="style3">सौ.तेजल शशिकांत शिंदे</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">अपत्ये </td>
<td valign="top" class="style3">तेजस, साहिल.</td>
</tr>
<tr>
<td width="24"> </td>
<td width="173" valign="top" class="style3">छंद</td>
<td width="270" valign="top" class="style3">शेती,दुग्धप्रक्रिया.<br><br>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr></table>
<!-- InstanceEndEditable -->
</td>
</tr>
<tr>
<td colspan="9" background="images/index_13.gif" height="103"> </td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="112" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="161" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="146" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="73" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
<!-- InstanceEndRepeatEntry -->
<!-- InstanceEndRepeat -->
</body>
<!-- InstanceEnd -->
</html>
the only text i see has style3
firebug will show it too you
it is 'Arial Unicode MS'
but why use .style3 in the css as selector when you can use:
table td{
font-family: "Arial Unicode MS";
font-size: 16px;
line-height: 30px;
color: #333333;
}
there is a style specified
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
So i think it may be verdana.
But style2 is not specified anywhere style3 is defined for the td class so it might be Arial.
Use Firefox Addon - Firebug it will shows style sheets, js and also html
The styles being applied are these two ..
body {
background-color: #ECECEC;
}
.style3 {
font-family: "Arial Unicode MS";
font-size: 16px;
line-height: 30px;
color: #333333;
}
so the font-family is over-written by "Arial Unicode MS" ..
Observe everywhere style3 is being assigned as class to all the <td> tags and style2 is not being used anywhere ..
One thing you can do to get confirmed about my words .. Just delete .style2 .style3 and body styles in your code one by one and observe the changes in Browser ..
There are no lines commented .. To comment in CSS we use /* Comment line here*/ (for a quick reference) Here is a link for reference on comments
You should definitely use the Firebug plugin for Firefox.
Among other things it adds pect element" option to the contextmenu, so you can access all information by right-clicking an element.
If there is no font given via HTML and CSS, the displayed font will probably be your default browser/system font.
Do you mean programmatically via JavaScript, or using a browser tool?
Using a browser tool, the "computed styles" function in "inspect elements" in Firebug is a good bet, as the other answerers point out as well. It will give you something even if there was no font specified at all (in my case, "serif").
However, even the computed style gives you only the specified font-family and not the font actually used. As far as I know from my JavaScript attempts in that area, only IE returns those.
But I'm waiting for your reaction first before delving deeper into this - maybe the Firebug hint is already all you need.
Related
I'm trying to create an email signature and it looks fine in my web browser.
(https://i.postimg.cc/Pq2v5msd/Email-Right.png)
However, when I add it to Outlook, it creates weird padding around my image cells.
(https://i.postimg.cc/d0qTF5fW/Email-Wrong.png)
I'm not sure what step I'm missing in my code. Can I get some help please?
<html>
<head>
<title>Test Email</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Test Email.psd) -->
<table id="Table_01" width="510" height="170" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="7">
<a href=https://www.website.com><img src="https://i.postimg.cc/HnQHs6wP/Email-Test-01.jpg" width="159" height="170" alt=""></td>
<td colspan="2" rowspan="2">
<img src="https://i.postimg.cc/BZDJgnrc/Email-Test-02.jpg" width="313" height="79" alt=""></td>
<td>
<a href=https://www.linkedin.com><img src="https://i.postimg.cc/9FYV6NFD/Email-Test-03.jpg" width="38" height="43" alt=""></td>
<td height="43" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.facebook.com><img src="https://i.postimg.cc/VL8mHc1y/Email-Test-04.jpg" width="38" height="43" alt=""></td>
<td height="36" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href="tel:7777777777"><img src="https://i.postimg.cc/rwycMCKQ/Email-Test-05.jpg" width="110" height="29" alt=""></td>
<td rowspan="2">
<a href="mailto:email#email.com"><img src="https://i.postimg.cc/RZPmF6t9/Email-Test-06.jpg" width="203" height="29" alt=""></td>
<td height="7" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.youtube.com><img src="https://i.postimg.cc/QMH3W8g7/Email-Test-07.jpg" width="38" height="42" alt=""></td>
<td height="22" nowrap></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<a href=https://goo.gl/maps><img src="https://i.postimg.cc/Pq9kWgKR/Email-Test-08.jpg" width="313" height="39" alt=""></td>
<td height="20" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.website.com><img src="https://i.postimg.cc/B6FfMmVQ/Email-Test-09.jpg" width="38" height="42" alt=""></td>
<td height="19" nowrap></td>
</tr>
<tr>
<td colspan="2">
<img src="https://i.postimg.cc/D0KkD19Q/Email-Test-10.jpg" width="313" height="23" alt=""></td>
<td height="23" nowrap></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<div style="background-color:#FFFFFF">
<style>
hr {
height: 1px;
background-color: #9d9d9d;
border: none;
}
div {
padding-top: 5px;
padding-right: 8px;
padding-bottom: 1px;
padding-left: 8px;
}
</style>
<body>
<hr>
<span style="font-size:9pt; font-family: 'Cambria','times new roman','garamond',serif; color:#223488;">This email may contain confidential and/or proprietary information. If you are not the intended addressee or have received this email in error, please inform the sender immediately and destroy this email. Unauthorized copying and/or forwarding of this email is strictly prohibited.
</p>
</div>
</body>
</html>
Hi I'm trying to resize the blue button in the header image, but I can't change its width. It's in a table format inside a <td> i tried using td width also it didn't work. It looks like its fixed to 640px. I tried with style width also but it still didn't work. How else can I edit the width of the blue button? See attached image
As you can see the header image is what im trying to achieve
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0"style="vertical-align:top; width: 201px; height: 36px;"></a></td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;"><a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a></td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;"><a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="center" bgcolor="#008fd3" width="50" height="40"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>, <strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You should change you code
From
<td align="center" bgcolor="#008fd3" width="50" height="40"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
to
<td width="50" height="40" bgcolor="#202020" align="center">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;background: #008fd3;width: 20%;position: absolute;padding: 8px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" rel="noopener" data-sap-hpa-ceimo-ioi-link="73554900100700000840" data-mce-href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" data-mce-style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" data-mce-selected="1">Register today</a>
</td>
Hope can help you
You need to remove display:block
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0" style="vertical-align:top; width: 201px; height: 36px;"></a>
</td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;">
<a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a>
</td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;">
<a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="left" width="50" height="40">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; background:#008fd3; display: inline-block;
line-height: 40px;
padding: 0 1em;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off"
target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a>
</td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect
brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>,
<strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s
being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and
learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019"
target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0"style="vertical-align:top; width: 201px; height: 36px;"></a></td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;"><a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a></td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;"><a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="center" bgcolor="#008fd3" width="50" height="40" style="width: 20%;display: block;"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif;color: #ffffff;text-align: center;text-decoration: none;display: block;width: 100%;padding: 10px 0px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>, <strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<td align="center" bgcolor="#008fd3" width="50" height="40" style="width: 20%;display: block;">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif;color: #ffffff;text-align: center;text-decoration: none;display: block;width: 100%;padding: 10px 0px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a>
</td>
simple My code Replease To Your Code
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.
Table cell widths are staggered in iPhone Gmail.
Is there a way to force Gmail for iPhone to render table cells at their designated widths? Oddly, the multi-slice rows expand to the set 'width:650'. The single slice rows are narrower although they are also set to 'width:650'.
As far as I can tell, my emails look perfect in all desktop email clients - even Outlook! It also looks fine in Mail for iPhone.
I've tried using 'border-collapse:collapse', 'width:100%' on the tables and td's, and finally 'table-layout:fixed'.
This is the HTML:
`
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</title>
</head>
<body>
<img border="0" style="display:block;" src="spacer.gif" width="1" height="1" />
<table bgcolor="#fff" border="0" align="center" cellpadding="0" cellspacing="0" style="table-layout:fixed;width:650px;">
<tbody>
<tr>
<!--/*************** BEGIN LEAD ***************/ -->
<td align="left" valign="top" bgcolor="#fff" width="650"><span id="part1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
<!-- /*************** END LEAD ***************/ -->
</tr>
<!-- /*************** BEGIN HEADER INC ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="650"><span style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#666; line-height:13px;margin-top:2px;"><a style="color:#666; text-decoration:underline;line-height:13px;" href="">XXXXXXXXXXXXXX</a> iXXXXXXXXXXXXXXXXXXX<a style="color:#666; text-decoration:underline;font-size:10px;line-height:13px;" href=""> XXXXXXXXXXXX</a>XXXXXXXXXXXXXXXXX<br />
<span style="font-weight:bold;">XXXXXXXXXXXXXXXXX</span> XXXXXXXXXXXXXXXX</span></td>
</tr>
<tr>
<td width="650"><img src="spacer.gif" width="650" height="46" border="0" style="display: block;" /></td>
</tr>
<tr>
<td><table id="Table_01" width="650" height="47" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="280"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_01.gif" width="280" height="47" alt="Territory Ahead"> </td>
<td width="370"><img border="0" style="display:block;margin:0;padding:0;" src="spacer3_02.gif" width="370" height="47" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td><table id="Table_01" width="650" height="31" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="97"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_03.gif" width="97" height="31" alt="Men's"> </td>
<td width="90"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_04.gif" width="90" height="31" alt="Women's"> </td>
<td width="93"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_05.gif" width="93" height="31" alt="Isabella Bird"> </td>
<td width="132"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_06.gif" width="132" height="31" alt="Men's Clearance"> </td>
<td width="83"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_07.gif" width="83" height="31" alt="Women's Clearance"> </td>
<td width="155"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_08.gif" width="155" height="31" alt="eGift Cards"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-top: solid 1px #b69358;" width="650">
<tr>
<td width="650" style="height:8px;" ></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- /*************** END HEADER INC ***************/ -->
<!-- /*************** BEGIN PROMO ***************/ -->
<!-- /*************** END PROMO ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><!-- /*************** BEGIN MAIN ***************/ -->
<table id="Table_01" width="650" height="1595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="650" height="352" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.jpg" width="650" height="405" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.jpg" width="650" height="408" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_04.jpg" width="650" height="430" alt=""></td>
</tr>
</table>
<!-- /*************** END MAIN ***************/ --></td>
</tr>
<!-- /*************** BEGIN FOOTER INC ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><table width="650" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="650"><table id="Table_01" width="650" height="32" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="125"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="125" height="32" alt=""></td>
<td width="88"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.gif" width="88" height="32" alt=""></td>
<td width="158"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.gif" width="158" height="32" alt=""></td>
<td width="105"><img border="0" style="display:block;" src="spacer_04.gif" width="105" height="32" alt=""></td>
<td width="31"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_05.gif" width="31" height="32" alt=""></td>
<td width="31"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_06.gif" width="31" height="32" alt=""></td>
<td width="112"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_07.gif" width="112" height="32" alt=""></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td align="center" style="padding-top:20px;" width="650"><span style="font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#666; line-height:13px;"><a style="font-size:10px;color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXXX</a> | <a style="font-size:10px; color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXX</a><br />
<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
<tr>
<td width="650"><span style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000;"><img src="spacer.gif" width="650" height="49" border="0" style="display: block;margin:0;padding:0;"></span></td>
</tr>
</tbody>
</table></td>
</tr>
<!-- /*************** END FOOTER INC ***************/ -->
<!-- /*************** BEGIN DISC ***************/ -->
<tr>
<td align="left" valign="top" bgcolor="#fff" width="650"><span style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
<!-- /*************** END DISC ***************/ -->
</tbody>
</table>
</body>
</html>
`
Finally found the solution! For an image to render at full width in the Gmail mobile app, the img tag must contain the style property set to style="display:block;min-width:650px;. This forces the content to full width as the Gmail mobile app is programmed to 'auto-adjust' the size of elements within the email. Thanks for your help on this Jon!
In the sliced rows, you don't have width="" set in your <td> tags. I know it is in the image tags, but it might make a difference.
Also try using style="margin: 0; border: 0; padding: 0; display: block;" on your images, it may help.
Try those 2 things - if they don't help, update and re-post the code so we can eliminate those potential issues. A screenshot/image of the error might also help.
Can I somehow turn:
<!-- top blue line -->
<tr bgcolor="#000066">
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
</tr>
into something more like:
<tr class="blueline"></tr>
and the CSS will take care of inserting all the <td>s?
If there's a logical and simple way of doing this in ASP.NET/C# where I keep the formatting in one central location I would be open to hearing it but I'd prefer to just use CSS if at all possible.
EDIT:
Based on the answers and comments I'll just post what I have for the nested tables which I like the look of and I guess if its best to use just go about it a totally different way that's fine; and as far as using a web control that might be the best idea but I'm not sure how to use a web control and then actually be able to put different content into sections of the web control as if it was a static html table. I need to be able to edit the middle section for the column names, textboxes, and datatypes.
Code:
<table width="362" border="0" cellspacing="0" cellpadding="0">
<!-- top blue line -->
<tr bgcolor="#000066">
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
</tr>
<!-- top white space -->
<tr>
<td width="120" valign="top" height="10"></td>
<td width="1" height="10"></td>
<td width="120" valign="top" height="10"></td>
<td width="1" height="10"></td>
<td width="120" valign="top" height="10"></td>
</tr>
<!-- middle row / content -->
<tr>
<!-- Labels for columns go inside this td -->
<td width="120" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr valign="top">
<td>
<p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#000063">
ColumnNames
</font></font></b></font></p>
<!-- put labels in here -->
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
cell_id<br />
cell_description<br />
cell_name
</font></font></p>
</td>
</tr>
</table>
</td>
<td width="1" bgcolor="#FFCF63" height="1"></td>
<!-- textboxes go inside this td -->
<td width="120" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr valign="top">
<td>
<p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000063">
Textboxes
</font></b></font></p>
<!-- put textboxes in here -->
<p><font size="1" face="Verdana, Arial, Helvetica, sans-serif">
<asp:TextBox ID="TextBox6" runat="server" Width="100px"></asp:TextBox><br />
<asp:TextBox ID="TextBox7" runat="server" Width="100px"></asp:TextBox><br />
<asp:TextBox ID="TextBox8" runat="server" Width="100px"></asp:TextBox>
</font></p>
</td>
</tr>
</table>
</td>
<td width="1" bgcolor="#FFCF63" height="1"></td>
<!-- datatypes for columns go inside this td -->
<td width="120" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr valign="top">
<td>
<p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#000063">
Data Types
</font></font></b></font></p>
<!-- put datatype descriptions [varchar(50),int,etc] in here -->
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
INT<br />
VARCHAR(50)<br />
VARCHAR(10)
</font></font></p>
</td>
</tr>
</table>
</td>
</tr>
<!-- bottom white space -->
<tr>
<td height="10"></td>
<td height="10" width="1"></td>
<td height="10"></td>
<td height="10" width="1"></td>
<td height="10"></td>
</tr>
<!-- bottom blue line -->
<tr bgcolor="#000066">
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
</tr>
</table>
I would suggest writing a single javascript function for this and that function can be invoked on any page that you desire. This will reduce the need to write redundant code everywhere and make updates easier.
The CSS will apply to every page that references the css file unless it is specifically overridden in that page. You would move all your styling to the css file and basically have as little as possible in the table layout. Keep in mind that tables are best used for tabular data like reports. If you are using nested tables to handle positioning then this can be better accomplished through css and div tags.
CSS can't add td's into a tr so you won't be able to take that approach. You could use jquery/javascript to implement this but if you can use asp/c# there is something called a web user control that can hold html and you just have to put one line of code on your actual page to pump in the table.
For this particular example, it sounds like a top border on either the table or the first non-header row would be perfect. Assuming a table somewhat like:
<table>
<thead>
<tr>
<th>Some Column</th>
<th>Some Other Column</th>
</tr>
</thead>
<tbody>
<!-- rows go here -->
</tbody>
</table>
, you could just use a quick:
tbody tr:first-of-type {
border-top: 1px solid blue;
}
CSS Can't do what you have described.
However, if you refactor your markup to use tables correctly, what you want is pretty simple. Nested tables are very rarely warranted.
/*Set Basic font styles for table*/
#data {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
/*Provides the border and spacing*/
padding: 20px 0;
border-top: 1px solid #006;
border-bottom: 1px solid #006;
}
/*Give the table headers a bit of color*/
#data th {
color: #000063;
text-align: left;
font-size: 13px;
}
/*set the width of our cells*/
#data th,
#data td {
width: 120px;
}
/*Add some right padding to the first colum*/
#data tr>th:first-of-type,
#data tr>td:first-of-type {
width: 114px;
padding-right: 6px;
}
/*Add some left padding to th last colum*/
#data tr>th:last-of-type,
#data tr>td:last-of-type {
width: 114px;
padding-left: 6px;
}
/*Set the input width*/
#data input[type="text"] {
width: 100px;
}
<table border="0" cellspacing="0" cellpadding="0" id="data">
<thead>
<tr>
<th>Column Names</th>
<th>Textboxes</th>
<th>Data Types</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell_id</td>
<!-- Replace input tags with your asp:textbox control -->
<td><input type="text" /></td>
<td>INT</td>
</tr>
<tr>
<td>cell_description</td>
<td><input type="text" /></td>
<td>VARCHAR(50)</td>
</tr>
<tr>
<td>cell_description</td>
<td><input type="text" /></td>
<td>VARCHAR(10)</td>
</tr>
</tbody>
</table>