I'm making an email sig with html and tables. I'm almost there but just need a hand with the last bit.
I want the social icons to the right. I have attached screenshots and here is the code.
<table> <tr> <td valign="top" style="padding:0 8px 0 0;"><img src="" style="max-height:80px" width="76" height="80"></td> <td style="font-size:80%;font-family:Arial;padding:0; min-width:240px;" valign="top"> <div style="color:#111111;font-size:1.4em;">Name</div> <span style="color:#111111;"><strong style="color:#111111;font-size:1em">Director</strong>,</span> <span style="color:#111111;font-size:1em;">Company</span> <div style="line-height:0.4em;font-size:0.4em;"> </div> <div><span style="color:#00c4b4;font-size:1em;">mobile: </span><span style="color:#111111;font-size:0.9em;">07777777777</span></div> <div><span>www.website.com</span></div> </td> <td style= "border-left:2px solid;padding:0 0 3px 6px;width:42px;border-color:#00c4b4;"valign="middle"> </td> </tr> <tr>
<td><img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/072/landscape/facebook-5-128_1_.png" style="max-height:40px" width="40" height="40"></td>
</tr>
<tr>
<td><img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/073/landscape/linkedin-5-128_1_.png" style="max-height:40px" width="40" height="40"></td>
</tr></table>
You need split right td to 2 rows. Here is the corrected code.
<table>
<tr>
<td rowspan="2" valign="top" style="padding:0 8px 0 0;"><img src="" style="max-height:80px" width="76" height="80"></td>
<td rowspan="2" valign="top" style="font-size:80%;font-family:Arial;padding:0; min-width:240px; border-right:2px solid; border-color:#00c4b4;">
<div style="color:#111111;font-size:1.4em;">Name</div>
<span style="color:#111111;"><strong style="color:#111111;font-size:1em">Director</strong>,</span>
<span style="color:#111111;font-size:1em;">Company</span>
<div style="line-height:0.4em;font-size:0.4em;"> </div>
<div>
<span style="color:#00c4b4;font-size:1em;">mobile: </span>
<span style="color:#111111;font-size:0.9em;">07777777777</span>
</div>
<div>
<span>
www.website.com
</span>
</div>
</td>
<td style= "padding:0 0 3px 6px;width:42px;"valign="middle">
<img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/072/landscape/facebook-5-128_1_.png" style="max-height:40px" width="40" height="40">
</td>
</tr>
<tr>
<td style= "padding:0 0 3px 6px;width:42px;"valign="middle">
<img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/073/landscape/linkedin-5-128_1_.png" style="max-height:40px" width="40" height="40">
</td>
</tr>
</table>
Related
I am having a problem with my image inside my email signature, what I have tried to export the image as retina with 300dpi. I also doubled the pixel size of the image. How can I make the image sharper than it is now?
<table width="430" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="display: inline-table;">
<tbody>
<tr>
<td width="5" height="1"></td>
<td width="9" height="1"></td>
<td width="182" height="1"></td>
<td width="57" height="1"></td>
<td width="30" height="1"></td>
<td width="98" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="9" height="1"></td>
<td width="5" height="1"></td>
<td width="1" height="1"></td>
</tr>
<tr>
<td colspan="13">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;">Met vriendelijke groet,</span>
</td>
<td width="1" height="22"></td>
</tr>
<tr>
<td width="570" height="13" colspan="13"></td>
<td width="1" height="13"></td>
</tr>
<tr>
<td width="248" height="10" colspan="3" style="vertical-align: bottom;">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 12px;">
<strong>Jaap Jacobs</strong>
</span>
</td>
<td width="30" height="66" rowspan="3" colspan="2"></td>
<td width="292" height="22" colspan="7" style="vertical-align: bottom;">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 12px;">+31 (0)76 763 06 00</span>
</td>
<td width="1" height="22"></td>
</tr>
<tr>
<td width="248" height="22" colspan="3">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;">Managing director</span>
</td>
<td width="292" height="22" colspan="7">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;">
<a style="color: #222222; text-decoration: none;" href="mailto:emailtest#email.nl" target="_blank">emailtest#email.nl</a>
</span>
</td>
<td width="1" height="22"></td>
</tr>
<tr>
<td width="570" height="15" colspan="11"></td>
</tr>
<tr bgcolor="#ffd668" style="height: 50px;">
<td colspan="10" style="border-radius: 5px;">
<table>
<tbody><tr>
<td width="5"></td>
<td width="200" height="30" align="left" style="line-height: 0" colspan="2">
<a style="border: 0;" href="https://www.fingerspitz.nl" target="_blank">
<img width="138" height="22" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Fingerspitz.png">
</a>
</td>
<td width="190" align="right">
<table style="width:100%;">
<tbody>
<tr>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.facebook.com/Fingerspitz" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Facebook.png">
</a>
</td>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://twitter.com/fingerspitzNL/" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Twitter.png">
</a>
</td>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.linkedin.com/company/fingerspitz" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/LinkedIn.png">
</a>
</td>
<td width="40" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.youtube.com/channel/UCpovXRL4rEF8skjhle2z25Q" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/YouTube.png">
</a>
</td>
<td width="0.2" height="30">
<span style="background-color:#000;height:30px;display:table;width:1px;"></span>
</td>
<td width="40" height="30" align="right">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.google.nl/maps/place/Fingerspitz+Online+Marketing/#51.5904415,4.7595442,17z/data=!4m5!3m4!1s0x47c69f8ba6d2e709:0xbbf458d8e81294cb!8m2!3d51.5904382!4d4.7617329" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Maps.png">
</a>
</td>
<td width="15" height="30"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="570" height="15" colspan="11"></td>
</tr>
<tr>
<td colspan="10" style="border: 1px solid #e6e6e6; border-radius: 5px;">
<table>
<tbody>
<tr>
<td width="2" height="30"></td>
<td width="30" height="50">
<a href="https://www.fingerspitz.nl/blog/434-fingerspitz-1-tradingdesks-volgens-onderzoek-emerce-100" target="_blank">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;"><img width="40" height="40" alt="Dutch Search Awards" src="https://www.fingerspitz.nl/files/Social_iconen/Emerce_100_2.png"></span>
</a>
</td>
<td width="10" height="30"></td>
<td width="512" height="50">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 12px;">Fingerspitz is #1 Tradingdesk van Nederland volgens Emerce! <b>Lees meer!</b></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Above you see the result the image Fingerspitz is a bit blurry. I'll hope someone could help me out on this.
You're changing the height-to-width ratio slightly. You could remove either the height or width definition, which would keep the ratio to scale.
So this:
<img width="138" height="22" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Fingerspitz.png">
becomes this:
<img width="138" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Fingerspitz.png">
I'm a really really new beginner. I have been tasked with making an email signature by my boss and I cannot figure out how to produce it. I'm using dreamweaver and have written really basic HTML emails that sent successfully, so my code isn't the absolute worst.
I'm trying to recreate this (made in word):
I want the four lines to the right of the logo to be left-aligned, and the bottom two lines to be centered. I don't have any alignment defined in table {} or tbody tr td {}.
Here is how it looks in the chrome preview:
I will comment to show you how it looks in dreamweaver
in style:
table {
border-collapse: collapse;
border-spacing: 0;
}
tbody tr td {
font-family: sans-serif;
font-style: bold;
color: black;
font-size: 13px;
}
.B {font-size: 14px;
text-align: left !important;
}
.smallcaps {
font-variant: small-caps;
font-size: 14px;
text-align: left !important;
}
.bcorp {
font-variant: small-caps;
font-size: 14px;
text-align: center;
}
.pad {
padding-left: 12px;
padding-right: 12px;
vertical-align: bottom;
text-align: center;
}
a {
text-decoration: none;
text-align: center;
}
And in table>tbody:
<tr>
<td width="96" rowspan="6"><a><img src="http:///wp-content/uploads/2016/09/Logo-01.jpg" alt="Logo" width="96" height="90"/></a></td>
<td height="1" colspan="2"> </td>
</tr>
<tr>
<td height="9" colspan="2"><span class="B">Name Here, Position Title</span></td>
</tr>
<tr>
<td height="20" colspan="2"><span class=smallcaps>Company Name</span>.</td>
</tr>
<tr>
<td height="20" colspan="2">12345 SW 22 P<span class=smallcaps>kwy</span> | P<span class=smallcaps>ortland</span>, OR 97111 | S<span class=smallcaps>te</span> 123</td>
</tr>
<tr>
<td height="7" colspan="2">D<span class=smallcaps>esk</span>: 503.123.4567 | C<span class=smallcaps>ell</span>: 503.987.6543</td>
</tr>
<tr>
<td height="1" colspan="2"> </td>
</tr>
<tr>
<td colspan="2" cellpadding="5">
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
</td>
<td> </td>
</tr>
<tr>
<td height="30" colspan="2"><span class=bcorp>A Certified B Corporation®</span></td>
<td width="101"> </td>
</tr>
Edited: added code - hope it's clear enough to help
Ok, please check this and see if this will help you. About the table issue.
Some Email program don't render Inline-CSS to the body of email. You may consider use the style attributes to support what Table design is missing. I used to do this when generating newsletter.
<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
<td style="line-height:1.6;padding: 5px 15px;">
<div>Name Here, Position Title</div>
<div>Company Name</div>
<div>Stress address wrapped around here</div>
<div>Desk: 123.456.789 | Cell: 123.456.789</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center">
<table align="center" width="50%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td> Icon1 </td>
<td> Icon2 </td>
<td> Icon3 </td>
<td> Icon4 </td>
<td> Icon5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
A Certified B Corporation <sup>®</sup>
</td>
</tr>
</table>
</td>
</tr>
</table>
You can achieve the required alignment in the cells using CSS properties: text-align:center and text-align:left. By the way, a row defaults to text-align:left so if you don't put the alignment then it by default goes to left alignment.
And for merging the cells, you can use rowspan and colspan attribute in the tag inside HTML.
I am posting a working example with complete CSS and HTML code for your consideration here: https://jsfiddle.net/rahuldhangar/0s5usofv/
HTML code:
<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
<td style="line-height:1.6;padding: 5px 15px;">
<div>Name Here, Position Title</div>
<div>Company Name</div>
<div>Stress address wrapped around here</div>
<div>Desk: 123.456.789 | Cell: 123.456.789</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center">
<ul style="list-style:none;margin:0;padding:0;">
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
</ul>
</td>
</tr>
<tr>
<td align="center">
A Certified B Corporation <sup>®</sup>
</td>
</tr>
</table>
</td>
I had to create an emailing html and I can say it is definitely a hard thing to do. Now, making sure it is responsive is beyond obnoxious.
I'm stuck right now on a seemingly unsolvable problem.
Here is the problem : I have a table with 3 columns (column 1 is a table, column 2 a spacer colum, column 3 is a table).
When I go mobile, I want the third column to go under the column 1. But no matter what I try I cant do it.
Please note that the display parameter CANT be used. That's very important. Google mail doesnt know what display means (...)
The only thing that seem ok to use are : float and align.
Here is my jsfiddle
https://jsfiddle.net/cnw0o3wy/
the follow us and contact us cells are in the same table; that table must go under the first table. I fail to achieve that effect for now
<tr>
<td>
<table align="center">
<tr>
<td class="align-top grey responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307">
<tbody>
<tr class="grey">
<td class="align-top"colspan="3"><img alt="" src="images/mobile.png" /></td>
</tr>
<tr class="grey">
<td width="113" class="w113"> </td>
<td>
<img src="images/appstore.png" title="Apple Store" />
</td>
<td>
<img src="images/googleplay.png" title="Google Play" />
</td>
</tr>
</tbody>
</table>
</td>
<td width="4"class="responsive">
</td>
<td class="responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307" class="w307">
<tbody class="grey">
<tr class="grey">
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="t-gris px12 bold align-top">Follow us !</td>
</tr>
<!-- 32 PX SPACING -->
<tr>
<td height="36" width="151" class="w151"><img src="images/shim.png" alt="" height="31" /> </td>
</tr>
<tr class="align-center">
<td>
<img class="social" src="images/fb.png" alt="Facebook" />
<img class="social" src="images/twitter.png" alt="Twitter" />
<img class="social" src="images/mail.png" alt="Mail" />
</td>
</tr>
</tbody>
</table>
</td>
<td class="white">
<img alt="" src="images/shim.png" width="4" />
</td>
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px12 bold t-gris align-top">Contact us !</td>
</tr>
<tr>
<td><img alt="" src="images/logo2.png" /></td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px10 t-gris bold">
50/54 <br/>92100 <br/>+33 1 49 00 00 00 www.mail.fr
<span style="text-decoration: underline;">
courrier#mail.fr
</span>
</td>
</tr>
<tr>
<td style="line-height:7px;"height="7" width="151" class="w151"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
solved my problem with the following lines :
td[class="responsive-grey"],
td[class="responsive-grey responsive-grey-spacing"],
td[class="align-top grey responsive-grey"] {
float: left; width:100%;
}
basically float left on all three columns
I am trying to center all tables in td. Solution should work good in email clients such as outlook, Windows Live e.t.c. But they align vertically. How to align tables in center of div?
<td align="center" style="text-align:center;width:100%;" width="100%">
<table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
<tbody>
<tr>
<td width="33" align="left" class="social-share-cell" style="padding:2px;"><img alt="" src="http:///client/Content/images//social-links/facebook.png" width="33" height="33"></td>
<td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left">Share</td>
</tr>
</tbody>
</table>
<table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
<tbody>
<tr>
<td width="33" align="left" class="social-share-cell" style="padding:2px;"><img alt="" src="http:///client/Content/images//social-links/linkedin.png" width="33" height="33"></td>
<td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left">Share</td>
</tr>
</tbody>
</table>
<table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
<tbody>
<tr>
<td width="33" align="left" class="social-share-cell" style="padding:2px;"><img alt="" src="http:///client/Content/images//social-links/twitter.png" width="33" height="33"></td>
<td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left">Tweet</td>
</tr>
</tbody>
</table>
<table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
<tbody>
<tr>
<td width="33" align="left" class="social-share-cell" style="padding:2px;"><img alt="" src="http:///client/Content/images//social-links/google-plus.png" width="33" height="33"></td>
<td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left">+1</td>
</tr>
</tbody>
</table>
<table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
<tbody>
<tr>
<td width="33" align="left" class="social-share-cell" style="padding:2px;"><img alt="" src="http:///client/Content/images//social-links/vkontakte.png" width="33" height="33"></td>
<td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left">Share</td>
</tr>
</tbody>
</table>
</td>
that is because what LcSalazar you can not disagree with him,
but I assume you are making layout for email and there is just the "table layout" way if you want the outlook to display what you expect
so the table contains rows and columns
if you want the table content to display in one line you should divide that line in how much columns you need and then put inside the content in separate tables
<table>
<tbody>
<tr>
<td>
<!-- table content 1 -->
</td>
<td>
<!-- table content 2 -->
</td>
<td>
<!-- table content 3 -->
</td>
<td>
<!-- table content 4 -->
</td>
<td>
<!-- table content 5 -->
</td>
</tr>
</tbody>
</table>
I'm not going to enter in the matter of why you should reconsider your layout, so you wouldn't need nested tables... Neither should use table for layout... Also, why shouldn't you use so many inline styles... I'm simply going to answer your question as it is...
Here it goes:
A table by default acts like a block element, using full width and breaking the line.
To place them side-by-side, change their display property to inline-table
table table {
display: inline-table;
}
<table>
<tr>
<td align="center" style="text-align:center;width:100%;" width="100%">
<table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
<tbody>
<tr>
<td width="33" align="left" class="social-share-cell" style="padding:2px;"><img alt="" src="http:///client/Content/images//social-links/facebook.png" width="33" height="33"></td>
<td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left">Share</td>
</tr>
</tbody>
</table>
<table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
<tbody>
<tr>
<td width="33" align="left" class="social-share-cell" style="padding:2px;"><img alt="" src="http:///client/Content/images//social-links/linkedin.png" width="33" height="33"></td>
<td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left">Share</td>
</tr>
</tbody>
</table>
<table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
<tbody>
<tr>
<td width="33" align="left" class="social-share-cell" style="padding:2px;"><img alt="" src="http:///client/Content/images//social-links/twitter.png" width="33" height="33"></td>
<td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left">Tweet</td>
</tr>
</tbody>
</table>
<table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
<tbody>
<tr>
<td width="33" align="left" class="social-share-cell" style="padding:2px;"><img alt="" src="http:///client/Content/images//social-links/google-plus.png" width="33" height="33"></td>
<td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left">+1</td>
</tr>
</tbody>
</table>
<table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
<tbody>
<tr>
<td width="33" align="left" class="social-share-cell" style="padding:2px;"><img alt="" src="http:///client/Content/images//social-links/vkontakte.png" width="33" height="33"></td>
<td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left">Share</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
add this style "display: inline-table;" for table remove the text-align:left; from table style .
The issue I'm facing is that a TD in my table is inheriting the table's width despite having it's own width explicitly set.
The code is as follows:
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center">
<tr>
<td>
<img src="header.gif" alt="New Releases">
</td>
</tr>
<tr style="font-size: 0;">
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
<td width="85px">
<img src="product1.jpg" width="85" height="85" alt="image" >
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 1</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<img src="view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="10px">
</td>
<td width="85px">
<img src="product2.jpg" width="85" height="85" alt="" >
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 2</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<img src="view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="30px"><img width="30px" height="95px" src="rightsep.gif" alt=""></td>
</tr>
<tr>
<td>
<img src="footer.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
Specifically, the TD being affected is the first in the table:
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
Which is inheriting the table width of 640px instead of the 30px it should be.
It seems regardless of what I change, the issue is still there.. I've tested both locally and in JSFiddle.
I'm by no means experienced in HTML so I'm not sure what the problem is.
Updated Code
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center" style="border-spacing: 0;">
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases.gif" alt="New Releases">
</td>
</tr>
<tr>
<td width="30"><img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-left.gif" alt="" ></td>
<td width="85">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/1/_/1.jpg_14603.jpg" width="85" height="85" alt="image" >
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">Clydie King - Direct Me - Inc Never Like This Before</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="85">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/4/_/4.jpg_14418.jpg" width="85" height="85" alt="" >
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">T.M.V.S. - Don't Be Shy</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="30">
<img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-right.gif" alt="">
</td>
</tr>
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-bottom.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
I now have a gap above and below the middle row which I can't get rid of.
Every row in a table must have the same number of cells. If you want to use less cells in a row you must explicitly set the colspan attribute to match:
<tr>
<td colspan="9"> <!-- set this to the maximum number of cells there will be in a row -->
<img src="header.gif" alt="New Releases">
</td>
</tr>
You can mix and match the colspan:
<tr>
<td colspan="5">
<img src="header.gif" alt="New Releases">
</td>
<td colspan="4">
<img src="header.gif" alt="New Releases">
</td>
</tr>
but the total must always match the maximum number of cells used in the table.
This process must be repeated for every row in the table.
I believe it should be:
<td width="200">
or
<td style="width: 200px">
You have a table with 3 rows, but different numbers of cells.
If you want a cell to span the whole table, like the header and footer do, you need to specifiy a rowspan on them like this:
<tr>
<td rowspan="9"><img src="header.gif" alt="New Releases"></td>
</tr>
In this case a 9, because your middle row has 9 cells.
Otherwise the browser will render the table wrong.