Extra HTML Table cell appearing under table only on print/print preview - html

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.

Related

How to round corners of a table without CSS?

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.

Why is my table heading pushing the table rows out of place?

Without a heading, my table looks fine and normal. I tried adding a table heading and it pushed everything out of place. Could anyone tell me how to avoid this?
Relevant code:
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="white">
<th width="80%"> Let's talk about the wall </th>
<tr>
<td width="6%" align="center" bgcolor="white"><font face="arial"><strong></strong></font></td>
<td width="75%" align="center" bgcolor="white"><font face="arial"><strong></strong></font></td>
<td width="19%" align="center" bgcolor="white"><font face="arial"><strong></strong></font></td>
</tr>
And then:
<tr>
<td bgcolor="white"><font face="arial"></font></td>
<td bgcolor="white"><font face="arial"><? echo $rows['topic']; ?><BR></font></td>
<td align="center" bgcolor="white"><font face="arial"></font></td>
</tr>
To be clear, the text you see such as 'test,' 'slaaa,' etc. - I want that to be aligned much farther to the left of where it sits, which is how it sits when I have the table without a heading.
You're missing a tr wrapping the th, and a colspan
th {
background: #ccc;
}
td {
background: #aaa;
}
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="white">
<tr>
<th colspan="3"> Let's talk about the wall</th>
</tr>
<tr>
<td width="6%" align="center" bgcolor="white">
<strong>some text</strong>
</td>
<td width="75%" align="center" bgcolor="white">
<strong>Column 2</strong>
</td>
<td width="19%" align="center" bgcolor="white">
<strong>Column 3</strong>
</td>
</tr>

HTML email table buttons

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.

Centering the body of an HTML email in Gmail

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.

HTML table replicating a sample image

I have been trying all morning to replicate the below however I cannot get the alignment correct, it seems that a row will match the height of the biggest td, I need to replicate this as pixel perfect as possible.
Below is my HTML,
<table cellspacing="0" cellpadding="0" border="0" align="center" style="height: 268px; width: 700px;">
<thead>
<tr>
<th valign="middle" align="center" style="height: 27px;" scope="col">Information</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Education & Training</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Marketing Services</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Digital Media</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Entertainment</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Business Services</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" align="center" style="height: 27px;">Academic</td>
<td valign="middle" align="center" style="height: 27px;">For-profit schools</td>
<td valign="middle" align="center" style="height: 27px;">Agency</td>
<td valign="middle" align="center" style="height: 27px;">Internet</td>
<td valign="middle" align="center" style="height: 27px;">TV and Radio Broadcasting</td>
<td valign="middle" align="center" style="height: 27px;">Business Process Outsourcing</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">STM</td>
<td valign="middle" align="center" style="height: 27px;">Educational Technology</td>
<td valign="middle" align="center" style="height: 27px;">Digital</td>
<td valign="middle" align="center" style="height: 27px;">Mobile Distribution</td>
<td valign="middle" align="center" style="height: 27px;">Cinema</td>
<td valign="middle" align="center" style="height: 27px;">B2B Services</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Financial</td>
<td valign="middle" align="center" style="height: 27px;">Educational Services</td>
<td valign="middle" align="center" style="height: 27px;">Market Research</td>
<td valign="middle" align="center" style="height: 27px;">Online Gaming</td>
<td valign="middle" align="center" style="height: 27px;">Film, TV, Music and Sports Content and Rights</td>
<td valign="middle" align="center" style="height: 27px;">SaaS</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Business</td>
<td valign="middle" align="center" style="height: 27px;">Professional Training</td>
<td valign="middle" align="center" style="height: 27px;">Outdoor</td>
<td valign="middle" align="center" style="height: 27px;">Social Media</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Trade</td>
<td valign="middle" align="center" style="height: 27px;">Vocational Training</td>
<td valign="middle" align="center" style="height: 27px;">Public Relations</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Consumer</td>
<td valign="middle" align="center" style="height: 27px;">Sales Promotion</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Professional</td>
<td valign="middle" align="center" style="height: 27px;">Direct Marketing</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Lead Generation</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;"> </td>
<td valign="middle" align="center" style="height: 27px;"> </td>
</tr>
</tbody>
</table>
and my CSS,
#left table {
border:0 none;
}
#left th {
height:43px;
background:url(images/th_bg.jpg) top left repeat-x;
font-size:14px;
color:#fff;
font-family:"Times", "Times New Roman", "Serif";
}
#left tbody td {
text-align:center;
background:#99abb9;
border-right:1px solid #fff;
width:105px;
padding:10px 15px 0px 15px;
height:17px;
}
Looks like only two rows to me. A header row of th tags and a single row of td tags, each with a list of items.
You try to make one table-row per entry, but on the picture it looks like there are only two rows. One for header and one for data (data seperated by <br /> or with <p>...</p>).
Here is an shortened example (less columns, only basic formatting - you have to add the rest) just to show how it works:
<style type='text/css'>
thead > tr > td {
text-align:center;
vertical-align:middle;
background-color:#777777;
width:107px;
}
tbody > tr > td {
text-align:center;
background-color:#99abb9;
}
</style>
<table cellspacing="2px" border="0">
<thead>
<tr>
<td>Information</td>
<td>Education & Training</td>
<td>Marketing Services</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Academic<br /><br />
STM<br /><br />
Financial<br /><br />
Business<br /><br />
...
</td>
<td>
For-profit schools<br /><br />
Educational Technology<br /><br />
Educational Services<br /><br />
...
</td>
<td>
Agency<br /><br />
Digital<br /><br />
Market Research<br /><br />
Outdoor<br /><br />
Public Relations
</td>
</tr>
</tbody>
</table>
I have made a completely working demo, at http://dcm.net46.net/test/so/so.html. To make all the columns the same height, I just filled in the extra space with empty tds. To style the columns, I used colgroup and col elements. The rest was pretty easy.