Remove whitespaces and align table for hotmail

https://stackoverflow.com/questions/22252737

11-06-2023
|

سؤال

I have been making html emails for a little while via slicing and incur different problems all the time. I can't seem to get my email to align properly in outlook 2010, neither can I get rid of these white spaces. I have inserted the other little fixes before and it hasn't worked for me (style="display:block" and/or a border="0"). I am also sure that I have been entering it in the right place.

Any suggestions on what I can do to fix this? Code is below:

Thank you for your time. Zolas

<title>Scarlet Email Template flat</title>
<style type="text/css">
    body, td, th {
        font-size: 13px;
        color: #333;
    }
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Scarlet Email Template flat.psd) -->
    <table width="700" height="934" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
        <tr>
            <td colspan="10">
                <img src="images/sc_01.jpg" width="700" height="157" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="images/sc_02.jpg" width="72" height="39" alt="">
            </td>
            <td>
                <img src="images/sc_03.jpg" width="124" height="39" alt="">
            </td>
            <td colspan="3">
                <img src="images/sc_04.jpg" width="159" height="39" alt="">
            </td>
            <td colspan="2">
                <img src="images/sc_05.jpg" width="104" height="39" alt="">
            </td>
            <td>
                <img src="images/sc_06.jpg" width="164" height="39" alt="">
            </td>
            <td colspan="2">
                <img src="images/sc_07.jpg" width="77" height="39" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="images/sc_08.jpg" width="72" height="196" alt="">
            </td>
            <td colspan="7">
                <table width="500" border="0" align="center" cellpadding="4">
                    <tr>
                        <td align="center"><strong>Dear Alexia and Team,</strong>

                            <br>My name is Ilia Zolas and I provide an outsourced marketing solution to start-ups and small businesses. By implementing the activities I have described below, I believe that I can add value to your business and ultimately increase sales. Please feel free to reply to this email or call me (<strong>0716854983</strong>) should you be interested.
                            <br> <strong>Sincerely ,<br>
            Ilia Zolas - BSc in International Hospitality Management, Major in Marketing</strong>

                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <img src="images/sc_10.jpg" width="27" height="196" alt="">
            </td>
            <td>
                <img src="images/sc_11.jpg" width="50" height="196" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="images/sc_12.jpg" width="72" height="49" alt="">
            </td>
            <td colspan="2">
                <img src="images/sc_13.jpg" width="210" height="49" alt="">
            </td>
            <td colspan="6">
                <img src="images/sc_14.jpg" width="368" height="49" alt="">
            </td>
            <td>
                <img src="images/sc_15.jpg" width="50" height="49" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="images/sc_16.jpg" width="72" height="177" alt="">
            </td>
            <td colspan="2">
                <img src="images/sc_17.jpg" width="210" height="177" alt="">
            </td>
            <td colspan="6">
                <table width="350" border="0" align="center" cellpadding="4">
                    <tr>
                        <td><strong>Digital Marketing</strong>

                            <br>Scarlet needs a website that encompasses the brand's values, has ideal functionality and incurs high volumes of traffic. I can achieve this by creating the desired website and attracting the right kind of traffic with tools such as Adwords and Google Analytic.</td>
                    </tr>
                </table>
            </td>
            <td>
                <img src="images/sc_19.jpg" width="50" height="177" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="images/sc_20.jpg" width="72" height="45" alt="">
            </td>
            <td colspan="2">
                <img src="images/sc_21.jpg" width="210" height="45" alt="">
            </td>
            <td colspan="6">
                <img src="images/sc_22.jpg" width="368" height="45" alt="">
            </td>
            <td>
                <img src="images/sc_23.jpg" width="50" height="45" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="images/sc_24.jpg" width="72" height="177" alt="">
            </td>
            <td colspan="2">
                <img src="images/sc_25.jpg" width="210" height="177" alt="">
            </td>
            <td colspan="6">
                <table width="350" border="0" align="center" cellpadding="4">
                    <tr>
                        <td><strong>Social Media &amp; Content Creation </strong>

                            <br>Populating your Social Media with a variety of content is key to convincing customers that your product is the right choice. To achieve this, I need to setup a variety of Social Platforms and populate them with pictures, videos and other types of content based on your product.</td>
                    </tr>
                </table>
            </td>
            <td>
                <img src="images/sc_27.jpg" width="50" height="177" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="images/sc_28.jpg" width="72" height="62" alt="">
            </td>
            <td colspan="2">
                <img src="images/sc_29.jpg" width="210" height="62" alt="">
            </td>
            <td>
                <img src="images/sc_30.jpg" width="54" height="62" alt="">
            </td>
            <td colspan="2">
                <img src="images/sc_31.jpg" width="34" height="62" alt="">
            </td>
            <td colspan="3">
                <img src="images/sc_32.jpg" width="280" height="62" alt="">
            </td>
            <td>
                <img src="images/sc_33.jpg" width="50" height="62" alt="">
            </td>
        </tr>
        <tr>
            <td colspan="10">
                <img src="images/sc_34.jpg" width="700" height="31" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="images/spacer.gif" width="72" height="1" alt="">
            </td>
            <td>
                <img src="images/spacer.gif" width="124" height="1" alt="">
            </td>
            <td>
                <img src="images/spacer.gif" width="86" height="1" alt="">
            </td>
            <td>
                <img src="images/spacer.gif" width="54" height="1" alt="">
            </td>
            <td>
                <img src="images/spacer.gif" width="19" height="1" alt="">
            </td>
            <td>
                <img src="images/spacer.gif" width="15" height="1" alt="">
            </td>
            <td>
                <img src="images/spacer.gif" width="89" height="1" alt="">
            </td>
            <td>
                <img src="images/spacer.gif" width="164" height="1" alt="">
            </td>
            <td>
                <img src="images/spacer.gif" width="27" height="1" alt="">
            </td>
            <td>
                <img src="images/spacer.gif" width="50" height="1" alt="">
            </td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
</body>

</html>## Heading ##

المحلول

You need style="margin: 0; border: 0; padding: 0; display: block;" on all images. Also, you can't start colspans with the first row being spanned, Outlook doesn't know how to handle the widths. See here for more information.

Beyond that, you should NEVER use slices to create entire html emails. It is really bad practice, as:

Images do not load by default in most email clients
Some spam filters will trigger as the ratio of text to image is too low
Long download times resulting in poor usability

You'll find a bunch of information on html email best practices here

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow