I have made an email signature to be used for outlook, but when it is sent in the email, the format is changing. The spaces between each section increase. How do I code this to ensure that the format does not change?
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table class="container" style="margin:0;background:#fff;border-collapse:collapse;border-spacing:0;margin:0;padding:0;text-align:inherit;width:580px; box-style: borderbox; position: relative;">
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<p style=" color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 12pt; font-weight: bold; padding: 0;">Delia Bellaby</p>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><img src="https://s19.postimg.org/95hmbn6ar/design_Make_Logo.jpg"></td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><p style="color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 12pt; font-weight: bold">Architect</p></td>
</tr>
<tr>
<td><p style="color: #9C9E9E; font-family: 'Arial', sans-serif; font-size: 10pt; font-weight: bold; margin-top: 10px;">Mobile: 022 362 6916 </p></td>
</tr>
<tr>
<td><p style="text-align: left; color: #9C9E9E; font-family: 'Arial', sans-serif; font-size: 10pt; border-top: 2px solid #00b3b3; padding-top: 10px; "><strong style="color:#00b3b3;">website:</strong> http://www.designmake.co.nz<br><strong style="color:#00b3b3;">email:</strong> delia#designmake.co.nz</p></td>
</tr>
<tr>
<td>
<span style="text-align: left; color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 10pt; ">
<img style="color: #3399ff; height: 30px; width: 30px;" src="https://s19.postimg.org/6begy7bub/Facebook-_Home-_Logo.png"></span>
</td>
</tr>
</table>
</body>
</html>
Related
I've tried the code below to fold on smaller screens and cut signature in half using float:left command on each of but it doesn't work. I need to make this footer as it is on larger screens and fold in half on smaller ones :/
<table style="width: 450px;" width="450" cellspacing="0" cellpadding="0">
<tbody style="vertical-align: top; position: fixed;">
<br></br>
<tr>
<td style="border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: bottom; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="bottom"><strong><span style="font-family: Verdana, sans-serif; font-size: 14pt; color: #b50015;">Natalia Gułaś</span></strong><br /><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #444444;"><span style="font-family: Verdana, sans-serif; color: #2c2c2c;">Dyrektor Zarządzający</span></span></td>
<td style="border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: top; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="top"><img style="width: 179px; height: auto; border: 0;" src="https://lp.gimmik.net/upload/logo.jpg" alt="Logo" width="179" border="0" /></td>
</tr>
<tr>
<td style="width: 60%; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="60%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong>tel.:</strong> +48 882 143 502<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong> email:</strong> natalia#gimmik.net </span></td>
<td style="width: 40%; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="40%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">Gimmik.net<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">ul. Mełgiewska 9E<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">20-209 Lublin</span></td>
</tr>
<tr>
<td style="width: 60%; vertical-align: top; padding: 10px 0 0 0;" valign="top" width="60%"><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/fb.png" alt="facebook icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/yt.png" alt="youtube icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/it.png" alt="instagram icon" width="16" border="0" /> </span></td>
<td style="width: 40%; vertical-align: top; padding: 10px 0 0 0;" valign="top" width="40%"><span><strong><a style="text-decoration: none;" href="http://www.gimmik.net" target="_blank" rel="noopener"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #3b4908;"><span style="font-family: Verdana, sans-serif; color: #b50015;">www.gimmik.net</span></span></a></strong></span></td>
</tr>
</tbody>
</table>
To achieve this you need to create two separate tables—one for each side—and float them both. You'll also need to hard-set heights on some cells to keep things aligned.
<table width="225" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<td style="height: 58px; border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: bottom; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="bottom"><strong><span style="font-family: Verdana, sans-serif; font-size: 14pt; color: #b50015;">Natalia Gułaś</span></strong><br /><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #444444;"><span style="font-family: Verdana, sans-serif; color: #2c2c2c;">Dyrektor Zarządzający</span></span></td>
</tr>
<tr>
<td style="height: 54px; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="60%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong>tel.:</strong> +48 882 143 502<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong> email:</strong> natalia#gimmik.net </span></td>
</tr>
<tr>
<td style=" vertical-align: top; padding: 10px 0 0 0;" valign="top" width="60%"><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/fb.png" alt="facebook icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/yt.png" alt="youtube icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/it.png" alt="instagram icon" width="16" border="0" /> </span></td>
</tr>
</table>
<table width="225" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<td style="height: 58px; border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: top; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="top"> <img style="width: 179px; height: auto; border: 0;" src="https://lp.gimmik.net/upload/logo.jpg" alt="Logo" width="179" border="0" /></td>
</tr>
<tr>
<td style="height: 54px; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">Gimmik.net<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">ul. Mełgiewska 9E<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">20-209 Lublin</span></td>
</tr>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0;" valign="top"><span><strong><a style="text-decoration: none;" href="http://www.gimmik.net" target="_blank" rel="noopener"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #3b4908;"><span style="font-family: Verdana, sans-serif; color: #b50015;">www.gimmik.net</span></span></a></strong></span></td>
</tr>
</table>
For some time I've been developing this simple HTML code to use it as my signature email. Recently I've add the .gif photo and links to make it look better. I can't put the Instagram icon and the WhatsApp icon side by side, I've tried a lot of things on the internet, but didn't managed to make it.
Here's the code for my HTML signature.
this is a screenshot of my signature
<table cellspacing="0" cellpadding="0" border="0" style="width: 590px;">
<tbody><tr>
<td style="border-right: 2px solid #a9a9a9; padding-right: 0px; vertical-align:middle" valign="middle"><img id="BeattorLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Gif-Assinatura-do-Email-2.gif" height="150px" walt="Beattor Comunicacao" style="display: block"></td>
<td style="vertical-align: middle; padding-left: 10px;">
<table cellspacing="0" cellpadding="1" border="0">
<tbody><tr>
<td style="font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">
<font style="font-weight: bold; font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">Thiago Dam</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 5px; font-weight: bold; font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">
<font style="font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">CEO e Diretor Comercial</font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Site: beattor.com.br</font></td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Email: thiago.dam#beattor.com.br</font></td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Contato: <font style="color: #333333; font-size: 10pt; font-family: Verdana">(21) 96407-9707</font></td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana"> <font style="color: #333333; font-size: 10pt; font-family: Verdana"></font></td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;"><img id="InstagramLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Instagram-Logo-Beattor-Comunicacao.png" height="30px" walt="Instagram da Beattor" style="display: block">
</td>
</tr>
<tr>
<td style=" font-family: Verdana; font-size: 10pt;"><img id="WhatsApp Logo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/WhatsApp-Logo-Beattor-Comunicacao.png" height="30px" walt="WhatsApp da Beattor" style="display: block">
</td>
</tr>
</tr>
</tr>
</tbody>
</table>
If you want both your social icons on the same line, one way of doing it would be to firstly remove the closing row </tr>/ opening new line <tr> between them (I've done so in the snippet. After that, float your icons left in the social icon tds (add float:left; into your style with the font-size and family) and then you should be good to go. I added a small margin-left (10px) to the whatsapp one to put a small space between them. I also removed the 100px padding from the instagram.
Hope this helps!
<table cellspacing="0" cellpadding="0" border="0" style="width: 590px;">
<tbody>
<tr>
<td style="border-right: 2px solid #a9a9a9; padding-right: 0px; vertical-align:middle" valign="middle">
<img id="BeattorLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Gif-Assinatura-do-Email-2.gif" height="150px" walt="Beattor Comunicacao" style="display: block">
</td>
<td style="vertical-align: middle; padding-left: 10px;">
<table cellspacing="0" cellpadding="1" border="0">
<tbody>
<tr>
<td style="font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">
<font style="font-weight: bold; font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">Thiago Dam</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 5px; font-weight: bold; font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">
<font style="font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">CEO e Diretor Comercial</font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">Site: beattor.com.br</font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">Email: thiago.dam#beattor.com.br</font>
</td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">Contato:
<font style="color: #333333; font-size: 10pt; font-family: Verdana">(21) 96407-9707</font>
</td>
</tr>
<tr>
<td style="padding-right: 50px; font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">
<font style="color: #333333; font-size: 10pt; font-family: Verdana"></font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; float:left; font-size: 10pt;">
<img id="InstagramLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Instagram-Logo-Beattor-Comunicacao.png" height="30px" walt="Instagram da Beattor" style="display:block; ">
</td>
<td style="font-family: Verdana; margin-left:10px; float:left; font-size: 10pt;">
<img id="WhatsApp Logo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/WhatsApp-Logo-Beattor-Comunicacao.png" height="30px" walt="WhatsApp da Beattor" style="display:block;">
</td>
</tr>
</tr>
</tr>
</tbody>
</table>
I have an email signature which consists of a simple table (one row, two columns). The first column has a logo, the second column has all the contact details.
I would like to make it responsive so that on small devices the logo is shown above, and the contact details below (so effectively the columns turn into rows). Currently, on small devices, the table gets squeezed so that the contact details are not readable.
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<div class="m_159975109461180827gmail_signature">
<div dir="ltr">
<div dir="ltr">
<table style="color: #000000; font-family: 'Times New Roman'; font-size: medium; background: none; margin: 0px; padding: 0px; border: 0px initial initial;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: arial, sans-serif; margin: 0px; border-top: 0px; border-right-width: 3px; border-right-color: #d2ac67; padding: 0px 7px 0px 0px; vertical-align: middle;" valign="top"><img class="CToWUd" src="http://mywebsite.com/logo-small.png" alt="" /></td>
<td style="font-family: arial, sans-serif; margin: 0px; padding: 0px 0px 0px 12px;">
<table style="background: none; margin: 0px; padding: 0px; height: 93px; border: 0px initial initial;" border="0" width="300" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; padding-bottom: 5px; color: #d2ac67; font-size: 14px;" colspan="2"><strong>My Name</strong></td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; color: #333333; font-size: 12px;" colspan="2"><span style="color: #d2ac67;">My position • Name of the company</span></td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">p:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top"><a style="color: #1155cc;" href="tel:+44%2020%207099%206646" target="_blank">+44 1234566</a> <span style="color: #d2ac67;">m: </span><a style="color: #1155cc;" href="tel:+44%207491%20044801" target="_blank">+44 1</a>234567</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">a:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">some addresss</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">w:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">link to the website</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Thank you all in advance for your help/guidance.
If you want to use a table create another table with your rows as columns and assign each table a class. Use css to hide and show the different tables using media calls.
I want to adjust vertical line height as per the content of <td> tag.
<table class="bg-color1" style="background-color:#ffffff;border:none;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; " align="center" border="0" cellpadding="0" cellspacing="0" width="600" >
<tbody>
<tr>
<td width="28%" valign="top" style=" border: none;mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-top: 20px; padding-left:70px; text-align: center; ">
<span style="text-align: center">8:30 - 9:30</span>
</td>
<td width="7%" valign="top" style=";mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-left: 70px; padding-top: 10px; ">
<hr style="height: 20px;">
</td>
<td width="65%" style="mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0px; padding-left: 10px; padding-top: 10px; text-transform: uppercase; text-align: left; ">
Tea, Registration, Networking
</td>
</tr>
<tr style="border: thin black solid;">
<td width="28%" valign="top" style=" border: none;mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-top: 20px; padding-left:70px; text-align: center; ">
<span style="text-align: center">8:30 - 9:30</span>
</td>
<td width="7%" valign="top" style=";mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-left: 70px; padding-top: 10px; ">
<hr style="height: 20px;">
</td>
<td width="65%" valign="top" style="mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0px; padding-left: 10px; padding-top: 10px; text-transform: uppercase; text-align: left; ">
Tea, Registration, Networking
Tea, Registration, Networking
Tea, Registration, Networking
</td>
</tr>
</tbody>
<tr>
<td height="40"></td>
</tr>
</table>
Now What I want is when the content of third <td> changes then as per the changes the height of vertical line and the time of 1st <td> should be adjusted to center of the <td> tag.
I want output as per the image.
PS : As I am making HTML Email , I can't use <div> , position property. I have to stick to table and inline css only.
Thank You.
Replacing padding-top: xx; in the first TD's with vertical-align: middle; seems to work.
fiddle
https://jsfiddle.net/Hastig/j3qy132b/1/
I played around a bit further, if it's of use to anyone..
https://jsfiddle.net/Hastig/j3qy132b/3/
A faint border-left instead of boxshadow
https://jsfiddle.net/Hastig/j3qy132b/4/
I have created a small html signature but its inline, to the left and my boss needs it to be edge to edge instead of being inclined to the left. I need to fix this but i'm not very good at html so i'd love some advice, or better still somebody who can help me redo it, well i know its a walk in the park for anybody good at Html :-)
Here is the code.
<html>
<head>
</head>
<body style="-webkit-text-size-adjust: 100%;">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;" colspan="2">
<span style="text-align: left; color: #52524D; font-family: Helvetica, Arial, sans-serif; font-size: 13pt; font-weight: bold"><b>Mathenge Anthony</b> |<i><small> Intern</small></i></span>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 2px; padding-right: 0px;" colspan="2">
<img src="http://www.qualitexsolutions.com/img/works/systech.png" nosend="1" border="0" width="200" height="120" alt='Systech Africa' title='Systech Africa' />
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;" colspan="2"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> 1st Floor Mayfair Business Centre, Parklands Road, Westlands <font size="1" color="#B9B9B9"><br></font> P.O. Box 41964 - 00100 <font size="1" color="#B9B9B9">|</font> Nairobi, Kenya.<br></span></td>
</tr>
<tr>
<td valign="bottom" style="padding-left: 0px; padding-top: 6px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 7pt; font-style: normal; font-weight: normal;"><font color="#828282"><b>Phone:</b></font> </span></td>
<td align="left" width="100%" valign="top" style="padding-left: 6px; padding-top: 6px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> (+254) 020 2115993/3742207 </span></td>
</tr>
<tr>
<td valign="bottom" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 7pt; font-style: normal; font-weight: normal;"><font color="#828282"><b>Mobile:</b></font> </span></td>
<td align="left" width="100%" valign="top" style="padding-left: 6px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> 0723-847842, 0786-384784 </span></td>
</tr>
<tr>
<td valign="bottom" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 7pt; font-style: normal; font-weight: normal;"><font color="#828282"><b>Fax:</b></font> </span></td>
<td align="left" width="100%" valign="top" style="padding-left: 6px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> (+254) 020 224 0363 </span></td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 6px; padding-bottom: 0px; padding-right: 0px;" colspan="2"><span style="text-align: left; margin-top: 0px; color: #00ADEF; font-size: 8pt; font-weight: bold; font-family: 'Calibri', sans-serif;"><a style="text-decoration: none; color: #00ADEF" href="http://www.systechafrica.com/"><font color="#00ADEF">website</font></a> <font size="1" color="#00ADEF"> <font size="1" color="#00ADEF">|</font> <a style="text-decoration: none; color: #00ADEF" href="https://www.google.com/maps/place/Systech+Limited/#-1.262282,36.808949,15z/data=!4m2!3m1!1s0x0:0xf5bbb42d28fa1a88"><font color="#00ADEF">map</font></a> <font size="1" color="#00ADEF">|</font> <a style="text-decoration: none; color: #00ADEF" href="mailto:info#systechafrica.com"><font color="#00ADEF">email</font></a></span></td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 10px; padding-bottom: 0px; padding-right: 0px;" colspan="2">
<img src="http://s24.postimg.org/y4lzmrxut/Fundmaster.png" nosend="1" border="0" width="250" height="70" alt="" />
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom: 0px; padding-right: 0px;" width="100%" colspan="2">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" nosend="1" border="0" width="22" height="20" alt="Twitter" />
<a href="https://www.facebook.com/SystechLimited">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" nosend="1" border="0" width="22" height="20" alt="Facebook" /></a>
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" nosend="1" border="0" width="22" height="20" alt="LinkedIn" />
<img src="https://simplesharebuttons.com/images/somacro/google.png" nosend="1" border="0" width="22" height="20" alt="google+" />
</td>
</tr>
</tr>
</tbody>
</table>
</body>
<style>
a {color: #00ADEF;}
</style>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Firstly: <style> and <meta> tags should be inside <head> tag.
Secondly: Let this be your starting point ;)
<table style="border:1px solid black; width:600px">
<tr>
<td style="text-align:left">I'm on left</td>
<td style="text-align:right">I'm on right</td>
</tr>
</table>
Tip: You can place another table inside <td>
Add width to your table
<table width="100%" cellspacing="0" cellpadding="0" border="0">
Is magic.