There is everything fine but i'm not able to remove useless space. How to remove it anybody can solve it
By the way i have given picture below which part i want to remove there is useless white space and some space around phone area.
<table style="width: 100%; border: 10px solid #bdbdbd; background: #fff; font-family: Arial, Helvetica, sans-serif; color: #444;">
<tr>
<td width="50%" valign="top" border="0px">
<div id="masterEmailData">
<table style="background:#e7e7e7; height:auto; width:100%; height:100vh;">
<tr>
<td style="text-align:center"><img src="{9}/Content/content/image/logo1.png" class="img-responsive" style=" padding:0px 5px; max-width:250px;" /></td>
</tr>
<tr>
<td>
<p style="text-align: center; background:#074f8e; padding:12px; color:#fff; font-size: 18px; margin: 5px 0">Phone</p>
</td>
</tr>
<tr>
<td style="text-align:center"><img src="../Content/content/image/emailImg.png" style=" padding:0px 5px; max-width:250px;" /></td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Thanks You!
What you are looking for are the properties cellpadding and cellspacing. Set them to 0 and the white space should be gone.
Here is an explanation what they actually do.
Related
I have been scouring the internet for around 2 days now and I can't find anything about an issue. I am facing with extra space on the LEFT and RIGHT side of images in Outlook desktop.
The extra space, affects the ability of my table/columns to be displayed side by side. If I shorten the width of any cell/row/table to the exact width of that space (circled in red in image) they suddenly pop in side by side. It is this particular little space I can't figure out how to remove. It is like there is a default value set somewhere on something I am unaware of.
Sorry about some images not being uploaded anywhere, these ones weren't really important.
2 How it appears in every other email client.
3 How it is appearing in outlook only.
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-spacing: 0px;
box-sizing: border-box;
}
#media only screen and (max-device-width: 480px) {
table[class=responsive] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
table[class=left] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
table[class=right] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
img {
width: 100% !important;
}
}
p {
padding: 10px 10px 10px 10px;
}
a {
color: #333333;
}
a:visited {
color: #000000;
}
<html>
<head>
<title></title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<body style="font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;">
<!-- CENTER TABLE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="660" border="0" cellspacing="0" cellpadding="0" class="responsive">
<tr>
<td bgcolor="#FFFFFF"><img src="10324612_ptgray.jpg" align="left" style="vertical-align: top; display:inline-block;"></td>
</tr>
<tr>
<td bgcolor="#666666" height="50">
<p style="text-align: center; color: #FFFFFF; font-size: 24px; line-height: 24px;"><b>THE JULY ISSUE OF <em>PHYSICS TODAY</em> IS AVAILABLE</b><br></p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" cellpadding="0" align="left">
<tr border="0" cellspacing="0" cellpadding="0" align="left">
<td border="0" cellspacing="0" cellpadding="0" align="left"><img src="https://i.stack.imgur.com/BVa1S.png" width="220" border="0" cellspacing="0" cellpadding="0" align="left" style="vertical-align: top; display: block; max-width: 100%;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">Advertisement</p>
<p style="color: #333333; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td style="border: 1px solid #CCCCCC;">
<a href="#">
<table class="left" width="438" border="0" cellspacing="0" align="left">
<tr>
<td valign="middle" height="287">
<p style="font-size: 50px; line-height: 50px; text-align: center; padding: 0px 0px 0px 0px;">View the November Issue Online</p>
</td>
</tr>
</table>
<table class="right" width="220" border="0" cellspacing="0" align="right">
<tr>
<td><img src="pt-cover.jpg" style="vertical-align: top; display: block;"></td>
</tr>
</table>
</a>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" align="left">
<tr>
<td><img src="https://i.stack.imgur.com/BVa1S.png" width="220" height="220" style="vertical-align: top; display: block;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">WHITEPAPER</p>
<p style="color: #C8544B; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Restoring sight with retinal prostheses</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Large amplitude oscillatory shear: Simple to describe, hard to interpret</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Who owns a scientist's mind?</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Magnets separate mirror-image molecules</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Concerns about aging plutonium drive need for new weapon cores</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" align="left">
<tr>
<td><img src="https://i.stack.imgur.com/BVa1S.png" width="220" style="vertical-align: top; display: block;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">Advertisement</p>
<p style="color: #333333; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE" style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<p><strong>Help desk information:</strong><br><br>If you need technical assistance, please do not reply to this automated email; click here.</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE" style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<p>This email has been sent to %%email%%. In case you are not able to click on the links above, please go to: http://physicstoday.advanced-pub.com</p>
<p>Physics Today is published by the American Institute of Physics, One Physics Ellipse, College Park, MD. 20740. Send publication questions to pteditors#aip.org. The information contained in this e-mail
message is intended only for the personal use of the recipient(s). For Information on American Institute of Physics' Privacy Policy please click here. We appreciate your interest in our publication and encourage you to contact us with
your comments or suggestions. Thank you!</p>
<p>To unsubscribe, please click here.</p>
</td>
</tr>
</table>
<!-- CENTER TABLE -->
</td>
</tr>
</table>
</body>
</html>
According to my test and search, it not img's reason, might be table.
You could refer to the below code:
<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
<tr>
<td height="40" width="22" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
</a>
</p>
</td>
<td height="40" width="180" align="left">
<table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
<tbody>
<tr>
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
Text goes here
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td height="40" width="36" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" target="_blank">
<img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
</a>
</p>
</td>
</tr>
</tbody>
</body>
For more information, please refer to this link:
Outlook table spacing in HTML email - no usual tricks working
Table style border- outlook 2010 adds an extra space
For some reason when I set the width for a cell in a table it does not affect the width of the cell. FYI I'm using inline styles for mailers.
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;">
<tr>
<td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td>
</tr>
<tr>
<td width="80%" style="padding: 20px 0; background-color: blue;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td>
</tr>
<tr>
<td width="80%" style="padding: 0 55px; padding-bottom: 20px;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td>
</tr>
<!--[if mso]>
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-- -->
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
</table>
https://jsfiddle.net/xmbsemje/
td's default behaviour is to fill the width of the table, so if you only have one <td> per row <tr>, it would always go full width of the table no matter what you do.
One approach is to create a table inside that td and put the width on table instead. Also padding left and right doesn't work in emails, so creating tables with defined width and centering them is the best option.
The other approach would be to have spacer cells on left and right to give you padding space. I modified your code (just the text cells with blue/red and white background) following the first approach.
Please note: I didn't fix all of your code, just change a couple to get you started
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;">
<tr>
<td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td>
</tr>
<tr>
<td align="center" style="padding: 20px 0; background-color: blue;">
<table border="0" cellpadding="0" cellspacing="0" style="width:80%;">
<tr>
<td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0;">
<table border="0" cellpadding="0" cellspacing="0" style="width:80%;">
<tr>
<td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td>
</tr>
</table>
</td>
</tr>
<!--[if mso]>
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-- -->
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
</table>
last td width 550px so not effect your width 80%;
so you can add width on span tag
This is an error which only occurs in Outlook 2010. This email template seems to work on 90% of devices and browsers.
The graphic below is an example of how it looks in Outlook 2010. The crude blue draw over is intended to show how it should look. You can also view the fiddle for the entire code which displays that section how it is supposed to be displayed.
http://postimg.org/image/zacxr5acr/
Here's the full fiddle link http://jsfiddle.net/Nexus1234/bxp14vcw/
Note - the below sample code is only the relevant section and sending this on its own in an email doesn't cause the issue, it's somewhere within the complete html which is in the jsfiddle
<!-- Two Column (Images Stacked over Text) -->
<table align="center" bgcolor="#EEEEED" border="0" cellpadding="0" cellspacing=
"0" class="deviceWidth" width="580">
<tbody>
<tr>
<td class="center" style="padding:10px 0 0 5px">
<table align="left" border="0" cellpadding="0" cellspacing="0" class=
"deviceWidth" width="49%">
<tbody>
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<img alt="" class="deviceWidth" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/forum.jpg"
style=
"border-radius: 4px; width: 267px; border-width: 0px; border-style: solid; height: 200px;" /></p>
</td>
</tr>
<tr>
<td style=
"font-size: 12px; color: #6f6f6f; font-weight: normal; text-align: left; font-family: arial,helvetica neue,helvetica,sans-serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table style="width:100%;border-bottom: 1px solid #333">
<tbody>
<tr>
<td style="padding:0 10px 10px 5px" valign="top">
<img alt="" id="circle" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/point.png"
style=
"border-width: 0px; border-style: solid; float: left; width: 40px; height: 40px;" /></td>
<td style="padding:0 10px 10px 0" valign="middle">
<h1 style=
"text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif">
The Roman Forum<br />
</h1>
</td>
</tr>
</tbody>
</table>
<p><span style=
"font-family:arial,helvetica neue,helvetica,sans-serif;">Here,
in a small space hemmed in by the great rocks of the Capitoline
and Palatine hills, the greatest names of Roman history fought
for power and prestige. Amidst an extraordinary concentration
of famed and marvellous buildings jostling for space, you will
walk where Antony spoke over Caesar’s body, Cicero
delivered stinging orations and the legions processed in
triumph.</span></p>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class=
"deviceWidth" width="49%">
<tbody>
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<img alt="" class="deviceWidth" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/villa-deste-tivoli.jpg"
style=
"border-radius: 4px; width: 267px; border-width: 0px; border-style: solid; height: 200px;" /></p>
</td>
</tr>
<tr>
<td style=
"font-size: 12px; color: #6f6f6f; font-weight: normal; text-align: left; font-family: arial,helvetica neue,helvetica,sans-serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table style="border-bottom: 1px solid #333">
<tbody>
<tr>
<td style="padding:0 10px 10px 5px" valign="top">
<img alt="" id="circle" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/point.png"
style=
"border-width: 0px; border-style: solid; float: left; width: 40px; height: 40px;" /></td>
<td style="padding:0 10px 10px 0" valign="middle">
<h1 style=
"text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif">
The Villa Adriana & The Villa D'Este</h1>
</td>
</tr>
</tbody>
</table>
<p><span style=
"font-family:arial,helvetica neue,helvetica,sans-serif;">Experience
the opulence of two ages in a trip out to the inspiring
hillside retreat of Tivoli. In the morning, we visit the
massive, brilliantly preserved and sprawling villa of the
Emperor Hadrian, where luxury on an unparalleled scale centres
on a fantasy rendition of the River Nile. The afternoon is
spent amidst the fountains and gardens of the enchanting
Renaissance Villa d’Este.</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- End Two Column (Images Stacked over Text) -->
One suggestion would be to always keep in mind the 20px rule. Outlook loves to add spacing around tables, making aligned tables a hassle.
My usual equation is,
(Wrapper table - 20px) / 2.
Your example:
(580 - 20px) = 560 / 2.
Percentages are tricky, I would set your tables as a fixed width. Your deviceWidth class will handle your widths on mobile anyway.
I would suggest applying this too all of your aligned tables.
If that doesn't work, let me know.
I am trying to create an email template.
For the bottom and top headers I wish to use round corners but the only way that I have managed to do this now is using gif files...How can I do this without on the code below ?
(Right now the table border is incomplete up and down, not closed).
Also I have tried adding a gif image in the center
<td valign="top" align="center"><img src="file:///C|/Users/the/Desktop/my GIF.gif" width="288" height="146"></td>
And I would like to have background color around the edges or behind the image considering that it is transparent - and also on the bottom.
Any other edits on this Template more than welcome.
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_blank">
<title>==</title>
</head><body>
<table width="614" border="0" align="center" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#656565;">
<tbody><tr>
<td valign="top" align="center"><img src="file:///C|/Users/the/Desktop/my GIF.gif" width="288" height="146"></td>
</tr>
<tr>
<td valign="top" style="border-left:1px solid #cbd6dc;border-right:1px solid #cbd6dc; padding:0 18px 20px; text-align:left;">
<table width="576" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<tbody><tr>
<td valign="top" style="font-size:14px; padding:10px 0 15px; font-weight:bold">Hello user,<br></td>
</tr>
<tr>
<td valign="top" style="font-size:19px; padding:10px 0 16px 0; text-align:center;color:#449AC2; ">Congragulations ! </td>
</tr>
<tr>
<td valign="top" style=" padding:0 0 15px;">
<table style="width:554px; border:#d3dde2 1px solid; background:#eef3f6;" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="top"><div style="font-size:12px; padding:16px 25px 0 0; line-height:20px; text-align:left;padding-bottom:20px;"><a href="http://www.website.com/signup?sname=zmail23&ISP=gmail&invitation_key=201307f998225213537deb9e8a3c5930&tt=773&sub=755&referral=bacorichard&tp=8&hr=2013072111&cid=23&source=5" style=" color:#666; text-decoration:none">.
<p>Congragulations my text here <br>
<br>
</p></a></div></td>
</tr>
<tr>
<td valign="bottom" style="padding:0 0 50px 0"><a target="_blank" style=" border:2px solid #fff; padding:5px 6px; background:#f7b225; color:#ffffff; font-size: 16px; font-weight: bold; text-align: center;text-decoration:none; " href="http://www.website.com/signup?sname=zmail23&ISP=gmail&invitation_key=201307f998225213537deb9e8a3c5930&tt=773&sub=755&referral=bacorichard&tp=8&hr=2013072111&cid=23&source=5"> Take me there</a></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td valign="top" style="padding-bottom:18px;">
<div style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:left; padding:0 ; margin:0;color:#656565">Regards,</div>
<div style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:left; padding:0; margin:0;color:#656565">The Team</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td valign="top" style="font-size:11px; font-family:Arial, Helvetica, sans-serif; line-height:16px; padding:10px 0; background:#f6f7fa;border-left:1px solid #cbd6dc;border-right:1px solid #cbd6dc;border-top:1px solid #cbd6dc; padding:15px 18px 0 18px; text-align:center;">
</td>
</tr>
<tr>
<td valign="top"><img align="top" src="width="614"" height="23"> </td>
</tr>
</tbody></table>
<img src="http://signup.website.com/signup/open_invitation/2013072111/773/755/23/8?isp=gmail&source=5" style="display:none;visibility:hidden;" height="0" width="0/">
</body></html>
You can add border-radius property to your table style.
style="font-family:Arial, Helvetica, sans-serif; font-size:12px;border:1px solid #cbd6dc;border-radius: 5px;"
To use rounded corners you can use CSS like this on most elements:
border-radius: 5px;
JSFiddle example:
http://jsfiddle.net/CbfvQ/
The higher the number the more rounded the corners become.
If you want inline style rather than CSS methods then add to the style like this:
style="border-radius:5px;border:1px solid #cbd6dc;"
Be sure to check the browser compatibility of this feature:
http://caniuse.com/border-radius it is widely supported now :)
I am working on HTML email and trying to center a green TD in a white TR so that there's a 20px white margin on the left and right of the green box.
I tried setting TD width for the green portion and setting margin 0 auto but the green just expands to the width of the TR.
Tried putting in 2 more TDs to push the green TD into the center and that didn't work either.
Including the code snippet, am having trouble with the TR that has #a6d971.
<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
<tbody>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
</td>
</tr>
<tr bgcolor="#fff" height="75">
<td valign="top" style="text-align:center;">
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
Regular sales happen every day
</p>
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
9am - 11pm
</p>
</td>
</tr>
<tr bgcolor="#fff" height="75" padding="10">
<td bgcolor="#000" width="20"></td>
<td bgcolor="#a6d971" width="300" style="margin: 10;">
</td>
<td bgcolor="#000" width="20"></td>
</tr>
<tr bgcolor="#fff">
<td valign="top">
<table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
<tbody>
<tr>
<td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
<h3>Nine # Nine</h3>
<p>Fuel up! Dresses, tunics and other items including:</p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
</td>
</tr>
</tbody>
</table>
Switch to DIV's and CSS, most emails client supports styles pretty well, you can use a DIV inside your TD element, it'll be easy to center or do other things you might want.
For Example
<tr style="background-color: white;">
<td style="background-color: green;">
<div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
</td>
</tr>
Also note if you use DIV's you can also avoid tables.
Hack on top of a hack.
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
This is stuff.
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zy6GU/
Incidentally, the same thing should work with a DIV:
<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>
http://jsfiddle.net/zy6GU/1/
If you HAVE to use tables, might as well abuse them a little:
<table><tr align="center">
<td width="50%">one</td>
<td style="background-color:green">two</td>
<td width="50%">three</td>
</tr></table>
http://jsfiddle.net/mblase75/yntfu/
I'm not a CSS expert but this works for me (with no extra tags) :
<table>
<tr style="background-color: white; border: 1px solid black;">
<td style="background-color: green; display: block; margin: 0 20px;">
<!-- Content -->
</td>
</tr>
</table>
What are you talking about 'for emails'? You mean an email address, like Email Me? If so you'd want some css that centers the link in the TD, or in combination with colspan on the TD.