How can I center the all child tables in the middle of the main parent table? What's the best way the add this blue bar between each headline with 10px margin or padding on the side between headlines?
<table width="600" border="1" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three
<br />headline</td>
</tr>
</table>
</td>
</tr>
</table>
You can add a parent table around the smaller tables, give it a width and center it. You can give the table a width if you want (total of all child tables) width="285" in this case or go without the width, either works. Try the code below:
<table width="600" border="1" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>
<table border="0" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three
<br />headline</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
One thing i noticed after doing this is if you make the template responsive you dont have to worry about the menu as it will stack by itself.
Hope this is what you were looking for.
td {
border-right: 4px solid #007cb0;
}
td:last-child {
border: none;
}
<table width="600" border="0" cellpadding="10" cellspacing="0" align="center">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one<br />headline</td>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two<br />headline</td>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three<br />headline</td>
</tr>
</table>
Related
I've been playing around and can't figure this out, so some advice would be greatly appreciated!
https://codepen.io/chaser87/pen/ZEQvydw
What I want to know deals with just the section headed by Meet your Department. When you shrink down this email, it stacks pretty much how I want it. However, I want to reorder the image and the block of copy in that section. Basically, I want the picture first, then the copy. I've tried doing nth-of-type stuff with elements but isn't working.
For extra background, each section is a 100% table, with a 600 px table within, then another 100% table within.
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<title>Boundless opportunities</title>
<style type="text/css">/*<![CDATA[*//* CLIENT-SPECIFIC STYLES */
body, table, td, hr, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
#media screen and (max-width: 616px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
td {
display: block !important;
}
td img {
display: block !important;
width: 60% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0px 0px 0px 0px !important;
}
h3 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.paragraph-copy {
padding: 20px 15px 20px 15px !important;
font-size: 100% !important;
line-height: 25px !important;
}
.paragraph-align {
text-align: center !important;
}
.social-icons {
padding: 5px 5px 10px 5px !important;
display: inline !important;
width: 15% !important;
}
}/*]]>*/
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table" role="presentation" width="600px">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><img alt="It's your time. Apply in July! Join the Cowboy family as part of #okstate25 and you'll get a free T-shirt!" class="fluid-table" src="https://dummyimage.com/1200x696/000/fff" style="width: 600px;"/>
</td>
</tr>
<tr>
<td class="paragraph-copy" style="padding: 5px 10px 10px 10px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; text-align: left;">
<p>{{First}},</p>
<p>We're excited to welcome you to the {{collegename}}! We look forward to seeing what the future holds for you as a {{major}} major within the Department of {{department}}.</p>
<p>We are here to assist you and look forward to working with you during your time at Generic State University. If we can help you in any way, please let us know. Again, congratulations on taking the next step and joining the {{college}}! </p></td>
</tr>
<!--FIRST ROW WITH PIC-->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 0px 10px 0px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="center" style="padding-top: 15px">
<!--CONTENT-->
<img src="https://dummyimage.com/220x220/000/fff" style="width: 220px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-align paragraph-copy" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 5px 10px 20px 10px"><!--CONTENT-->
<h3>
<span>Meet Your Academic Advisor</span>
</h3>
<p>{{Advisor_Name}}</p>
<p>{{Advisor_Address}}</p>
<p>{{Advisor_Phone_Number}} </p>
<p>{{Advisor_Email}}</p>
<p>{{Advisor_Bio Page}}</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center" style="vertical-align: top;"><!--TWO COLUMNS-->
<table align="" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 10px 10px 10px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="58%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-copy paragraph-align" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 10px 10px 10px 10px"><!--CONTENT-->
<h3>
<span>Meet Your Department</span>
</h3>
<p>The {{Department}} is looking forward to your addition to the {{College}} family! </p>
<p>The main office for your department is located in {{department_address}} and you can reach them by phone at {{department_number}} or by emailing {{department_email}}.</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<!--CONTENT-->
<td align="center" style="padding: 15px 10px 10px 10px;"><img src="https://dummyimage.com/200x200/000/fff" style="width: 200px"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 5px 10px 0px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="center" style="padding: 20px 10px 0px 10px">
<!--CONTENT-->
<img src="https://dummyimage.com/210x210/000/fff" style="width: 210px">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-copy" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 5px 10px 0px 10px"><!--CONTENT-->
<h3>
<span>Mark Your Calendar</span>
</h3>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--CONTENT-->
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 15px 0px 5px 0px; vertical-align: top;"><hr style="border-top: 2px solid #000000; width: 50%;">
<p style="padding-top: 15px;">Bookmark these calendars to stay informed about what's going on:</p>
<p><a style="color: #FE5C00" href="#"><strong>Academic College Calendar</strong></a><strong> | <a style="color: #FE5C00" href="#">College Calendar</a> | <a style="color: #FE5C00" href="#">Athletics Calendar</a></strong></p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table" role="presentation" width="600px">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><img alt="It's your time. Apply in July! Join the Cowboy family as part of #okstate25 and you'll get a free T-shirt!" class="fluid-table" src="https://dummyimage.com/600x95/0fe5c1/fff" style="width: 600px; display: block;" /></td>
</tr>
<!--FIRST ROW WITH PIC-->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="background-color: black">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table align="" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td valign>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="left" style="padding: 10px 0px 10px 10px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 12px; line-height: 18px; color: #FFFFFF"><!--CONTENT-->
<p>College of Engineering <br>
Generic State University<br>
136 Whatever Building | Orlando, FL 00000</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="38%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between"><!--CONTENT-->
<td align="right" style="padding: 25px 15px 20px 0px;"><img alt="OSU's Facebook Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Twitter Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Instagram Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Snapchat Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /></td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add reverse class to the cell containing Meet Your Department section's two columns and use the following CSS in your media query:
td:not(.reverse) {
display: block !important;
}
td.reverse {
display: flex;
flex-direction: column-reverse;
}
I want one tr tag on another tr tag.
HTML
<table width="600" align="center">
<tbody>
<tr>
<td height="10" align="center" style="background-color:#f1f1f1;"></td>
</tr>
<tr>
<td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;">
<table width="600" border="0" align="center">
<tbody>
<tr>
<td>
<table width="600" align="center">
<tbody>
<tr>
<td valign="top" align="center" id="1" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; line-height: 30px; letter-spacing:0.5px; text-align:center; padding-bottom: 0px; padding-left: 0px; padding-top: 60px;">
<span class="wrap_textbox" style="font-weight: lighter; font-size: 26px;"> Some Text</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I want the text to be on the top of the background div.
I am not actually sure what are you looking for but if you want to show your text on first background have a look
$(document).ready(function(){
$(".wrap_textbox").clone().appendTo("#top");
});
table tr td table tr td .wrap_textbox{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table width="600" align="center">
<tbody>
<tr>
<td height="10" align="center" style="background-color:#f1f1f1;" id="top"></td>
</tr>
<tr>
<td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;">
<table width="600" border="0" align="center">
<tbody>
<tr>
<td>
<table width="600" align="center">
<tbody>
<tr>
<td valign="top" align="center" id="1" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; line-height: 30px; letter-spacing:0.5px; text-align:center; padding-bottom: 0px; padding-left: 0px; padding-top: 60px;">
<span class="wrap_textbox" style="font-weight: lighter; font-size: 26px;"> Some Text</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
Your question is pretty confusing but why not use <th> to place the text above like so:
<table width="600" align="center">
<tr style="background-color: #f1f1f1;">
<th style="font-weight: lighter; font-size: 26px;">
Some Text
</th>
</tr>
<tr>
<td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;">
<table width="600" border="0" align="center">
<tr>
<td>
more text
</td>
</tr>
</table>
</td>
</tr>
</table>
You can then adjust the <th> style in the CSS to how you want it to be displayed.
I am working on an e-mail template that includes 2 links to a website and an e-mail address. They are both of varying widths and have it setup so that they're both beside each other and centred down the middle.
Recently ran into a problem when testing with Outlook and saw that the boxes were not centred and rather pushed to the left and right.
Here are some screenshots of what is happening:
Browser / Other E-mail Clients:
Outlook / Word Templating Engine:
The Code:
<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:22px; " align="center">
<table class="contact_links_container" border="0" cellspacing="0" cellpadding="0" width="580" align="center" style="margin:auto; ">
<tr>
<td align="center">
<div class="templateEdit" id="contact_links">
<table class="contact_button_container" style="margin: auto;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<a href="http://www.domain.com">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" height="20" align="center" valign="middle">
<a href="http://www.domain.com/">
<img src="/images/icn_globe.png" border="0" alt="" width="18" height="18" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="http://www.domain.com/">www.domain.com</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
<table class="contact_button_container" style="margin: auto;" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" align="center" valign="middle">
<a href="mailto:newaccounts#domain.com">
<img src="images/icn_grey_mail.png" border="0" alt="" width="21" height="20" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="mailto:apisupport#domain.com">Email</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
Does anyone have any ideas on how I can format it so that it works appears in Outlook as it does in the 1st image?
Specify the width for div and td wherever needed. It should work, outlook mail client will set the element width to 100% with reference to body if not specified.
I have the following HTML:
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#C5C5C5">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628618/image01_et7dqm.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT ABOUT SOMETHING YET TO BE CONFIRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images - text left -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td align="right">
<a href="#"><img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" border="0" style="border-radius: 0px; width: 20px; display: block;" class="deviceWidth" />
</td>
</tr>
</table>
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#E1E1E1">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628616/image1.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT YET TO BE CONFRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
which renders as follows
As you can see at the bottom I have a triangle which I'm trying to position so it overflows on to the next box, unfortunately I can not for the life of me get it to sit correctly, i.e the white space between the dark shade and lighter shade of gray to dis-appear can someone give me a hand please the end result is to look like this :
First of all it is recommended not to use tables for formatting page sections. In this case you can set the Parent of triangle as a relative positioned element with height of 0px and position triangle as absolute element. So:
<div class="deviceWidth" style="width:580px;position:relative;height:0;margin-right:auto;margin-left:auto;">
<img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" style="border:0;position:absolute;top:0;right:20px;border-radius: 0px; width: 20px;" class="deviceWidth">
</div>
also please note that :
remove the display:block from image
set border:0 inside styles not as a separate attribute
I have added margin-right:auto and margin-left:-auto to align div in center of screen
I am designing the email newsletter template .
I created two buttons left and right side equally but it is not fit equal horizontal .
Here is html my code.
the output shows correctly in gmail but the out look not supported.
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I want align equally in both side and need to support the outlook mail
Wrap your code in a table and put the two tables containing the buttons in two separate td.
Here is the code sample and fiddle
<table>
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank">
<font size="1" face="Arial">
<span style="font-size:12px;">
<font color="white">
<span style="display:block;">
<b>GET A QUICK QUOTE</b>
</span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Add float:left in both your <table> tags and it will do the trick.
replace your code with mine
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;float:left; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse;float:left; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>