CODEWITHSUNDEEP
androidhtmlcssemailhtml-email
iAmBentley
iAmBentley

Reputation: 103

Align tables without using Float

Little history: I'm fairly new to coding (about a year). I'm in the process of designing an email for the company I work for. It is non-responsive and I am using tables. Being as I'm new, my experience with tables is nonexistent.

The design was created on a Mac using the Chrome Web Dev Tools to make adjustments visually. Everything looks perfect in Chrome, through Apple Mail (desktop), and on my iPhone 5. However, when I run a Litmus test, it flags the part of my design under the FEATURED FLAVORS section, saying that the email client(s) don't support Floats. Which is what I used to align the four tables in that section.

My question: can you align tables without using float?

The email client I'm most concerned with is the Android client, as we have a lot of customers on our list that use an Android device.

<table class="featured" align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-top: 1px solid #000000;margin-bottom: 20px;">
    <tr style="border-collapse: collapse;">
        <th width="100%" style="border-bottom: 1px solid #000000;"><h2 style="margin: 10px;"><span style="color:#039ADB;">Featured</span> Flavors</h2></th>
    </tr>
    <tr style="border-collapse: collapse;">
        <td align="left" style="text-align:left;border-collapse: collapse;">

            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td align="left"> 
                        <![endif]-->
                        <table class="feature block" align="center" cellpadding="0" cellspacing="0" border="0" width="48%" style="float:left; margin-right: 24px; margin-bottom:20px;margin-top: 20px;border-collapse: collapse;">
                            <tr style="border-collapse: collapse;">
                                <td align="left" class="featurePhoto" style="text-align:left;border-collapse: collapse;" colspan="2">
                                    <a href="http://www.vavavape.com/atalaya-reserve/" alt="VaVaVape Atalaya Reserve"><img src="https://gallery.mailchimp.com/98fef26bbba3c0e7861b10caf/images/232e18dd-8c8d-4540-bfab-147a13e2acfe.jpg" width="100%" alt="VaVaVape Atalaya Reserve" /></a>
                                </td> 
                            </tr>
                            <tr style="border-collapse: collapse;">
                                <td align="left" class="featureTitle" style="text-align: left; background-color: #039ADB; line-height: 40px; padding-left: 10px; color: #ffffff; font-weight: bolder;border-collapse: collapse;width: 225px;">
                                    <a href="http://www.vavavape.com/atalaya-reserve/" style="text-decoration:none;color:#ffffff;text-transform: none;"alt="VaVaVape Atalaya Reserve">Atalaya Reserve</a>
                                </td>
                                <td align="left" class="featureIcon" style="text-align:center; background-color:#000000;border-collapse: collapse;">
                                    <a href="http://www.vavavape.com/atalaya-reserve/" alt="VaVaVape Atalaya Reserve"><img src="https://gallery.mailchimp.com/98fef26bbba3c0e7861b10caf/images/dbfec759-f5be-46e3-99de-fe470e2726ca.jpg" alt="Shopping Cart Icon" /></a>
                                </td> 
                            </tr>
                        </table>
                        <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
            <![endif]-->

Here is the link on jsfiddle: http://jsfiddle.net/typojoe/7bgf7r7j/1/

Your help is appreciated and if you need more info, please let me know.

Upvotes: 0

Views: 264

Answers (3)

user2958788
user2958788

Reputation:

I would suggest getting rid of all of your floats. Most email clients won't play nice with these. Only use the align attribute and yes these can be used on tables. Although setting it on a cell/td, any table inside of that cell with inherit that alignment. However, if you wanted to have some tables on the right and some on the left to create a grid (which it looks like you want), then add alignment onto the tables as well to get this working.

Also, I feel that your code is over complicated with the 'conditional tables', especially for a non-responsive design. For now you can keep it, but I would suggest changing all outer table widths from 100% to 600. Your design isn't responsive, so there is no need for these to stretch to the viewport. You're only asking for the really problematic clients to mess with your design.

Try my suggestions above and let us know how it goes.

Please up-vote any answers that are helpful :)

Upvotes: 1

zazzyzeph
zazzyzeph

Reputation: 1795

Sure! Just nest more tables! <td align=""> is your main alignment tool. Also, I recommend using padding-top / padding-bottom on your <td>s to space things vertically. Margin isn't calculated well on a few clients.

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
    <td align="center" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse:collapse; padding:0; margin:0px;">
            <tr valign="top">
                <td align="left" valign="top">
                    <!-- CONTENT! -->
                </td>
            </tr>
        </table>
    </td>
</tr>

Upvotes: 0

Ahmadbaba46
Ahmadbaba46

Reputation: 231

Try this Style="display:inline;"

Upvotes: 0

Related Questions