Vertically aligning image in table cell for html email

[AEM542]

Hi everyone,

The following html code is part of an html email that I’m working on:

<div >
        <table style="min-width:320px;" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
            <tbody >
                <tr >
                    <td >
                    <table class="flexible" width="600" align="center" style="margin:0 auto;" cellpadding="0" cellspacing="0">
                        <!-- Text Section -->
                        <tbody >
                            <tr>
                                <td class="p-w-mobile" style="font:12px/20px Helvetica, Arial, sans-serif; color:#565656; padding:0 20px 20px;" ice:editable="html" ice:options="bold, italic, link, fontcolor, unorderedlist, orderedlist, outdent, indent">
                                <br style="line-height:12px;">
                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. Duo deleniti phaedrum ut. An virtute senserit vituperatoribus ius, maluisset efficiendi vis ut. Eius ludus facete ex nec. Mei meis nonumy nemore ne, quo homero postulant et. <br>
                                <br>
                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. Duo deleniti phaedrum ut. An virtute senserit vituperatoribus ius, maluisset efficiendi vis ut. Eius ludus facete ex nec. Mei meis nonumy nemore ne, quo homero postulant et. <br>
                                <br>
                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. Duo deleniti phaedrum ut. An virtute senserit vituperatoribus ius, maluisset efficiendi vis ut. Eius ludus facete ex nec. Mei meis nonumy nemore ne, quo homero postulant et.
                                </td>
                            </tr>
                            <!-- Table-02 Section -->
                            <tr >
                                <td class="p-w-mobile" style="padding:0 20px 20px;">
                                <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                                    <tbody >
                                        <tr >
                                            <td style="border:1px solid #ada372;">
                                            <table width="100%" cellpadding="0" cellspacing="0">
                                                <tbody >
                                                    <tr ice:editable="section">
                                                        <td>
                                                        <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                                                            <tbody>
                                                                <tr>
                                                                    <td width="25%" height="60" bgcolor="#ada372">
                                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td align="center" valign="top" style="font:bold 12px/16px Arial, Helvetica, sans-serif; color:#fff; padding:10px 5px;" ice:editable="multiline"><img src="/email/2019/images/pic.jpg" width="100%" style="vertical-align:top;" alt="Image-Icons" ice:editable="image" title="Image-Icons"></td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                    <td height="60" bgcolor="#d1e2f4">
                                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font:12px/16px Arial, Helvetica, sans-serif; color:#222; padding:10px 20px;" ice:editable="multiline">Solupta quas dollaborem resequam faccatus sinusae cestrum faceptat laut quam, in elis eiunto magnihi llautende voluptatem hil experat quiscid itatemo lutempore ium quaes cusaeraere pro magni quod quis nis providis aut elique il eum elloria con nobis quas del minima nus entio. Nam et volorero modis ut landaecto int dent, et inisci adis aut exerest de sinctiatur, am esciam quatet venduciendam ipidenistrum exerum et exero maios aut qui sunt faccupt aturem am di blam natur?</td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        </td>
                                                    </tr>
                                                    <tr ice:editable="section">
                                                        <td>
                                                        <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                                                            <tbody>
                                                                <tr>
                                                                    <td width="25%" height="60" bgcolor="#ada372" style="border-top:1px solid #fff;">
                                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td align="center" valign="top" style="font:bold 12px/16px Arial, Helvetica, sans-serif; color:#fff; padding:10px 5px;" ice:editable="multiline"><img src="/email/2019/images/pic.jpg" width="100%" style="vertical-align:top;" alt="Image-Icons" ice:editable="image" title="Image-Icons"></td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                    <td height="60" bgcolor="#ffffff" style="border-top:1px solid #ada372;">
                                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font:12px/16px Arial, Helvetica, sans-serif; color:#222; padding:10px 20px;" ice:editable="multiline">
                                                                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. <br class="hide">
                                                                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. <br class="hide">
                                                                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. <br class="hide">
                                                                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. <br class="hide">
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        </td>
                                                    </tr>
                                                    <tr ice:editable="section">
                                                        <td>
                                                        <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                                                            <tbody>
                                                                <tr>
                                                                    <td width="25%" height="60" bgcolor="#ada372" style="border-top:1px solid #fff;">
                                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td align="center" valign="top" style="font:bold 12px/16px Arial, Helvetica, sans-serif; color:#fff; padding:10px 5px;" ice:editable="multiline"><img src="/email/2019/images/pic.jpg" width="100%" style="vertical-align:top;" alt="Image-Icons" ice:editable="image" title="Image-Icons"></td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                    <td height="60" bgcolor="#d1e2f4" style="border-top:1px solid #ada372;">
                                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font:12px/16px Arial, Helvetica, sans-serif; color:#222; padding:10px 20px;" ice:editable="multiline">
                                                                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. <br class="hide">
                                                                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. <br class="hide">
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        </td>
                                                    </tr>
                                                    <tr ice:editable="section">
                                                        <td>
                                                        <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                                                            <tbody>
                                                                <tr>
                                                                    <td width="25%" height="60" bgcolor="#ada372" style="border-top:1px solid #fff;">
                                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td align="center" valign="top" style="font:bold 12px/16px Arial, Helvetica, sans-serif; color:#fff; padding:10px 5px;" ice:editable="multiline"><img src="/email/2019/images/pic.jpg" width="100%" style="vertical-align:top;" alt="Image-Icons" ice:editable="image" title="Image-Icons"></td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                    <td height="60" bgcolor="#ffffff" style="border-top:1px solid #ada372;">
                                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font:12px/16px Arial, Helvetica, sans-serif; color:#222; padding:10px 20px;" ice:editable="multiline">
                                                                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. <br class="hide">
                                                                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. <br class="hide">
                                                                                Lorem ipsum dolor sit amet, est tincidunt democritum ut. <br class="hide">
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                        <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                                                            <tbody>
                                                                <tr>
                                                                    <td width="25%" height="60" bgcolor="#ada372" style="border-top:1px solid #fff;">
                                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td align="center" valign="top" style="font:bold 12px/16px Arial, Helvetica, sans-serif; color:#fff; padding:10px 5px; vertical-align:top;" ice:editable="multiline"><img src="/email/2019/images/pic.jpg" width="100%" alt="Image-Icons" ice:editable="image" title="Image-Icons"></td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                    <td height="60" bgcolor="#d1e2f4" style="border-top:1px solid #ada372;">
                                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font:12px/16px Arial, Helvetica, sans-serif; color:#222; padding:10px 20px;" ice:editable="multiline">Solupta quas dollaborem resequam faccatus sinusae cestrum faceptat laut quam, in elis eiunto magnihi llautende voluptatem hil experat quiscid itatemo lutempore ium quaes cusaeraere pro magni quod quis nis providis aut elique il eum elloria con nobis quas del minima nus entio. Nam et volorero modis ut landaecto int dent, et inisci adis aut exerest de sinctiatur, am esciam quatet venduciendam ipidenistrum exerum et exero maios aut qui sunt faccupt aturem am di blam natur?<br><br>Solupta quas dollaborem resequam faccatus sinusae cestrum faceptat laut quam, in elis eiunto magnihi llautende voluptatem hil experat quiscid itatemo lutempore ium quaes cusaeraere pro magni quod quis nis providis aut elique il eum elloria con nobis quas del minima nus entio. Nam et volorero modis ut landaecto int dent, et inisci adis aut exerest de sinctiatur, am esciam quatet venduciendam ipidenistrum exerum et exero maios aut qui sunt faccupt aturem am di blam natur?<br><br>Solupta quas dollaborem resequam faccatus sinusae cestrum faceptat laut quam, in elis eiunto magnihi llautende voluptatem hil experat quiscid itatemo lutempore ium quaes cusaeraere pro magni quod quis nis providis aut elique il eum elloria con nobis quas del minima nus entio. Nam et volorero modis ut landaecto int dent, et inisci adis aut exerest de sinctiatur, am esciam quatet venduciendam ipidenistrum exerum et exero maios aut qui sunt faccupt aturem am di blam natur?</td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                </td>
                            </tr>
                            <!-- End of Table-02 Section -->
                            <tr>
                                <td class="p-w-mobile" style="font:12px/20px Helvetica, Arial, sans-serif; color:#565656; padding:0 20px;" ice:editable="html" ice:options="bold, italic, link, fontcolor, unorderedlist, orderedlist, outdent, indent"> Your sincerely, <br>
                                <br>
                                <strong>Full Name</strong> <br>
                                Title </td>
                            </tr>
                            <!-- End of Text Section -->
                        </tbody>
                    </table>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>

Here is the css embedded in the file:

<style type="text/css">
            *{box-sizing:border-box;}
            a{color:#accdec; text-decoration:none; outline:none;}
            a:hover{color:#accdec !important; text-decoration:none !important;}
            .ExternalClass .nav a,
            .nav a{color:#fff !important;}
            .ExternalClass .nav a:hover,
            .nav a:hover{color:#010101 !important;}
            .active img:hover{opacity:0.8;}
            .active img{transition:all 0.3s ease;}
            a[x-apple-data-detectors]{color:inherit !important; text-decoration:none !important;}
            a img{border:none;}
            table td{mso-line-height-rule:exactly;}
            .ExternalClass, .ExternalClass a, .ExternalClass span, .ExternalClass b, .ExternalClass br, .ExternalClass p, .ExternalClass div{line-height:inherit;}
            @media only screen and (max-width:599px) {
            /* default style */
            table[class~="flexible"]{width:100% !important;}
            table[class~="table-center"]{float:none !important; margin:0 auto !important; width:auto !important;}
            *[class~="hide"]{display:none !important; width:0 !important; height:0 !important; padding:0 !important; font-size:0 !important; line-height:0 !important;}
            span[class~="db"]{display:block !important;}
            td[class~="img-flex"] img{width:100% !important; height:auto !important;}
            td[class~="aligncenter"]{text-align:center !important;}
            tr[class~="table-holder"]{display:table !important; width:100% !important;}
            th[class~="thead"]{display:table-header-group !important; width:100% !important;}
            th[class~="trow"]{display:table-row !important; width:100% !important;}
            th[class~="tfoot"]{display:table-footer-group !important; width:100% !important;}
            th[class~="flex"]{display:block !important; width:100% !important;}
            td[class="p-0"]{padding:0 !important;}
            /* custom style */
            td[class~="img-flex-2"] img{width:100% !important; height:32px !important;}
            td[class="w_-33p"]{width:33.33% !important;}
            td[class~="p-w-mobile"]{padding-left:3.33% !important; padding-right:3.33% !important;}
            td[class="col-01"] td,
            td[class="col-02"] td,
            td[class="col-03"] td{padding:4px 2px !important;}
            td[class="col-01"],
            td[class="col-02"],
            td[class="col-03"]{width:130px !important;}
            }
            @media only screen and (max-width:413px) {
            td[class="col-01"],
            td[class="col-02"]{width:117px !important;}
            td[class="col-03"]{width:116px !important;}
            }
            @media only screen and (max-width:374px) {
            td[class="col-01"]{width:99px !important;}
            td[class="col-02"],
            td[class="col-03"]{width:98px !important;}
            }
        </style>

I’m trying to align the images in the left column to the top of the table cell but can’t seem to do this.

I wondered if anyone could tell me how to adjust the code in order to achieve this?

Any help would be much appreciated.

Thanks in advance.

[Ray.H]

@AEM542

Any help would be much appreciated.

Hi,
Have you tried giving the alignment to all your <td> elements

td {vertical-align:top}

It works when I add it to the end of your CSS

[AEM542]

Thanks, I placed the css rule in the specific cells and this has worked so thanks very much for that.

I just have one more question if that’s ok? On mobile devices, I’d like the td cells within the tables to stack one on top of the other so that the td cell containing the first image goes first then the text in the td cell to the right of it falls beneath it. Then the second td cell (in the second row, first column) falls beneath and the text to the right of this falls beneath the second image, and so on and so forth for the other rows/cells. I’m fairly sure that the css at the top of the file allows for this but I’m just not sure what classes etc. need to be used to bring the effect about, ie. I don’t know which class to add to the elements in order to get it to work.

I tried adding class=“img-flex” to the td element that contains the image but this didn’t work.

I wondered if you could help with this?

Thanks again.

[PaulOB]

@AEM542

On mobile devices, I’d like the td cells within the tables to stack one on top of the other

Unless something has changed in the last year then that was impossible in IOS mobile as it simply would not allow table-cells to be become block elements and stack vertically. I tested this extensively last year and found no solution other than not using table-cells but of course then you break the normal email clients (you can fudge things with align=left and align=right to mimic floats etc but requires a lot of testing to get right).

For that reason its best not to have any cells side by side and have a more fluid email design.

Of course a 2 column design may also fit on mobile anyway as long as you keep the image small enough. I don’t see a problem with a small image and some text to the side. You could hide the image on small screens and then the remaining cell would stretch full width but it all depends how important the image is to you.

As I said I haven’t tested for a year but I don’t think anything has changed in ios mobile since then. You will need the meta viewport tag though if you want mobile email clients to recognise the media queries anyway,

If you want to test it out for yourself then you will need to set the relevant cells to display:block but bearing in mind you are probably in-lining your css then you would likely need to add classes just for small screens in your media queries and set all the table elements to block.

e.g.(inside the relevant media query)

table,tbody,thead,tr,td{display:block!important;}
tbody,thead,tr,td{width:auto!important;}

[AEM542]

Thanks for the information Paul. I’ll have to do some more testing.