I'm re-living the glory days of table-based layouts because I'm writing an HTML email. Unfortunately, I can't get the body to center on the page (it works in a browser, of course, but not when testing in Gmail via HTML Mails. I would like the table which is nested in the first <td> to be centered within the outer table. The inner tables are set to a fixed width, so I would have expected that to work. Any ideas?
Here's the full code (fiddle):
<table width="100%">
<tr>
<td width="100%" align="center">
<table width="600" height="100%">
<tr>
<td width="100%">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="100">
<img src="" width="100" height="100">
</a>
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="20">
<tr>
<td width="100%" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px;">
<h1 align="left" style="font-weight:100;margin-top:20px;">Header</h1>
<p style="font-family: Georgia, serif;">Body</p>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50">
<img src="" width="50" height="50" />
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
Personally I like wrapping my entire body content (even my mobile version on responsive emails) inside a 100% width table (gmail might strip it but it will assume 100% anyway). The trick is the td's align center. ex-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="center">
<table with whatever width you want your max width to be>
</td>
</tr>
</table>
also you can assign a bgcolor to your wrapper table which will give you a background color for your email even in webmail clients which normally strip background colors in body
Your code works fine when I checked on Litmus.
My only concern is you may need to add "text-align: left" to the following to make copy aligned to the left on Gmail/IE.
<p style="font-family: Georgia, serif; text-align: left;">Body</p>
Have you tried adding the text-align css style of to the p element of body?
<p style="font-family: Georgia, serif;text-align:center;">Body</p>
you are centering the p within the cell but not its contents.
Alternatively remove the p tag.
Thanks for your suggestions, but after further investigation, I've discovered that Gmail is actually stripping the width="100%" attribute from the outer table. At this time, I don't think there is any way to center the content within the Gmail window.
Related
screenshot of issue When I print my document every table prints an extra cell right under the table (but just one). I have looked everywhere on the net to find a solution. So far, I haven't been able to find it. I'm using Chrome. I haven't tried anything significant because I can't find the issue on the internet yet. Maybe it is just me. please help.
Here is my code:
<style>
body {padding: 0px;
margin: 0px;
text-align: center;}
.noborder th {font-weight: bold;
border: none;
padding: 0px, 3px;}
.noborder td {font-weight: regular;
border: none;
padding: 0px, 3px;}
table.border {empty-cells:show;}
.border th {font-weight: bold;
padding: 0px, 3px;}
.border td {font-weight: regular;
border: 1px solid gray; }
</style>
<table class="noborder" width="100%">
<th width="50%">Phone: 855-359-9999
<th width="50%">Fax: 888-965-1964
<tr width="100%">
</table>
<p>
<table class="noborder" width="100%">
<tr width="100%">
<td width="15%">___ Outpatient
<td width="15%">___ Office
<td width="15%">___ Inpatient
<td width="15%">___ DME
<td width="40%">___ Ambulatory Surgery Center
</table>
<p>
<table class="border" width="100%" cellspacing="0">
<tr width="100%">
<td width="50%"><b>ICD-10 CM Diagnosis</b>
<td width="50%"><b>Code</b>
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%"><b>Description</b>
<td width="50%"><b>Code</b>
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="100%" colspan="2"><b>Special circumstances:</b>
<tr width="100%">
<td width="100%" colspan="2">
<tr width="100%">
<td width="100%" colspan="2">
<tr width="100%">
<td width="100%" colspan="2"><b>Clinical Information:</b>
</table>
I guess you forgot to add closing tags to tr and td, like:
<tr>
<td>
some stuff between
</td>
</tr>
I copy pasted your code into the text editor and it does not have closing tags but I don't have a problem as shown on your image. I opened the inspector in the browser and saw that browser put all the closing tags.
Just add closing tags to all trs and tds, and everything should work as intended.
I have the following 2x1 cell where I have an image in cell 1 and text in cell 2. I want rounded corners such as the examples found here. I used border-radius but I still have hard corners. I cannot use CSS as this is for a newsletter that will be emailed out. I appreciate any insight.
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150" style="border-width: 0px" src="http://www.path.com/to/image.png"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span style="font-family: trebuchet ms,verdana,arial,helvetica,sans-serif; font-size: 12px;">
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</table>
The issue is with border-collapse: collapse; you need to use the border-collapse: separate;
<html>
<head>
<style>
td > span {
font-family: trebuchet ms,verdana,arial,helvetica,sans-serif;
font-size: 12px;
}
td > img {
/* border-width: 0px; */
border-radius: 15px 0 0 50px;
}
body > table {
border-collapse: separate;
border-radius: 15px 50px;
border: 3px solid #000;
}
</style>
</head>
<body>
<table width="723" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150"src="http://via.placeholder.com/275x150"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span>
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
Results in:
You can see documentation about the different styles of border on tables at https://www.w3.org/TR/CSS21/tables.html#separated-borders and https://www.w3.org/TR/CSS21/tables.html#collapsing-borders. The snippet above should work in an email or as a stand alone page but would recommend separating the CSS for a standalone page.
Change your table tag from
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
to
<table border="3" width="723" cellspacing="0" cellpadding="0" >
And use this CSS
table {
border: 2px solid;
border-radius: 25px;
}
If you only want this rounded corner on the outer table, then give it an ID or a class and reference the new ID or class in the CSS instead of referencing all table elements.
http://imgur.com/a/fKv2H
I need banner with height 100px. and img inside it with height 120px. So the picture comeee out my banner for 20px;
Its for emails.
Also i need text column right before picture, so that text in column with background f4f4f4
<table>
<tr>
<td>
<img src="" style="margin-top:-20px;" />
</td>
<td>
banner text here
</td>
</tr>
</table>
You can do this two ways, one involved slicing the image into two and the other is using two more tables. I have added the code below for you to decide which one you want to go with.
Option 1:
This option has the image as one piece sitting in an outer table with 3 columns. The outer two columns have a table with white background to cater for the heads/hats popping out of the grey area. I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
<td width="171" valign="top"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Option 2
For this option, you will need to slice the top part of the image (with white background) and place both the images in one table with two rows. Both images are centered and I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#ffffff"><img src="http://i64.tinypic.com/lz7f6.png" style="display: block;">
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#f4f4f4"><img src="http://i68.tinypic.com/4qo1mu.png" style="display: block;"></td>
</tr>
</tbody>
</table>
The final outcome for both codes should look like this:
Let me know which option best suits you.
** UPDATE **
Your question asked if you can have option 1 with image to the left and text on the right, here is the example:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="171" valign="top" style="padding-left:20px;"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
<tr>
<td style="font-family:Arial; font-size:12px; color:#000000; padding:5px 10px;">This is some text for your email</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I added colors so you could see that it was outside the table. I gave the image a height of 120px, width of auto. Made the td's have a max-height of 100px; And I left your -20px margin on the image.
<body style="background-color:pink">
<table style="background-color:orange;">
<tr>
<td style="max-height:100px; overflow-y:initial;">
<img src="https://i.imgur.com/ZESO4DT.png" style="margin-top:-20px; height:120px; width:auto;" />
</td>
<td style="max-height:100px;overflow-y:initial;">
banner text here
</td>
</tr>
</table>
</body>
I'm trying to get the image to align to the right and the rows with text on the left in my table using colspan. This method usually works when the image is on the left but now I want it on the right it wont work. Please keep in mind this is for outlook email so you cannot use floats, align="right" etc.
heres my code:
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="580" style="border: 1px solid;">
<tr>
<td style="font-size: 10px;">sdfsdfsdfsdfdsdfhhhhhhhhlklkjlkj</td>
<td></td>
</tr>
<tr>
<td>sdfsdf</td>
</tr>
<tr>
<td rowspan="3" ><img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="" width="400"></td>
</tr>
</table>
</td>
</tr>
</table>
https://jsfiddle.net/yk3fanoq/1/
You need to put the text and image in two columns (td)
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<tr>
<td align="left">
sdfsdfsdfsdfdsdfhhhhhhhhlklk
sdfsdf
</td>
<td rowspan="3" align="right">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="" width="400">
</td>
</tr>
</td>
</tr>
</table>
I have been trying to update our email from using a bunch of images to just code but I'm hitting an issue with using tables. I can't seem to get the 's to be as narrow as I need them to be. All I want is to have them be fairly close to each other and aligned left. I've never worked with tables before, but I read up on them and everything seems to be correct but nothings working. Any suggestions on what I need to edit? PS This will be seen a lot on Outlook so that is a big factor.
http://codepen.io/Mdadedesign/pen/qavwkg
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<tr style='mso-yfti-irow:4;mso-yfti-lastrow:yes; background-color:pink; width:300px'>
<td width="90" style="background-color:lightblue;">
<table width="90" style="float:left;">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="left" bgcolor="#075aa0" width="90" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
<a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
Android App
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td width="70" style="background-color:cornsilk;">
<table width="70" style="float:left;">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#075aa0" width="70" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
<a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
Apple App
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td width="70" style="background-color:lightblue;">
<table width="70" style="float:left;">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="left" bgcolor="#075aa0" width="90" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
<a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
Refer A Friend
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
You're talking about the three buttons at the bottom, the "Android App", "Apple App" and "Refer a friend", right?
If you look at the styles you have, you have both a width set on the table, and a width in px set in the style for each button. Not that much to be done with the total width, really, but you can change the first one from 90px to 70px, the second one from 90px to 60px, and the last one from 90px to 80px. If you want to make them smaller than that, you'll have to put them under eachother, or reduce the size of the text and the clickable area.