I'm making an HTML email and the program that loads these do not accept separate CSS file, so everything has to be inline. For some reason margins for tables are not working. All I need is a gap between the bottom of a table and the next one.
What I have so far:
<table width="600" margin-bottom="50" cellpadding=8 cellspacing=0 border=0>
//contents of table
</table>
<table width="600" cellpadding="0" cellspacing="0" border="0">
//contents of next table
</table>
There is no gap created at all.
This works:
<table width="600" cellpadding=8 cellspacing=0 border=0>
//contents of table
</table>
<br>
<table width="600" cellpadding="0" cellspacing="0" border="0">
//contents of next table
</table>
I also tried padding-bottom, doesn't do anything either.
Is using <br> the only way then? Seems kind of awkward.
The way you were using margin was incorrect. Margin has to be inside of a style attribute. The other attributes are table specific attributes that usually can only be used directly on tables. You can use margin, but if I were you, I'd use the <br/> tag because that will always be rendered the same way by all devices. Margin can be a bit iffy with some email systems like Outlook.
<table width="600" style="margin-bottom:50px;" cellpadding=8 cellspacing=0 border=0>
//contents of table
</table>
<table width="600" cellpadding="0" cellspacing="0" border="0">
//contents of next table
</table>
Related
I'm trying to make a centralize button in HTML e-mail. The tricky part here is my wish the button to be as wide as its content. The following code works perfect except in Outlook.
Here is the HTML:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="width:1%;white-space:nowrap">
<a href="#" style="text-decoration:none">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="margin-top:16px;padding:8px 16px 8px 16px;background-color:#5091cd;border-radius:2px">
<a href="#" style="font-size:15px;letter-spacing:.04em;color:#ffffff;text-transform:uppercase;text-decoration:none;display:block;text-align:center;max-width:600px;overflow:hidden;text-overflow:ellipsis">
Go to platform
</a>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
The expected result is:
The actual visualization:
Increasing the width of the td tag will help you adjust the content in one line.
<style="width:20%;white-space:nowrap">
if you want to take the full width of the container, make td width auto.
currently, td tag width is deciding how the content text will wrap.
I have created one template. While opening in gmail account some of the text line is coming in center (basically Thank You Part) but when I am opening the same template in Yahoo it (Thank You Part) is properly left aligned. I did some analysis and came to know that it also depends upon the rendering of different mail client. I want to fix this issue. Could anyone please help me with that?
Try something like...
<table cellspacing="0" cellspacing="0" border="0" width="100%" role="presentation">
<tr>
<td style="text-align: left;">
Your Thank You text
</td>
</tr>
</table>
Some mail clients have text:center as default, e.g. Gmail and Outlook 2007,2010,2013. So you need to specify in each <td> the alignment of the text, as well as all other inline styles.
<table cellspacing="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" style="color:#000000">
Lorem ipsum
</td>
</tr>
</table>
I want 4 gray blocks next to the fire truck image, but no matter how I place them in a table, they show up lower as if there is 200px of padding above them. I can't figure out why they keep moving.I want them top aligned, and adding a vertical align didn't help.
<table width="1000" border="0" height="322">
<tbody>
<tr>
<td><img src="/Images/Monroe_Fire_Department_Website_Banner_03.jpg"></td>
<td class="work"><img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg"></td>
</tr>
</tbody>
</table>
Feel free to take a look at the example/source code with the link below.
http://monroefiredepartment.businesscatalyst.com/test.html
The offending CSS looks like vertical-align: baseline being applied to all elements on the page. If you inspect the <td> element that contains the four grey blocks, and uncheck vertical-align: baseline, then the blocks shift upwards and align with the top of the fire truck image.
I think that you can safely remove this from the stylesheet, as it doesn't appear to affect any other elements on the page.
try this
<table width="1000" border="0" height="322">
<tbody>
<tr>
<td><img src="/Images/Monroe_Fire_Department_Website_Banner_03.jpg"></td>
<td valign="top" style="
float: left;
"><img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg"></td>
</tr>
</tbody>
</table>
While creating an html email for Outlook, I stumbled upon a small problem that I have not been able to fix.
Below is a screen shot of an html table. I need to make the whole area clickable and not just the text. When I put <a href="#"> around the <td> or <table> it works in browsers but not in Outlook.
Here is the code:
<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
Yes please, send me a quote.
</td>
</tr>
</tbody>
</table>
I know this is an old question, but I was looking for an answer to this problem (clickable whole buttons in Outlook) and stumbled upon the following solution:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="middle" >
<!-- start of Outlook compatible button generated by http://buttons.cm/ -->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://yoururlhere.com/" style="height:52px;v-text-anchor:middle;width:330px;" arcsize="10%" stroke="f" fillcolor="#2fba45">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://yoururlhere.com/"
style="background-color:#2fba45;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:52px;text-align:center;text-decoration:none;width:330px;-webkit-text-size-adjust:none;">Yes please, send me a quote.</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
<!-- end of Outlook compatible button generated by http://buttons.cm/ -->
</td>
</tr>
</tbody>
</table>
Note I have not tested the above code.
Other answers did link to the campaignmonitor website, but not this link which provided the solution.
That blog post at campaignmonitor mentions that they have created a specific website to generate outlook compatible clickable buttons - http://buttons.cm based on a solution created by Stig M (#stigm on twitter).
I do not work for campaignmonitor.
Hope that helps someone.
try this
http://jsfiddle.net/KrRzP/
<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; cursor:pointer;">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
Yes please, send me a quote.
</td>
</tr>
</tbody>
</table>
You can try to use the onClick, <td onClick="go to anchor">. In the inline style you should add cursor: pointer so the cursor is changed to the 'hover a link'-pointer.
Try removing the target="_self". As Outlook is a email client, it probably doesn't recognize it and may be causing the issue.
On a side note, If you are using anchor links within your email (linking elsewhere on the same page), this is not fully supported in all email browsers. Here is the support chart
Use JavaScript "innerHTML" property. By default, in HTML5 you cannot directly add an anchor tag in a table cell element.
<html>
<title>
</title>
<head>
</head>
<body>
<table>
<thead>
<tr>
<td>Youtube</td>
<td id="assign_anchor_tag_here"></td>
</tr>
<thead>
</table>
<script>
var td_element = document.getElementById("assign_anchor_tag_here");
td_element.innerHTML = "<a href='https://www.youtube.com'>Click Here!</a>";
</script>
I have a variation on a common question, and I'll try to explain it as best I can. It may take some visualization on your part. I have an HTML table (in reality there are tables within tables within divs within tables -- I'm using the JSGantt plugin). I'd like for the table header to be frozen only when I scroll down on the y-axis, but if I need to scroll right to see more data, I would like it to scroll right.
Meanwhile, as I scroll down (with the header row staying put), I'd like the first column of the table to scroll down with me. But when I scroll right, I want the first column to stay put (but as I mentioned above, the header row to scroll with me). So essentially I've frozen the first column only on the x-axis and the header row only on the y-axis.
I'll stop there for now. If anyone needs more clarification I can try to explain. I've tried this multiple ways, but I'm convinced that it may not be possible without some serious Javascript. The table, by the way, is contained within an outer div with set dimensions, hence the need for me to scroll the data.
Any help you can provide would be greatly appreciated.
This type of layout will help you on your way. Note there will be alot of formatting for the size of the cells to get them to match up
<div id="TableHeaderDiv">
<table id="TableHeader">
<thead>
<tr>
<th style="width:100px"> Column1 </th>
<th style="width:100px"> Column2 </th>
<th style="width:100px"> Column3 </th>
</tr>
<thead>
</table>
</div>
<div id "TableBodyMainDiv" style="overflow-y:auto">
<div id="TableBodyLeftDiv" style="float:left">
<table id="TableBody">
<tbody>
<tr>
<td style="width:100px"> Column2Value </td>
<td style="width:100px"> Column3Value </td>
</tr>
<!-- More rows here -->
<tbody>
</table>
</div>
<div id="TableBodyDiv" style="float:left; overflow-x: auto">
<table id="TableBody">
<tbody>
<tr>
<td style="width:100px"> Column2Value </td>
<td style="width:100px"> Column3Value </td>
</tr>
<!-- More rows here -->
<tbody>
</table>
</div>
</div>
probably would want to style the width's of the tds using CSS classes or Javascript