Struggling With an HTML Signature

Joel Van Beek · Sep 22, 2023

Hello! I am very new to HTML, I am creating HTML email signatures but it only works sometimes. Sometimes in gmail is show properly, other times - the photos are randomly place all over the place. In my preview and browser the email signature looks fine. What is my issue?

<!DOCTYPE html>
<html>
<head><title>Joel's Email Signature</title></head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 100%;
max-width: 500px;">
<tr>
<td width="51%" style="line-height: 0px; border-collapse: collapse; padding: 0px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column1Row1.png"
style="width: 100%; min-width: 260px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column1Row2.png"
style="width: 100%; min-width: 260px;"></td>
<td width="7%" style="line-height: 0px; border-collapse: collapse; padding: 0px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column2Row1.png"
style="width: 100%; min-width: 34px;">
<a href="https://www.facebook.com/southernalbertabiblecamp"><img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column2-Row2.png"
style="width: 100%; min-width: 34px;"></a></td>
<td width="6%" style="line-height: 0px; border-collapse: collapse; padding: 0px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column3Row1.png"
style="width: 100%; min-width: 30px;">
<a href="https://www.youtube.com/channel/UCxDTAv5beRwqfwaODJ_X7bQ"><img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column3Row2-09.png"
style="width: 100%; min-width: 30px;"></a></td>
<td width="6%" style="line-height: 0px; border-collapse: collapse; padding: 0px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column4Row1.png"
style="width: 100%; min-width: 30px;">
<a href="https://www.instagram.com/southernalbertabiblecamp/"><img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column3Row2-11.png"
style="width: 100%; min-width: 30px;"></a></td>
<td width="30%" style="line-height: 0px; border-collapse: collapse; padding: 0px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column5Row1.png"
style="width: 100%; min-width: 146px;">
<a href="https://sabc.ca/"><img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column5Row2.png"
style="width: 100%; min-width: 146px;"></a>
<a href="mailto:joel@sabc.ca"><img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column5Row3.png"
style="width: 100%; min-width: 146px;"></a>
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column5Row4.png"
style="width: 100%; min-width: 146px;"></td>
</tr>
</table>
</body>
</html>

gulshan212 · Oct 7, 2023

Well, in my opinion, if you want to improve the compatibility of your email signature, you can follow the below steps.
1. Inline your CSS.
2. Use tables for layout
3. Specify the dimension of your image.
Thanks

paultaylor · Feb 9, 2025

Hi Joel,

It looks like Gmail is altering your email signature's formatting, which is a common issue. A few things to check:

Use Inline CSS – Gmail strips out <style> tags, so ensure all styles are inline.
Fixed Image Sizes – Instead of width: 100%, try using explicit pixel values for images to maintain their positions.
Table Structure – Gmail doesn’t always respect percentage-based widths; try using fixed widths for columns.
Host Images Properly – Ensure all images are externally hosted on a reliable server that allows hotlinking.

Testing across different devices and email clients should help pinpoint inconsistencies. Hope this helps!

Search

Search

Struggling With an HTML Signature

Joel Van Beek

New member

gulshan212

New member

paultaylor

New member

Similar threads