🔥 新功能登場《一頁式網頁》製作工具，讓你輕鬆打造吸睛網站，善用《表單網頁》有效搜集潛在客戶！ 立即開始捕捉新客戶 ▶︎
  1. 部落格
  3. 電子報優化
tintin ・

建立 Email HTML 版型 ：Responsive Email HTML 雙欄位、三欄位排版

上一篇文章：從零開始建立一個 Email HTML 模板 建立了基本的 Email HTML 知識，這篇進階教大家如何排版雙欄、三欄，並支援手機版本 responsive css。

以下的範例都是基於基礎篇的 <head> <body> <table> component 架構，在 table 裡的 <td> 開始製作。

EDM 雙欄設計：Email HTML two Column

step1. 製作兩個 td width=50%

簡易版本的範例，省去中間的文字與按鈕的 HTML，可以清楚辨識骨架：

<table class="row" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed">
  <tbody class="row__body">
    <tr class="row__row">
      <td width="50%" align="left" valign="top" class="row__column mobile-bottom-m col-50" style="width:50%;padding-left:0px;padding-right:8px">
        （圖片）width=280
        （文字）新品上架
        （文字）手工藺草帽（柿染） - NT$ 1,980
        （文字）圓領剪裁 / 直織紋針織面料 / 無內裡 / 無口袋 / 附圍脖 / 日常簡約舒適款
        （按鈕）購買
      </td>
      <td width="50%" align="left" valign="top" class="row__column mobile-bottom-m col-50" style="width:50%;padding-left:8px;padding-right:0px">
         （略）
      </td>
    </tr>
  </tbody>
</table>

step2. 圖片需要寫死 pixel

圖片的 Email HTML 寫法詳見此篇文章，算法：整體寬度 640px，左右寬度：32px，中間 16px，

圖片寬度為 (640-32*2-16) / 2=280。

這個範例是中間距離 16px，如果要調整距離大小，修改 <td> 的 padding-right, padding-left 即可。

step3. 在 <head> 裡面寫上 RWD css:

<style>
  @media only screen and (max-width:600px) {
    .row, .row__row, .row__body { display: block !important;}
    .row__column { display: block; box-sizing: border-box; float: left; }
    .col-50 { display: block; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
    .mobile-bottom-m { margin-bottom: 40px; }
  }
</style>

這會讓螢幕寬度小於 600px （手機版）的載具，呈現一欄的樣式。如果想要在手機上維持兩欄位的話可以省略此步驟。

全部的 Code 範例：

<td align="left" valign="top" style="padding-top:0px;padding-bottom:24px;padding-left:32px;padding-right:32px">
  <table class="row" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed">
    <tbody class="row__body">
      <tr class="row__row">
        <td width="50%" align="left" valign="top" class="row__column mobile-bottom-m col-50" style="width:50%;padding-left:0px;padding-right:8px">
          <table align="center" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="left" valign="top" width="280" style="padding-top:0px;padding-bottom:16px"><img class="img_block" width="280" src="https://s3.amazonaws.com/newsleopard-upload-img/402804946417b08001641afff295001f/2022-01-06-03-13-13-b01.jpg" style="display:inline-block;max-width:640px;vertical-align:bottom"></td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;font-weight:bold;font-size:14px;padding-top:4px;padding-bottom:8px;color:#4f7509;line-height:1.4;letter-spacing:1px;margin:0px"> 新品上架 </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="padding-top:4px;padding-bottom:8px">
                  <h1 style="color:#333333;font-size:20px;font-weight:bold;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;padding:0px;margin:0px;line-height:1.4;text-decoration:none;display:inline-block"><span class="a__text" style="color:#333333;text-decoration:none;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif">手工藺草帽（柿染） - NT$ 1,980</span></h1>
                </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;font-weight:normal;font-size:16px;padding-bottom:24px;color:#333333;line-height:1.5;margin:0px">
                  <div><span style="color: rgb(51, 51, 51);">圓領剪裁 / 直織紋針織面料 / 無內裡 / 無口袋 / 附圍脖 / 日常簡約舒適款</span></div>
                </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="center">
                  <table border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <!--[if mso | IE]>
                        <td align="center" bgcolor="#e6a04e" style="color:#ffffff;padding-top:8px;padding-bottom:8px;padding-left:40px;padding-right:40px">
                          <![endif]--><!--[if !mso]><!---->
                        <td align="center" bgcolor="#e6a04e" style="border-radius:20px">
                          <!-- <![endif]--><a class="dnd_button" target="_blank" style="display:inline-block;text-decoration:none;color:#ffffff;letter-spacing:1px;border-radius:20px;font-size:15px;font-weight:bold;padding-top:8px;padding-bottom:8px;padding-left:40px;padding-right:40px"><span class="a__text" style="color:#ffffff;text-decoration:none;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif">購買</span></a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td width="50%" align="left" valign="top" class="row__column mobile-bottom-m col-50" style="width:50%;padding-left:8px;padding-right:0px">
          <table align="center" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="left" valign="top" width="280" style="padding-top:0px;padding-bottom:16px"><img class="img_block" width="280" src="https://s3.amazonaws.com/newsleopard-upload-img/402804946417b08001641afff295001f/2022-01-06-03-13-24-b02.jpg" style="display:inline-block;max-width:640px;vertical-align:bottom"></td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;font-weight:bold;font-size:14px;padding-top:4px;padding-bottom:8px;color:#4f7509;line-height:1.4;letter-spacing:1px;margin:0px"> 新品上架 </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="padding-top:4px;padding-bottom:8px">
                  <h1 style="color:#333333;font-size:20px;font-weight:bold;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;padding:0px;margin:0px;line-height:1.4;text-decoration:none;display:inline-block"><span class="a__text" style="color:#333333;text-decoration:none;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif">真皮肩背手提兩用包（墨綠）- NT$ 4,300</span></h1>
                </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;font-weight:normal;font-size:16px;padding-bottom:24px;color:#333333;line-height:1.5;margin:0px">
                  <div><span style="color: rgb(51, 51, 51);">白車縫線造型 / 肩背式背帶可調整 / 拉鍊設計 / 有內裡 / 內ㄧ拉鍊夾層</span></div>
                </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="center">
                  <table border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <!--[if mso | IE]>
                        <td align="center" bgcolor="#e6a04e" style="color:#ffffff;padding-top:8px;padding-bottom:8px;padding-left:40px;padding-right:40px">
                          <![endif]--><!--[if !mso]><!---->
                        <td align="center" bgcolor="#e6a04e" style="border-radius:20px">
                          <!-- <![endif]--><a class="dnd_button" target="_blank" style="display:inline-block;text-decoration:none;color:#ffffff;letter-spacing:1px;border-radius:20px;font-size:16px;font-weight:bold;padding-top:8px;padding-bottom:8px;padding-left:40px;padding-right:40px"><span class="a__text" style="color:#ffffff;text-decoration:none;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif">購買</span></a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</td>

EDM 三欄設計：Email HTML three Column

step1. 將 td 分為三等分 width=33%

簡易版本的範例，省去中間的文字與按鈕的 HTML，可以清楚辨識骨架。

<table class="row" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed">
  <tbody class="row__body">
    <tr class="row__row">
      <td width="33%" align="left" valign="top" class="row__column mobile-bottom-m col-33" style="width:33%;padding-left:0px;padding-right:10px">
        （圖片）width=182
        （文字）小圓點棉質白襯衫
        （文字）特價 NT$ 1,888
        （按鈕）購買
      </td>
      <td width="33%" align="left" valign="top" class="row__column mobile-bottom-m col-33" style="width:33%;padding-left:5px;padding-right:5px">
        （略）
      </td>
      <td width="33%" align="left" valign="top" class="row__column mobile-bottom-m col-33" style="width:33%;padding-left:10px;padding-right:0px">
        （略）
      </td>
    </tr>
  </tbody>
</table>

step2. 圖片需要寫死 pixel

左右寬度：32px，中間 15px

15 除 3 為一個單位，這樣寬度才會平均分配。
第一欄 padding-right: 10px；第二欄 padding-left: 5px; padding-right: 5px；第三欄：padding-left: 10px，

圖片寬度為 (640-32*2-15*2) / 3 = 182。

step3. 在 <head> 裡面寫上 RWD css

<style>
  @media only screen and (max-width:600px) {
    .row, .row__row, .row__body { display: block !important;}
    .row__column { display: block; box-sizing: border-box; float: left; }
    .col-33 { display: block; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
    .mobile-bottom-m { margin-bottom: 40px; }
  }
</style>

這會讓螢幕寬度小於 600px （手機版）的載具，呈現一欄的樣式。如果想要在手機上維持三欄位的話可以省略此步驟。

全部的 Code:

<td align="left" valign="top" style="padding-top:0px;padding-bottom:40px;padding-left:32px;padding-right:32px">
  <table class="row" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed">
    <tbody class="row__body">
      <tr class="row__row">
        <td width="33%" align="left" valign="top" class="row__column mobile-bottom-m col-33" style="width:33%;padding-left:0px;padding-right:10px">
          <table align="center" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="left" valign="top" width="182" style="padding-top:0px;padding-bottom:16px"><img class="img_block" width="181.33" src="https://s3.amazonaws.com/prod-newsleopard-upload-img/nl/fashion-1.jpg" style="display:inline-block;max-width:640px;vertical-align:bottom"></td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="padding-top:4px;padding-bottom:8px">
                  <h1 style="color:#333333;font-size:17px;font-weight:bold;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;padding:0px;margin:0px;line-height:1.4;text-decoration:none;display:inline-block"><span class="a__text" style="color:#333333;text-decoration:none;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif">小圓點棉質白襯衫</span></h1>
                </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;font-weight:normal;font-size:16px;padding-bottom:24px;color:#333333;line-height:1.5;margin:0px">
                  <div><span style="color: rgb(34, 34, 34); font-size: 14px;"> 特價 NT$ 1,888</span></div>
                </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="center">
                  <table border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <!--[if mso | IE]>
                        <td align="center" bgcolor="#3b3b3b" style="color:#ffffff;padding-top:6px;padding-bottom:6px;padding-left:32px;padding-right:32px">
                          <![endif]--><!--[if !mso]><!---->
                        <td align="center" bgcolor="#3b3b3b" style="border-radius:18px">
                          <!-- <![endif]--><a class="dnd_button" target="_blank" style="display:inline-block;text-decoration:none;color:#ffffff;letter-spacing:1px;border-radius:18px;font-size:15px;font-weight:bold;padding-top:6px;padding-bottom:6px;padding-left:32px;padding-right:32px"><span class="a__text" style="color:#ffffff;text-decoration:none;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif">購買</span></a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td width="33%" align="left" valign="top" class="row__column mobile-bottom-m col-33" style="width:33%;padding-left:5px;padding-right:5px">
          <table align="center" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="left" valign="top" width="182" style="padding-top:0px;padding-bottom:16px"><img class="img_block" width="181.33" src="https://s3.amazonaws.com/prod-newsleopard-upload-img/nl/fashion-2.jpg" style="display:inline-block;max-width:640px;vertical-align:bottom"></td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="padding-top:4px;padding-bottom:8px">
                  <h1 style="color:#333333;font-size:17px;font-weight:bold;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;padding:0px;margin:0px;line-height:1.4;text-decoration:none;display:inline-block"><span class="a__text" style="color:#333333;text-decoration:none;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif">精裝版：無人之境淡香</span></h1>
                </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;font-weight:normal;font-size:16px;padding-bottom:24px;color:#333333;line-height:1.5;margin:0px">
                  <div><span style="color: rgb(34, 34, 34); font-size: 14px;"> 特價 NT$ 2,999</span></div>
                </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="center">
                  <table border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <!--[if mso | IE]>
                        <td align="center" bgcolor="#3b3b3b" style="color:#ffffff;padding-top:6px;padding-bottom:6px;padding-left:32px;padding-right:32px">
                          <![endif]--><!--[if !mso]><!---->
                        <td align="center" bgcolor="#3b3b3b" style="border-radius:18px">
                          <!-- <![endif]--><a class="dnd_button" target="_blank" style="display:inline-block;text-decoration:none;color:#ffffff;letter-spacing:1px;border-radius:18px;font-size:15px;font-weight:bold;padding-top:6px;padding-bottom:6px;padding-left:32px;padding-right:32px"><span class="a__text" style="color:#ffffff;text-decoration:none;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif">購買</span></a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td width="33%" align="left" valign="top" class="row__column mobile-bottom-m col-33" style="width:33%;padding-left:10px;padding-right:0px">
          <table align="center" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="left" valign="top" width="182" style="padding-top:0px;padding-bottom:16px"><img class="img_block" width="181.33" src="https://s3.amazonaws.com/prod-newsleopard-upload-img/nl/fashion-3.jpg" style="display:inline-block;max-width:640px;vertical-align:bottom"></td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="padding-top:4px;padding-bottom:8px">
                  <h1 style="color:#333333;font-size:17px;font-weight:bold;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;padding:0px;margin:0px;line-height:1.4;text-decoration:none;display:inline-block"><span class="a__text" style="color:#333333;text-decoration:none;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif">復古格紋西裝外套</span></h1>
                </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
              <tr>
                <td align="left" style="font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;font-weight:normal;font-size:16px;padding-bottom:24px;color:#333333;line-height:1.5;margin:0px">
                  <p><span style="font-size: 14px;">新上市 NT$ 7,699</span></p>
                </td>
              </tr>
            </tbody>
          </table>
          <table align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="center">
                  <table border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <!--[if mso | IE]>
                        <td align="center" bgcolor="#3b3b3b" style="color:#ffffff;padding-top:6px;padding-bottom:6px;padding-left:32px;padding-right:32px">
                          <![endif]--><!--[if !mso]><!---->
                        <td align="center" bgcolor="#3b3b3b" style="border-radius:18px">
                          <!-- <![endif]--><a class="dnd_button" target="_blank" style="display:inline-block;text-decoration:none;color:#ffffff;letter-spacing:1px;border-radius:18px;font-size:15px;font-weight:bold;padding-top:6px;padding-bottom:6px;padding-left:32px;padding-right:32px"><span class="a__text" style="color:#ffffff;text-decoration:none;font-family:'PingFang TC', '微軟正黑體', 'Microsoft JhengHei', Helvetica, Arial, sans-serif">購買</span></a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</td>

延伸閱讀：

從零開始建立一個 Email HTML 模版

覺得自己手寫 Email HTML 實在太辛苦？歡迎使用電子豹服務：

有任何問題，歡迎 Email 聯繫我：tin@newsleopard.tw

電子報優化
所有文章

給 UI/UX 產品設計師的 Email 設計攻略

Email 名單暴增 6 倍的秘訣！優化訂閱視窗的 6 大技巧