I am practicing HTML emailing lately and I have come up with some trouble using tables. Right now, the content of a <td> is bigger than the <td> itself.
So how do you make a td adjust its size according to its content? I feel like the rest of the td's on this email worked just fine. Notice that what is giving me trouble is an <a> to which I have given some padding to style as a button.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 45%;">
<table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;">
<tr>
<td>
<img src="house1.jpg" width="300" height="200">
</td>
</tr>
<tr>
<td align="center">
<h6 style="font-size: 16px; font-weight: 900; margin: 0; padding: 10px 10px 10px 10px;">Modern House of such style</h6>
<p style="font-size: 14px; font-weight: 400; margin: 0; padding: 0 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.</p>
</td>
</tr>
<tr>
<td align="center">
CLICK HERE
</td>
</tr>
</table>
</td>
</tr>
</table>
This last td is the one giving me some trouble. Any ideas?
Use Display property for content like display:block; or display:inline-block check this example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 45%;">
<table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;">
<tr>
<td>
<img src="house1.jpg" width="300" height="200">
</td>
</tr>
<tr>
<td align="center">
<h6 style="font-size: 16px; font-weight: 900; margin: 0; padding: 10px 10px 10px 10px;">Modern House of such style</h6>
<p style="font-size: 14px; font-weight: 400; margin: 0; padding: 0 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.</p>
</td>
</tr>
<tr>
<td align="center">
CLICK HERE
</td>
</tr>
</body>
</html>
Related
This is a silly problem, but have tried everything I can think of and still can't figure out how to center these two cells of text in Outlook 2003.
Here's a link to the full html file: https://github.com/justintemps/flash-updates/blob/master/dest/index-prod.html?ts=4
The offending (part that won't center) is below.
<table class="body" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0 auto 0 auto; text-align: center;">
<tbody>
<tr>
<td align="center" style="text-align: center;">
<center>
<table class="bodyContainer" align="center" width="600" style="margin: 0 auto; max-width: 600px; padding-top: 5px; table-layout: fixed; text-align: center; width: 100%;">
<tbody>
<tr align="center">
<td class="mainImageContainer" align="center" style="margin: 0 auto; text-align: center;">
<!-- INSERT LINK HERE -->
<a href="" target="_blank">
<!-- INSERT IMAGE URL HERE -->
<img class="mainImage" width="600" alt="" src="http://www.ilo.org/wcmsp5/groups/public/---dgreports/---dcomm/documents/image/wcms_484941.jpg" style="margin: 0 auto; max-width: 600px; padding-top: 5px; table-layout: fixed; text-align: center; width: 100%;">
</a>
</td>
</tr>
<tr align="center">
<td class="mainTitleContainer" align="center" width="600" style="margin: 0 auto; text-align: center;">
<!-- INSERT LINK HERE -->
<a class="noDecorate" href="" target="_blank" style="text-decoration: none;">
<h2 class="mainTitle" style="font-family: Helvetica, Arial, sans-serif; color: #2f2f2f; margin: 0; padding-top: 5px; padding-bottom: 5px; text-align: left;">The International Labour Conference 2016 starts</h2>
</a>
</td>
</tr>
<tr align="center">
<!-- INSERT SUMMARY HERE -->
<td class="bodyText" align="center" width="600" style="font-family: georgia, Palatino, 'Times New Roman', serif; font-size: 14px; line-height: 20px; text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span>
<!-- INSERT LINK HERE -->
<a class="decorate" href="" target="_blank" style="text-decoration: none; color: #37468E; font-weight: bold;">Read More»</a>
</span>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
You have a few text-align:left;'s in there that are overriding the centering you're doing in parent tags.
...padding-bottom: 5px; text-align: left;">The International...
and
...line-height: 20px; text-align: left;">Lorem ipsum dolor sit...
If you remove the text-align:left; from the examples above, these areas should center justify.
it's work.please copy in all HTML body tag like here
I am trying to create an email template so I doing the thing in table only and inline CSS. Problem I am facing with the styling is that I am not able to move the button 40px down the text You are a .... some task. without affecting the above 2 <tr>s. I applied height to tr via inline css but somehow it is not taking the height. I also tried setting margin, padding to the last tr, td but no luck.
Let me know how could I achieve this without affecting the heights of above 2 tr, tds or a better way to handle this.
Fiddle - https://jsfiddle.net/qd00shr3/
Code -
<body style="background: #2D2D2D; font-family: arial;">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="background: green;height: 320px;">
<tr>
<td style="text-align: center;">
<img src="http://dummyimage.com/600x400/008000/fff.png" style="width:100px;height:100px;" />
</td>
</tr>
<tr>
<td style="text-align: center;">
<h2 style="margin-top: -55px;color: #ffffff;padding: 0 68px 0 60px;font-weight: normal;font-size: 32px;">You are a good developer waiting for some task.</h2>
</td>
</tr>
<tr style="height: 100px;">
<td style="text-align: center;">
<button style="background: #ff744f; border:none; width: 210px; height: 45px; text-align:center;color: #ffffff;border-radius: 5px;">Check Task</button>
</td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="background: #ffffff;height: 134px;">
<tr>
<td>
<p style="font-size: 11px;color: #16325c; text-align: justify;padding: 0 30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. anim id est laborum.
</td>
</tr>
</table>
</body>
I am not sure that I understand correct... This will move your button up:
position:relative;top:-40px;
I'm asking why there's 1px of padding in the cells in the following code:
<table style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
<tr>
<td rowspan=2 style="vertical-align: top;">
<img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;">
</td>
<td colspan=2 style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $
</td>
</tr>
<tr>
<td>
20e
</td>
<td>
-60 %
</td>
</tr>
</tr>
</table>
I want the image to be without top and left padding. And I can't use the padding attribute. Reading on CSS table specs, I read that extra padding is added if there are cells of different heights on a row, but even forcing each cell to have the same height doesn't fix that.
based on what you said
And I can't use the padding attribute
This seems to me that you are using this code for Email purposes.
So, here is a possible solution, by using the old cellpadding and cellspacing properties for table (plus I added display:blockto your img to fix the gap caused by img being an inline element)
<table cellpadding="0" cellspacing="0" style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
<tr>
<td rowspan="2" style="vertical-align: top;">
<img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;display:block" />
</td>
<td colspan="2" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $</td>
</tr>
<tr>
<td>20e</td>
<td>-60 %</td>
</tr>
</table>
If this is not for email purposes, do not use cellpadding nor cellspacing since they are deprecated, thus you have to use CSS atributes instead, like padding.
Browsers have an internal stylesheet which defines the default styles for that browser.
In my case, Firefox has (see it in the source code)
td {
padding: 1px;
}
You can remove it with
td {
padding: 0;
}
td {
padding: 0;
}
<table style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
<tr>
<td rowspan=2 style="vertical-align: top;">
<img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;">
</td>
<td colspan=2 style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $
</td>
</tr>
<tr>
<td>
20e
</td>
<td>
-60 %
</td>
</tr>
</table>
It's a common practice to just add * { margin: 0; padding: 0;} at top of each css file instead of having to deal with overriding default padding and margin values everywhere.
http://jsfiddle.net/50cg5fyj/
I am trying to use style to affect the spacing of cells in my html table.
I am trying to use margin to make my cells have spacing on the right side only.
What am I doing wrong and how can I use style to affect cell spacing?
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
}
td {
margin: 0px 20px 0px 0px;
color: #585858;
}
a {
color: #326ea1;
}
</style>
<title>Request</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> Request ID </td>
<td>516<br>
</td>
</tr>
<tr>
<td>Assigned<br>
</td>
<td>Fred Flintstone<br>
</td>
</tr>
<tr>
<td>Requestor<br>
</td>
<td>Bugs Bunny<br>
</td>
</tr>
<tr>
<td>Type<br>
</td>
<td>Construction<br>
</td>
</tr>
<tr>
<td>Location<br>
</td>
<td>Brazil<br>
</td>
</tr>
<tr>
<td> <br>
</td>
<td> <br>
</td>
</tr>
<tr>
<td style=" vertical-align: top;">Description</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br>
sed do eiusmod tempor incididunt ut labore et dolore <br>
magna aliqua. Ut enim ad minim veniam, quis nostrud <br>
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
<tr>
<td><br>
</td>
<td><br>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Unfortunately, table cells do not have a margin property, but you can probably set a padding on them to get the desired behaviour. W3Schools has a page on styling tables that might help you here: http://www.w3schools.com/css/css_table.asp
If you change your code to the following, it should work:
td {
padding: 0px 20px 0px 0px;
color: #585858;
}
You can also set a cellspacing attribute on the table. That will put space between the cell borders - however, this affects the spacing around all sides of the cells.
I'm trying to figure out why my HTML email is doing this:
I feel like I've made it responsive (on browsers and email clients that support media queries) since I've replaced the fixed width with percentage-based width everywhere. None of the widths of the cells/tables inside add up to more than 400 pixels and yet it gets stuck around there. Anyone want to help me find the culprit? Which element is causing the trouble?
Fiddle: https://jsfiddle.net/j7y75g7t/.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
[class="width-100-pct"] { width: 100% !important; }
#media (max-width: 600px) {
h1, h2, p { text-align: center !important; }
img[class="responsive-image"] { width: 100% !important; height: auto !important; }
[class="width-100-pct-on-mobile"] { width: 100% !important; }
[class="width-75-pct-on-mobile"] { width: 75% !important; }
[class="width-third-on-mobile"] { width: 33.33333% !important;}
[class="width-25-pct-on-mobile"] { width: 25% !important; }
[id="prequal-btn"] { width: 50% !important; height: auto !important; }
}
</style>
</head>
<body style="margin:0;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#F1F1F3" style="width:100%;">
<!-- TOP BLUE STRIP -->
<table cellpadding="0" cellpadding="0" border="0" class="width-100-pct-on-mobile">
<tr>
<td bgcolor="#1B5D9B" style="width:100%;">
<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td width="605" class="width-75-pct-on-mobile">
</td>
<td width="195" style="text-align:right; padding: 10px;" class="width-25-pct-on-mobile">
<img width="175" height="70" src="http://i.imgur.com/4O8j7xp.png?1" style="width:175px;height:70px;border:0;margin:0;outline:0;" class="responsive-image"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- CONTAINED BODY -->
<table align="center" cellpadding="0" cellpadding="10" border="0" width="600" class="width-100-pct-on-mobile">
<!-- HEADLINE ROW -->
<tr>
<td style='font-size: 22pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-align:center; text-transform:uppercase;padding-top:20px;padding-bottom:20px;'>
<h1 style='font-size: 22pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-align:center; text-transform:uppercase;margin:0;'>HEADLINE</h1>
</td>
</tr>
<!-- IMAGE-HEADLINE-SUBTEXT ROW -->
<tr>
<td width="600" bgcolor="#FFFFFF" style='padding:10px; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000;border-radius:10px;' class="width-100-pct-on-mobile">
<p><img src="http://i.imgur.com/8LX3Chz.png" width="580" height="145" style="width:580px;height:145px;border:0;margin:0;outline:0;" class="responsive-image"/></p>
<h2 style='font-size: 18pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-transform:uppercase;margin-bottom:5px;'>SUBHEADLINE</h2>
<p style='font-size: 10pt; line-height: 11pt; font-family: sans-serif, Arial; color: #000; font-weight:600;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p style="text-align:right;" class="orange-button-holder"><img src="http://i.imgur.com/DJmCHC4.png?1" width="107" height="27" style="width:107px;height:27px;border:0;margin:0;outline:0;"/></p>
</td>
</tr>
<!-- EMPTY SPACE ROW -->
<tr>
<td width="600" style="width:600px;padding-top:10px;padding-bottom:10px;" class="width-100-pct-on-mobile">
</td>
</tr>
<!-- IMAGE-HEADLINE-SUBTEXT ROW -->
<tr>
<td width="600" bgcolor="#FFFFFF" style='padding:10px; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000;border-radius:10px;' class="width-100-pct-on-mobile">
<p><img src="http://i.imgur.com/1Ye4ktl.png" width="580" height="291" style="width:580px;height:291px;border:0;margin:0;outline:0;" class="responsive-image"/></p>
<h2 style='font-size: 18pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-transform:uppercase;margin-bottom:5px;'>SUBHEADLINE</h2>
<p style='font-size: 10pt; line-height: 11pt; font-family: sans-serif, Arial; color: #000; font-weight:600;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p style="text-align:right;" class="orange-button-holder" ><img src="http://i.imgur.com/DJmCHC4.png?1" width="107" height="27" style="width:107px;height:27px;border:0;margin:0;outline:0;"/></p>
</td>
</tr>
<!-- PREQUALIFY BUTTON ROW -->
<tr>
<td width="600" style="padding-top: 20px; padding-bottom: 20px; text-align:center;" class="width-100-pct-on-mobile">
<p style="margin:0; text-align:center;"><img src="http://i.imgur.com/q6hpze5.png?1" width="288" height="55" style="width:288px;height:55px;border:0;margin:0;outline:0;" id="prequal-btn"/></p>
</td>
</tr>
<!-- AWARD LOGOS -->
<tr>
<td width="600" bgcolor="#FFFFFF" style="padding:10px; border-radius:10px;" class="width-100-pct-on-mobile">
<table cellpadding="0" cellspacing="0" border="0" class="width-100-pct">
<tr>
<td valign="middle" width="200" style="text-align:center;" class="width-third-on-mobile">
<img src="http://i.imgur.com/5OqBS39.png" width="36" height="63" style="width:36px;height:63px;border:0;margin:0;outline:0;"/>
</td>
<td valign="middle" width="200" style="text-align:center;" class="width-third-on-mobile">
<img src="http://i.imgur.com/EwNyPSW.png" width="64" height="63" style="width:64px;height:63px;border:0;margin:0;outline:0;"/>
</td>
<td valign="middle" width="200" style="text-align:center;" class="width-third-on-mobile">
<img src="http://i.imgur.com/wZjpm07.png" width="89" height="63" style="width:89px;height:63px;border:0;margin:0;outline:0;"/>
</td>
</tr>
</table>
</td>
</tr>
<!-- PHONE NUMBER -->
<tr>
<td width="600" style="padding-top:20px;padding-bottom:20px;" class="width-100-pct-on-mobile">
<p style='text-align:left;font-family:Georgia,"Times New Roman",Times,serif;color:#939598;margin:0;font-weight:bold;'>The Guidant Team</p>
<p style='text-align:left;font-family:Georgia,"Times New Roman",Times,serif;margin:0;font-weight:bold;'><a href="tel:888-472-4455" style='color:#1e70b8;text-decoration:underline;font-family:Georgia,"Times New Roman",Times,serif;font-weight:bold;'>888.472.4455</a></p>
</td>
</tr>
<!-- Disclaimer -->
<tr>
<td width="600" style="padding:20px 100px;text-align:center;font-family: sans-serif, Arial; font-size: 9pt; color:#000;font-weight:bold;" class="width-100-pct-on-mobile">
<p style="text-align:center;font-family: sans-serif, Arial; font-size: 9pt; color:#000; margin:0; font-weight:bold;">Guidant Financial | 1100 112th Ave NE Ste 100 | Bellevue, WA 98004</p>
<p style="text-align:center;font-family: sans-serif, Arial; font-size: 9pt; color:#000; margin:0; font-weight:bold;">This email was sent by MitchellLarsen#guidantfinancial.com. If you no longer want to receive these emails you may unsubscribe at any time.</p>
</td>
</td>
</table>
</td>
</tr>
</table>
</body>
</html>
You should first of all clean up the code and create a separate CSS file and define classes and their styles there.
Then:
You have several width properties assigned to elements that overlap / overwrite each other and then enforce that override with "!important".
<table align="center" cellpadding="0" cellpadding="10" border="0" width="600" class="width-100-pct-on-mobile">
It is bad practice to overwrite parameters with "!important" all the time.
One idea to do this is to put everything a container element that has 100% and a padding.
The cards then can be 100% width and centered and they will then be fully responsive.
An important thing to remember is when you want to center floating, responsive elements with unknown (percentage ) size is that you have to create wrapping "helper" elements, like such:
.centerWrapper {
float: right;
position: relative;
left: -50%;
}
.container {
position: relative;
left: 50%;
max-width: 600px;
text-align: center;
}
.card {
max-width: 100%;
display: inline-block;
}
and then HTML
<div class="centerWrapper">
<div class="container">
<div class="card">...</div>
</div>
</div>
I made a fiddle for you which shows this very roughly.
It shows a fluid / responsive layout based on percentages without the need for and media queries breakpoints. You can still add #media breakpoints, to change font-sizes, for example.
https://jsfiddle.net/yphfgx51/2/