Jump to content

Email Template creator - table with frame.

Guest Paul Alexander

By Guest Paul Alexander
in Service Manager

 Share

Recommended Posts

Guest Paul Alexander

Guest Paul Alexander

Posted
Posted

I'm trying to add a table with a border, but without and 'edges' around the cells.

I've added this html: 

<html>
<head>
<style>
table {
  border: 1px solid black;
}
</style>
</head>
<body>

Which, when I open it in Chrome looks like this:

image.png.ba3df5801b60c5f369e036b5c055ad5e.png

 

Which is exactly what I want...

 

However, if I put the same HTML in the email editor in Hornbill I get this (with no border around the table):

image.png.0c781181051ddea52374bc5258deb964.png

 

Any ideas how to get this to work in the email editor please?!

 

thanks

Link to comment
Share on other sites
Victor Grand Master

Victor

Posted
Posted

@Paul Alexander I don't think the template editor (using CKEditor) knows about CSS table border (which is what you are using there)... I would say have a table wrapper for all the above using a <table border="1"> tag.... so basically you have: 

<table border="1">
  <tr><td>
    ...
    all the table you have there
    ... 
  </td></tr>
</table>

 

Link to comment
Share on other sites
Guest Paul Alexander

Guest Paul Alexander

Posted
Posted

Hi @Victor

Thanks for that, but I now get (which has all of the cells outlined rather than just the table border):

 

image.png.fd37add68397cbad486a78fb295f618d.png   

With this code:  

<table border="1">
	<tbody>
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Age</th>
		</tr>
		<tr>
			<td>Jill</td>
			<td>Smith</td>
			<td>50</td>
		</tr>
		<tr>
			<td>Eve</td>
			<td>Jackson</td>
			<td>94</td>
		</tr>
		<tr>
			<td>John</td>
			<td>Doe</td>
			<td>80</td>
		</tr>
	</tbody>
</table>

 

Link to comment
Share on other sites
Victor Grand Master

Victor

Posted
Posted

@Paul Alexander I meant the bordered table like a wrapper for your table... so basically this: 

<table border="1">
    <tr><td>
      <table>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>80</td>
        </tr>
      </table>
    </td></tr>
<table>

If you don't like how the border="1" looks like you can do a style inside the table tag, like this: <table style="border: 1px solid black"> which makes the border more thin...

Link to comment
Share on other sites
Victor Grand Master

Victor

Posted
Posted

Actually, I think you can have the CSS style inside the table tag so there won't be a need for the table wrapper: 

<table style="border: 1px solid black; border-collapse: collapse;">
   <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
   </tr>
   <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
   </tr>
   <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
   </tr>
   <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
   </tr>
</table>

 

Link to comment
Share on other sites
Guest Paul Alexander

Guest Paul Alexander

Posted
Posted

Actually...sorry, that's NOT done it (not in the Hornbill email function in a ticket anyway - although if I copy and paste the same code into an html doc and open it in Chrome, then it DOES work)

So....if I use this code: 

<table style="border: 1px solid black; border-collapse: collapse; width:500px;">
	<tbody>
		<tr>
			<td><img height="120px" src="https://vcukprodhornbillimages.z33.web.core.windows.net/Images/Main/BuildingNewStarterEmail/Steve.png" style="margin-left: 12px; margin-right: 12px; float: left; width: 102px; height: 120px;" width="102px" /></td>
			<td><span style="font-size:11pt"><span style="vertical-align:baseline"><span style="font-family:Calibri,sans-serif"><b><i>Steven Tideswell</i></b>&nbsp;(Head of Business Excellence and Sustainability)&nbsp;</span></span></span><br />
			<span style="font-size:11pt"><span style="vertical-align:baseline"><span style="user-select:text"><span style="-webkit-user-drag:none"><span style="-webkit-tap-highlight-color:transparent"><span style="overflow-wrap:break-word"><span style="font-kerning:none"><span style="font-family:Calibri,sans-serif">Sustainability&nbsp;Specialist, Viewpoint for Projects&nbsp;Virtuoso,&nbsp;PowerProject&nbsp;Pundit&nbsp;</span></span></span></span></span></span></span></span><br />
			&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><span style="font-size:11pt"><span style="vertical-align:baseline"><span style="font-family:Calibri,sans-serif"><b><i>Lizzie Featherstone</i></b>&nbsp;(Business Excellence Manager)</span></span></span><br />
			<span lang="EN-US" style="font-size:11.0pt"><span style="font-family:&quot;Calibri&quot;,sans-serif">Queen of&nbsp;Quality,&nbsp;Field View&nbsp;Fanatic,&nbsp;Temporary Works&nbsp;Wizard</span></span></td>
			<td><img height="118px" src="https://vcukprodhornbillimages.z33.web.core.windows.net/Images/Main/BuildingNewStarterEmail/Lizzie.png" style="margin-left: 12px; margin-right: 12px; float: left; width: 101px; height: 118px;" width="101px" /></td>
		</tr>
		<tr>
			<td><img height="107px" src="https://vcukprodhornbillimages.z33.web.core.windows.net/Images/Main/BuildingNewStarterEmail/Dave.png" style="margin-left: 12px; margin-right: 12px; float: left; width: 115px; height: 107px;" width="115px" /></td>
			<td><span style="font-size:11pt"><span style="vertical-align:baseline"><span style="font-family:Calibri,sans-serif"><b><i>Dave Parry</i></b>&nbsp;(Business Tools Manager)&nbsp;</span></span></span><br />
			<span lang="EN-US" style="font-size:11.0pt"><span style="font-family:&quot;Calibri&quot;,sans-serif">PowerBI&nbsp;Pro,&nbsp;Data&nbsp;Devotee,&nbsp;Technology and&nbsp;Hardware Hotshot</span></span>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><span style="font-size:11pt"><span style="vertical-align:baseline"><span style="font-family:Calibri,sans-serif"><b><i>Victoria Vickers</i></b>&nbsp;(Business Excellence Advisor)&nbsp;</span></span></span><br />
			<span style="font-size:11pt"><span style="vertical-align:baseline"><span style="user-select:text"><span style="-webkit-user-drag:none"><span style="-webkit-tap-highlight-color:transparent"><span style="overflow-wrap:break-word"><span style="font-kerning:none"><span style="font-family:Calibri,sans-serif">MSite&nbsp;Maestro,&nbsp;First-class&nbsp;Footprint-er,&nbsp;Awesome&nbsp;Advisor&nbsp;</span></span></span></span></span></span></span></span></td>
			<td><img height="118px" src="https://vcukprodhornbillimages.z33.web.core.windows.net/Images/Main/BuildingNewStarterEmail/Victoria.png" style="margin-left: 12px; margin-right: 12px; float: left; width: 101px; height: 118px;" width="101px" /></td>
		</tr>
	</tbody>
</table>

and send an email with this code in it from Hornbill, I get THIS (notice the lines separating the boxes):

     image.png.b628933b1ec18a948d336c471f18f5d0.png

 

Yes if I open the same in Chrome, I get this (with NO separating lines):

     image.png.5650ae561945553faf1e56f67dc9f446.png 

 

Any idea how to get the one WITHOUT the separating lines, but WITH the border using the Hornbill email editor please?! 

 

Link to comment
Share on other sites
Guest Paul Alexander

Guest Paul Alexander

Posted
Posted

Thanks for the suggestions...I've now tried both of those, and the email looks ok in the editor, and also when I open using Chrome, but when I send the email from a request, then the border has disappeared. 

I've just tried sending it to my hotmail address, and it DOES show correctly there, so it looks like this problem is an Outlook problem.... so basically I've been barking p the wrong tree by the sounds of it. 

Unless you have any other ideas, I think I can put this one to bed..... :)

 

thanks

Link to comment
Share on other sites
samwoo Grand Master

samwoo

Posted
Posted

Only other thing I can suggest trying is not using the generic border: element, but using the individual ones...

<table style="border-width: 1px; border-color: #000000; border-style: solid; border-collapse: collapse">

Using the hex code of the colour will ensure compatibility across, as in some rare cases using "black" will not work (but I've yet to come across this).

Outlook should be able to handle borders in a html table, I'm pretty sure it does... But then again there could be an admin-controlled outlook setting that I'm not aware of (that you may have) that's prevent it from working (though it doesn't really make sense if that's the case).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...