电子邮件模板较小的表在表中

时间:2018-04-26 14:54:53

标签: html css html-email

我正在创建一个电子邮件模板,但我不知道如何在主表中创建一个较小的表:

下面的代码段可以有人帮我创建吗?



    /* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */

        #outlook a {
            padding: 0;
        }

        /* Force Outlook to provide a "view in browser" message */

        .ReadMsgBody {
            width: 100%;
        }

        .ExternalClass {
            width: 100%;
        }

        /* Force Hotmail to display emails at full width */

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
            line-height: 100%;
        }

        /* Force Hotmail to display normal line spacing */

        body,
        table,
        td,
        p,
        a,
        li,
        blockquote {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        /* Prevent WebKit and Windows mobile changing default text sizes */

        table,
        td {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        /* Remove spacing between tables in Outlook 2007 and up */

        img {
            -ms-interpolation-mode: bicubic;
        }

        /* Allow smoother rendering of resized image in Internet Explorer */

        /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */

        body {
            margin: 0;
            padding: 0;
        }

        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
        }

        table {
            border-collapse: collapse !important;
        }

        body,
        #bodyTable,
        #bodyCell {
            height: 100% !important;
            margin: 0;
            padding: 0;
            width: 100% !important;
        }

        /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */

        #bodyCell {
            padding: 20px;
        }

        #templateContainer {
            width: 600px;
        }

        /* ========== Page Styles ========== */

        /**
        * @tab Page
        * @section background style
        * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
        * @theme page
        */

        body,
        #bodyTable {
            /*@editable*/
            background-color: #DEE0E2;
        }

        /**
        * @tab Page
        * @section background style
        * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
        * @theme page
        */

        #bodyCell {
            /*@editable*/
            border-top: 4px solid #BBBBBB;
        }


        /**
        * @tab Page
        * @section heading 1
        * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
        * @style heading 1
        */

        h1 {
            /*@editable*/
            color: #202020 !important;
            display: block;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 26px;
            /*@editable*/
            font-style: normal;
            /*@editable*/
            font-weight: bold;
            /*@editable*/
            line-height: 100%;
            /*@editable*/
            letter-spacing: normal;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 10px;
            margin-left: 0;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Page
        * @section heading 2
        * @tip Set the styling for all second-level headings in your emails.
        * @style heading 2
        */

        h2 {
            /*@editable*/
            color: #404040 !important;
            display: block;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 20px;
            /*@editable*/
            font-style: normal;
            /*@editable*/
            font-weight: bold;
            /*@editable*/
            line-height: 100%;
            /*@editable*/
            letter-spacing: normal;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 10px;
            margin-left: 0;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Page
        * @section heading 3
        * @tip Set the styling for all third-level headings in your emails.
        * @style heading 3
        */

        h3 {
            /*@editable*/
            color: #606060 !important;
            display: block;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 16px;
            /*@editable*/
            font-style: italic;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            line-height: 100%;
            /*@editable*/
            letter-spacing: normal;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 10px;
            margin-left: 0;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Page
        * @section heading 4
        * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
        * @style heading 4
        */

        h4 {
            /*@editable*/
            color: #808080 !important;
            display: block;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 14px;
            /*@editable*/
            font-style: italic;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            line-height: 100%;
            /*@editable*/
            letter-spacing: normal;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 10px;
            margin-left: 0;
            /*@editable*/
            text-align: left;
        }

        /* ========== Header Styles ========== */

        /**
        * @tab Header
        * @section preheader style
        * @tip Set the background color and bottom border for your email's preheader area.
        * @theme header
        */

        #templatePreheader {
            /*@editable*/
            background-color: #F4F4F4;
            /*@editable*/
            border-bottom: 1px solid #CCCCCC;
        }

        /**
        * @tab Header
        * @section preheader text
        * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
        */

        .preheaderContent {
            /*@editable*/
            color: #808080;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 10px;
            /*@editable*/
            line-height: 125%;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Header
        * @section preheader link
        * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
        */

        .preheaderContent a:link,
        .preheaderContent a:visited,
        /* Yahoo! Mail Override */

        .preheaderContent a .yshortcuts
        /* Yahoo! Mail Override */

            {
            /*@editable*/
            color: #606060;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            text-decoration: underline;
        }

        /**
        * @tab Header
        * @section header style
        * @tip Set the background color and borders for your email's header area.
        * @theme header
        */

        #templateHeader {
            /*@editable*/
            background-color: #F4F4F4;
            /*@editable*/
            border-top: 1px solid #FFFFFF;
            /*@editable*/
            border-bottom: 1px solid #CCCCCC;
        }

        /**
        * @tab Header
        * @section header text
        * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
        */

        .headerContent {
            /*@editable*/
            color: #505050;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 20px;
            /*@editable*/
            font-weight: bold;
            /*@editable*/
            line-height: 100%;
            /*@editable*/
            padding-top: 0;
            /*@editable*/
            padding-right: 0;
            /*@editable*/
            padding-bottom: 0;
            /*@editable*/
            padding-left: 0;
            /*@editable*/
            text-align: left;
            /*@editable*/
            vertical-align: middle;
        }

        /**
        * @tab Header
        * @section header link
        * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
        */

        .headerContent a:link,
        .headerContent a:visited,
        /* Yahoo! Mail Override */

        .headerContent a .yshortcuts
        /* Yahoo! Mail Override */

            {
            /*@editable*/
            color: #EB4102;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            text-decoration: underline;
        }

        #headerImage {
            height: auto;
            max-width: 600px;
        }

        /* ========== Body Styles ========== */

        /**
        * @tab Body
        * @section body style
        * @tip Set the background color and borders for your email's body area.
        */

        #templateBody {
            /*@editable*/
            background-color: #ffffff;
            /*@editable*/
            border-top: 1px solid #FFFFFF;
            /*@editable*/
            border-bottom: 1px solid #CCCCCC;
        }

        /**
        * @tab Body
        * @section body text
        * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
        * @theme main
        */

        .bodyContent {
            /*@editable*/
            color: #505050;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 14px;
            /*@editable*/
            line-height: 150%;
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Body
        * @section body link
        * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
        */

        .bodyContent a:link,
        .bodyContent a:visited,
        /* Yahoo! Mail Override */

        .bodyContent a .yshortcuts
        /* Yahoo! Mail Override */

            {
            /*@editable*/
            color: #000;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            text-decoration: underline;
        }

        .bodyContent img {
            display: inline;
            height: auto;
            max-width: 560px;
        }

        /* ========== Footer Styles ========== */

        /**
        * @tab Footer
        * @section footer style
        * @tip Set the background color and borders for your email's footer area.
        * @theme footer
        */

        #templateFooter {
            /*@editable*/
            background-color: #F4F4F4;
            /*@editable*/
            border-top: 1px solid #FFFFFF;
        }

        /**
        * @tab Footer
        * @section footer text
        * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
        * @theme footer
        */

        .footerContent {
            /*@editable*/
            color: #808080;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 10px;
            /*@editable*/
            line-height: 150%;
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Footer
        * @section footer link
        * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
        */

        .footerContent a:link,
        .footerContent a:visited,
        /* Yahoo! Mail Override */

        .footerContent a .yshortcuts,
        .footerContent a span
        /* Yahoo! Mail Override */

            {
            /*@editable*/
            color: #606060;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            text-decoration: underline;
        }

        /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */

        @media only screen and (max-width: 480px) {
            /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
            body,
            table,
            td,
            p,
            a,
            li,
            blockquote {
                -webkit-text-size-adjust: none !important;
            }

            /* Prevent Webkit platforms from changing default text sizes */
            body {
                width: 100% !important;
                min-width: 100% !important;
            }

            /* Prevent iOS Mail from adding padding to the body */
            /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
            #bodyCell {
                padding: 10px !important;
            }

            /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
            /* ======== Page Styles ======== */
            /**
            * @tab Mobile Styles
            * @section template width
            * @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
            */
            #templateContainer {
                max-width: 600px !important;
                /*@editable*/
                width: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section heading 1
            * @tip Make the first-level headings larger in size for better readability on small screens.
            */
            h1 {
                /*@editable*/
                font-size: 24px !important;
                /*@editable*/
                line-height: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section heading 2
            * @tip Make the second-level headings larger in size for better readability on small screens.
            */
            h2 {
                /*@editable*/
                font-size: 20px !important;
                /*@editable*/
                line-height: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section heading 3
            * @tip Make the third-level headings larger in size for better readability on small screens.
            */
            h3 {
                /*@editable*/
                font-size: 18px !important;
                /*@editable*/
                line-height: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section heading 4
            * @tip Make the fourth-level headings larger in size for better readability on small screens.
            */
            h4 {
                /*@editable*/
                font-size: 16px !important;
                /*@editable*/
                line-height: 100% !important;
            }

            /* ======== Header Styles ======== */
            #templatePreheader {
                display: none !important;
            }

            /* Hide the template preheader to save space */
            /**
            * @tab Mobile Styles
            * @section header image
            * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
            */
            #headerImage {
                height: auto !important;
                /*@editable*/
                max-width: 600px !important;
                /*@editable*/
                width: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section header text
            * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
            */
            .headerContent {
                /*@editable*/
                font-size: 20px !important;
                /*@editable*/
                line-height: 125% !important;
            }

            /* ======== Body Styles ======== */
            /**
            * @tab Mobile Styles
            * @section body image
            * @tip Make the main body image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
            */
            #bodyImage {
                height: auto !important;
                /*@editable*/
                max-width: 560px !important;
                /*@editable*/
                width: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section body text
            * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
            */
            .bodyContent {
                /*@editable*/
                font-size: 18px !important;
                /*@editable*/
                line-height: 125% !important;
            }

            /* ======== Footer Styles ======== */
            /**
            * @tab Mobile Styles
            * @section footer text
            * @tip Make the body content text larger in size for better readability on small screens.
            */
            .footerContent {
                /*@editable*/
                font-size: 14px !important;
                /*@editable*/
                line-height: 115% !important;
            }

            .footerContent a {
                display: block !important;
            }

            /* Place footer social and utility links on their own lines, for easier access */
        }

        @font-face {
            font-family: 'Lato';
            font-style: normal;
            font-weight: 400;
            src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
        }

        body {
            font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
        }

<center>
        <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
            <tr>
                <td align="center" valign="top" id="bodyCell">
                    <!-- BEGIN TEMPLATE // -->
                    <table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
                        <tr>
                            <td align="center" valign="top">
                                <!-- BEGIN BODY // -->
                                <table border="0" cellpadding="0" width="600" id="templateBody">
                                    <tr bgcolor="#ffffff">
                                        <td colspan="3" height="15"></td>
                                    </tr>
                                    <tr>
                                        <th class="mail-title" style="font-size: 20px;">A report run was generated for Test client name!</th>
                                    </tr>

                                    <tr bgcolor="#ffffff">
                                        <td colspan="3" height="10"></td>
                                    </tr>

                                    <tr align='center'>
                                        <td>Client name: Test client name</td>
                                    </tr>

                                    <tr bgcolor="#ffffff">
                                        <td colspan="3" height="5"></td>
                                    </tr>

                                    <tr align='center'>
                                        <td>Report name: Test report name</td>
                                    </tr>

                                    <tr bgcolor="#ffffff">
                                        <td colspan="3" height="5"></td>
                                    </tr>

                                    <tr align='center'>
                                        <td> Executable: yes</td>
                                    </tr>

                                    <tr bgcolor="#ffffff">
                                        <td colspan="3" height="20"></td>
                                    </tr>

                                    <tr>
                                        <td align="center" valign="top">
                                            <table width="140" border="0" cellspacing="0" cellpadding="0">
                                                <tbody>
                                                    <tr>
                                                        <td height="35" align="center" valign="middle" style="background:#FFD668;-moz-border-radius: 4px;border-radius: 4px; font-size:14px; font-weight:normal; color:#FFF; text-transform:uppercase;"
                                                            mc:edit="t1-43">
                                                            <multiline>
                                                                <a href="http://tool.fingerspitz.nl.ebox/" style="text-decoration:none; color:#000;"><b>View</b></a>
                                                            </multiline>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>

                                    <tr bgcolor="#ffffff">
                                        <td colspan="3" height="20"></td>
                                    </tr>
                                </table>
                                <!-- // END BODY -->
                            </td>
                        </tr>

                        <tr>
                            <td align="center" valign="top">
                                <!-- BEGIN FOOTER // -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
                                    <tr>
                                        <td valign="top" style="background-color:#ffd668;" class="footerContent" mc:edit="footer_content00">
                                            <a style="border: 0;" href="http://www.fingerspitz.nl">
                                                <img src=" width="182" height="30">
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                                <!-- // END FOOTER -->
                            </td>
                        </tr>

                    </table>
                    <!-- // END TEMPLATE -->
                </td>
            </tr>
        </table>
    </center>
&#13;
&#13;
&#13;

enter image description here

必须看起来像父表中的灰色表

1 个答案:

答案 0 :(得分:1)

见下面的代码。

/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */

        #outlook a {
            padding: 0;
        }

        /* Force Outlook to provide a "view in browser" message */

        .ReadMsgBody {
            width: 100%;
        }

        .ExternalClass {
            width: 100%;
        }

        /* Force Hotmail to display emails at full width */

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
            line-height: 100%;
        }

        /* Force Hotmail to display normal line spacing */

        body,
        table,
        td,
        p,
        a,
        li,
        blockquote {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        /* Prevent WebKit and Windows mobile changing default text sizes */

        table,
        td {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        /* Remove spacing between tables in Outlook 2007 and up */

        img {
            -ms-interpolation-mode: bicubic;
        }

        /* Allow smoother rendering of resized image in Internet Explorer */

        /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */

        body {
            margin: 0;
            padding: 0;
        }

        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
        }

        table {
            border-collapse: collapse !important;
        }

        body,
        #bodyTable,
        #bodyCell {
            height: 100% !important;
            margin: 0;
            padding: 0;
            width: 100% !important;
        }

        /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */

        #bodyCell {
            padding: 20px;
        }

        #templateContainer {
            width: 600px;
        }

        /* ========== Page Styles ========== */

        /**
        * @tab Page
        * @section background style
        * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
        * @theme page
        */

        body,
        #bodyTable {
            /*@editable*/
            background-color: #DEE0E2;
        }

        /**
        * @tab Page
        * @section background style
        * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
        * @theme page
        */

        #bodyCell {
            /*@editable*/
            border-top: 4px solid #BBBBBB;
        }


        /**
        * @tab Page
        * @section heading 1
        * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
        * @style heading 1
        */

        h1 {
            /*@editable*/
            color: #202020 !important;
            display: block;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 26px;
            /*@editable*/
            font-style: normal;
            /*@editable*/
            font-weight: bold;
            /*@editable*/
            line-height: 100%;
            /*@editable*/
            letter-spacing: normal;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 10px;
            margin-left: 0;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Page
        * @section heading 2
        * @tip Set the styling for all second-level headings in your emails.
        * @style heading 2
        */

        h2 {
            /*@editable*/
            color: #404040 !important;
            display: block;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 20px;
            /*@editable*/
            font-style: normal;
            /*@editable*/
            font-weight: bold;
            /*@editable*/
            line-height: 100%;
            /*@editable*/
            letter-spacing: normal;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 10px;
            margin-left: 0;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Page
        * @section heading 3
        * @tip Set the styling for all third-level headings in your emails.
        * @style heading 3
        */

        h3 {
            /*@editable*/
            color: #606060 !important;
            display: block;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 16px;
            /*@editable*/
            font-style: italic;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            line-height: 100%;
            /*@editable*/
            letter-spacing: normal;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 10px;
            margin-left: 0;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Page
        * @section heading 4
        * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
        * @style heading 4
        */

        h4 {
            /*@editable*/
            color: #808080 !important;
            display: block;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 14px;
            /*@editable*/
            font-style: italic;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            line-height: 100%;
            /*@editable*/
            letter-spacing: normal;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 10px;
            margin-left: 0;
            /*@editable*/
            text-align: left;
        }

        /* ========== Header Styles ========== */

        /**
        * @tab Header
        * @section preheader style
        * @tip Set the background color and bottom border for your email's preheader area.
        * @theme header
        */

        #templatePreheader {
            /*@editable*/
            background-color: #F4F4F4;
            /*@editable*/
            border-bottom: 1px solid #CCCCCC;
        }

        /**
        * @tab Header
        * @section preheader text
        * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
        */

        .preheaderContent {
            /*@editable*/
            color: #808080;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 10px;
            /*@editable*/
            line-height: 125%;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Header
        * @section preheader link
        * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
        */

        .preheaderContent a:link,
        .preheaderContent a:visited,
        /* Yahoo! Mail Override */

        .preheaderContent a .yshortcuts
        /* Yahoo! Mail Override */

            {
            /*@editable*/
            color: #606060;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            text-decoration: underline;
        }

        /**
        * @tab Header
        * @section header style
        * @tip Set the background color and borders for your email's header area.
        * @theme header
        */

        #templateHeader {
            /*@editable*/
            background-color: #F4F4F4;
            /*@editable*/
            border-top: 1px solid #FFFFFF;
            /*@editable*/
            border-bottom: 1px solid #CCCCCC;
        }

        /**
        * @tab Header
        * @section header text
        * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
        */

        .headerContent {
            /*@editable*/
            color: #505050;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 20px;
            /*@editable*/
            font-weight: bold;
            /*@editable*/
            line-height: 100%;
            /*@editable*/
            padding-top: 0;
            /*@editable*/
            padding-right: 0;
            /*@editable*/
            padding-bottom: 0;
            /*@editable*/
            padding-left: 0;
            /*@editable*/
            text-align: left;
            /*@editable*/
            vertical-align: middle;
        }

        /**
        * @tab Header
        * @section header link
        * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
        */

        .headerContent a:link,
        .headerContent a:visited,
        /* Yahoo! Mail Override */

        .headerContent a .yshortcuts
        /* Yahoo! Mail Override */

            {
            /*@editable*/
            color: #EB4102;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            text-decoration: underline;
        }

        #headerImage {
            height: auto;
            max-width: 600px;
        }

        /* ========== Body Styles ========== */

        /**
        * @tab Body
        * @section body style
        * @tip Set the background color and borders for your email's body area.
        */

        #templateBody {
            /*@editable*/
            background-color: #ffffff;
            /*@editable*/
            border-top: 1px solid #FFFFFF;
            /*@editable*/
            border-bottom: 1px solid #CCCCCC;
        }

        /**
        * @tab Body
        * @section body text
        * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
        * @theme main
        */

        .bodyContent {
            /*@editable*/
            color: #505050;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 14px;
            /*@editable*/
            line-height: 150%;
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Body
        * @section body link
        * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
        */

        .bodyContent a:link,
        .bodyContent a:visited,
        /* Yahoo! Mail Override */

        .bodyContent a .yshortcuts
        /* Yahoo! Mail Override */

            {
            /*@editable*/
            color: #000;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            text-decoration: underline;
        }

        .bodyContent img {
            display: inline;
            height: auto;
            max-width: 560px;
        }

        /* ========== Footer Styles ========== */

        /**
        * @tab Footer
        * @section footer style
        * @tip Set the background color and borders for your email's footer area.
        * @theme footer
        */

        #templateFooter {
            /*@editable*/
            background-color: #F4F4F4;
            /*@editable*/
            border-top: 1px solid #FFFFFF;
        }

        /**
        * @tab Footer
        * @section footer text
        * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
        * @theme footer
        */

        .footerContent {
            /*@editable*/
            color: #808080;
            /*@editable*/
            font-family: Helvetica;
            /*@editable*/
            font-size: 10px;
            /*@editable*/
            line-height: 150%;
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
            /*@editable*/
            text-align: left;
        }

        /**
        * @tab Footer
        * @section footer link
        * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
        */

        .footerContent a:link,
        .footerContent a:visited,
        /* Yahoo! Mail Override */

        .footerContent a .yshortcuts,
        .footerContent a span
        /* Yahoo! Mail Override */

            {
            /*@editable*/
            color: #606060;
            /*@editable*/
            font-weight: normal;
            /*@editable*/
            text-decoration: underline;
        }

        /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */

        @media only screen and (max-width: 480px) {
            /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
            body,
            table,
            td,
            p,
            a,
            li,
            blockquote {
                -webkit-text-size-adjust: none !important;
            }

            /* Prevent Webkit platforms from changing default text sizes */
            body {
                width: 100% !important;
                min-width: 100% !important;
            }

            /* Prevent iOS Mail from adding padding to the body */
            /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
            #bodyCell {
                padding: 10px !important;
            }

            /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
            /* ======== Page Styles ======== */
            /**
            * @tab Mobile Styles
            * @section template width
            * @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
            */
            #templateContainer {
                max-width: 600px !important;
                /*@editable*/
                width: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section heading 1
            * @tip Make the first-level headings larger in size for better readability on small screens.
            */
            h1 {
                /*@editable*/
                font-size: 24px !important;
                /*@editable*/
                line-height: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section heading 2
            * @tip Make the second-level headings larger in size for better readability on small screens.
            */
            h2 {
                /*@editable*/
                font-size: 20px !important;
                /*@editable*/
                line-height: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section heading 3
            * @tip Make the third-level headings larger in size for better readability on small screens.
            */
            h3 {
                /*@editable*/
                font-size: 18px !important;
                /*@editable*/
                line-height: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section heading 4
            * @tip Make the fourth-level headings larger in size for better readability on small screens.
            */
            h4 {
                /*@editable*/
                font-size: 16px !important;
                /*@editable*/
                line-height: 100% !important;
            }

            /* ======== Header Styles ======== */
            #templatePreheader {
                display: none !important;
            }

            /* Hide the template preheader to save space */
            /**
            * @tab Mobile Styles
            * @section header image
            * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
            */
            #headerImage {
                height: auto !important;
                /*@editable*/
                max-width: 600px !important;
                /*@editable*/
                width: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section header text
            * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
            */
            .headerContent {
                /*@editable*/
                font-size: 20px !important;
                /*@editable*/
                line-height: 125% !important;
            }

            /* ======== Body Styles ======== */
            /**
            * @tab Mobile Styles
            * @section body image
            * @tip Make the main body image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
            */
            #bodyImage {
                height: auto !important;
                /*@editable*/
                max-width: 560px !important;
                /*@editable*/
                width: 100% !important;
            }

            /**
            * @tab Mobile Styles
            * @section body text
            * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
            */
            .bodyContent {
                /*@editable*/
                font-size: 18px !important;
                /*@editable*/
                line-height: 125% !important;
            }

            /* ======== Footer Styles ======== */
            /**
            * @tab Mobile Styles
            * @section footer text
            * @tip Make the body content text larger in size for better readability on small screens.
            */
            .footerContent {
                /*@editable*/
                font-size: 14px !important;
                /*@editable*/
                line-height: 115% !important;
            }

            .footerContent a {
                display: block !important;
            }

            /* Place footer social and utility links on their own lines, for easier access */
        }

        @font-face {
            font-family: 'Lato';
            font-style: normal;
            font-weight: 400;
            src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
        }

        body {
            font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
        }
<center>
        <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
            <tr>
                <td align="center" valign="top" id="bodyCell">
                    <!-- BEGIN TEMPLATE // -->
                    <table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
                        <tr>
                            <td align="center" valign="top">
                                <!-- BEGIN BODY // -->
                                <table border="0" cellpadding="0" width="600" id="templateBody">
                                    <tr bgcolor="#ffffff">
                                        <td colspan="3" height="15"></td>
                                    </tr>
                                    <tr>
                                        <th class="mail-title" style="font-size: 20px;">A report run was generated for Test client name!</th>
                                    </tr>

                                    <tr bgcolor="#ffffff">
                                        <td colspan="3" height="10"></td>
                                    </tr>

							 <tr bgcolor="#ffffff">
								 <td>
									 <table border="0" cellpadding="0" width="600" id="templateContainer">
										 <tr>
		     								 <td width="100" height="10"></td>
		     								 <td height="10"  bgcolor="#f4f4f4" style="border-radius:10px">
												<table border="0" cellpadding="0" cellspacing="0">
													<tr>
					                                            <td colspan="3" height="20"></td>
					                                        </tr>
													<tr align='center'>
														<td width="200"><b>Client name:</b><br> Test client name</td>
														<td width="200"><b>Client name:</b><br> Test client name</td>
					                                        </tr>
													<tr>
					                                            <td colspan="3" height="10"></td>
					                                        </tr>
													<tr align='center'>
														<td colspan="2">
					                                                <table width="140" border="0" cellspacing="0" cellpadding="0">
					                                                    <tbody>
					                                                        <tr>
					                                                            <td height="35" align="center" valign="middle" style="background:#FFD668;-moz-border-radius: 4px;border-radius: 4px; font-size:14px; font-weight:normal; color:#FFF; text-transform:uppercase;"
					                                                                mc:edit="t1-43">
					                                                                <multiline>
					                                                                    <a href="http://tool.fingerspitz.nl.ebox/" style="text-decoration:none; color:#000;"><b>View</b></a>
					                                                                </multiline>
					                                                            </td>
					                                                        </tr>
					                                                    </tbody>
					                                                </table>
														</td>
													<tr>
													<tr>
					                                            <td colspan="3" height="20"></td>
					                                        </tr>
													<tr align='center'>
														<td colspan="2"><b>Executable : <span style="color:green;">YES</span></b></td>
					                                        </tr>
													<tr>
					                                            <td colspan="3" height="20"></td>
					                                        </tr>
												</table>
											 </td>
		     								 <td width="100" height="10"></td>
										 </tr>
	     						 	 </table>
								 </td>
                                    </tr>

                                    <tr bgcolor="#ffffff">
                                        <td colspan="3" height="20"></td>
                                    </tr>
                                </table>
                                <!-- // END BODY -->
                            </td>
                        </tr>

                        <tr>
                            <td align="center" valign="top">
                                <!-- BEGIN FOOTER // -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
                                    <tr>
                                        <td valign="top" style="background-color:#ffd668;" class="footerContent" mc:edit="footer_content00">
                                            <a style="border: 0;" href="http://www.fingerspitz.nl">
                                                <img src=" width="182" height="30">
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                                <!-- // END FOOTER -->
                            </td>
                        </tr>

                    </table>
                    <!-- // END TEMPLATE -->
                </td>
            </tr>
        </table>
    </center>