求助：实现目标电子邮件模板布局（含居中与响应式适配）

架构老林

2026-5-27

Fixing Email Template Centering & Responsive Table Layout Issues

Hey there! I’ve built countless email templates over the years, so let’s work through your centering and responsive problems to get that letter-style layout you want.

First, let’s break down the key issues in your current code:

Your main table has duplicate id attributes (main and templateColumns), which causes styling conflicts
Email clients have spotty support for margin: auto—we need to use table-specific alignment for reliable centering
The responsive media query isn’t targeting elements correctly, and the full-width text section doesn’t span both columns
There’s an extra closing </a> tag in your bottom right column that breaks HTML validity

Step-by-Step Fixes

1. Fix Main Container Centering

Email templates rely on align="center" on parent tables for consistent centering across clients. We’ll wrap the main content in an outer table to handle background styles properly, and add a max-width to prevent stretching on large screens.

2. Clean Up Responsive Rules

We’ll fix the duplicate ID issue, adjust the media query to stack columns seamlessly on mobile, and ensure images scale without overflowing their containers.

3. Restructure for Letter-Style Layout

We’ll use colspan to make the full-width text section span both columns, add consistent padding to mimic a letter’s margins, and clean up invalid HTML tags.

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Letter-Style Email Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style type="text/css">
        @media only screen and (max-width: 480px){
            .templateColumns {
                width: 100% !important;
                display: block !important;
            }
            .templateColumnContainer {
                display: block !important;
                width: 100% !important;
                padding: 0 10px !important;
            }
            .columnImage {
                height: auto !important;
                max-width: 100% !important;
                width: 100% !important;
            }
            .leftColumnContent, .rightColumnContent {
                font-size: 16px !important;
                line-height: 125% !important;
            }
            .full-width-content {
                padding: 0 10px !important;
            }
        }

        /* Base desktop styles */
        body {
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .outer-container {
            width: 100%;
            table-layout: fixed;
            background: url(img/bg.png) center/cover no-repeat;
        }
        #main {
            width: 960px;
            max-width: 960px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 4px;
            padding: 20px;
        }
        .full-width-content {
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <table class="outer-container" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td align="center" valign="top">
                <table id="main" border="0" cellpadding="0" cellspacing="0" align="center">
                    <!-- Top Two Columns -->
                    <tr class="templateColumns">
                        <td align="center" valign="top" width="50%" class="templateColumnContainer">
                            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                                <tr>
                                    <td class="leftColumnContent">
                                        <img src="http://placekitten.com/g/480/150" width="280" style="max-width:280px;" class="columnImage" alt="Left column image" />
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top" class="leftColumnContent">
                                        <h1>Left Column</h1>
                                        Lorem ipsum dolor sit amet.
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td align="center" valign="top" width="50%" class="templateColumnContainer">
                            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                                <tr>
                                    <td class="rightColumnContent">
                                        <img src="http://placekitten.com/g/60/30" width="150" style="max-width:150px;" class="columnImage" alt="Right column image" />
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top" class="rightColumnContent">
                                        <h1>Right Column</h1>
                                        Lorem ipsum dolor sit amet.
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Full-Width Text Section -->
                    <tr>
                        <td colspan="2" class="full-width-content">
                            <h1>Lorem ipsum</h1>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit! obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit! obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
                            </p>
                        </td>
                    </tr>
                    <!-- Bottom Two Columns -->
                    <tr class="templateColumns">
                        <td align="center" valign="top" width="50%" class="templateColumnContainer">
                            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                                <tr>
                                    <td class="leftColumnContent" align="center">
                                        <img src="http://placekitten.com/g/200/50" width="280" style="max-width:280px;" class="columnImage" alt="Bottom left image" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td align="center" valign="top" width="50%" class="templateColumnContainer">
                            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                                <tr>
                                    <td class="rightColumnContent" align="center">
                                        <a href="www.google.com"><h2>Link here</h2></a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Key Email Template Best Practices

Always use align="center" on parent tables for centering—margin: auto fails in clients like Outlook
Use colspan for full-width sections to span multiple columns properly
Add alt text to all images for accessibility and clients that block image loading
Test your template across major clients (Gmail, Outlook, Apple Mail) using tools like Litmus or Email on Acid
Inline critical styles if sending to clients that strip embedded CSS (most modern clients support embedded styles now, but it’s a safe fallback)

内容的提问来源于stack exchange，提问作者Smithy