# 建立 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%

**分類：** 電子報優化  
**作者：** tin  
**發布日期：** 2023-03-25T18:24:52.000+08:00


上一篇文章：[從零開始建立一個 Email HTML 模板](https://blog.newsleopard.com/coding-html-emails/?ref=cms.newsleopard.com) 建立了基本的 Email HTML 知識，這篇進階教大家如何排版雙欄、三欄，並支援手機版本 responsive css。

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

## EDM 雙欄設計：Email HTML two Column

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/07/2-column.png)

### **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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/07/2-column-2.png)

圖片的 Email HTML 寫法詳見[此篇文章](https://blog.newsleopard.com/coding-html-emails/?ref=cms.newsleopard.com#email-html-image)，算法：整體寬度 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 （手機版）的載具，呈現一欄的樣式。如果想要在手機上維持兩欄位的話可以省略此步驟。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/07/rwd-email-2000x1498.jpg)

全部的 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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/07/3-column.png)

### **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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/07/3-column-2.png)

左右寬度：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 模版](https://blog.newsleopard.com/coding-html-emails/?ref=cms.newsleopard.com)

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

[![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/07/customized-banner-1.png)](https://newsleopard.com/newsleopard/services/customized-design?ref=cms.newsleopard.com)

有任何問題，歡迎 Email 聯繫我：[tin@newsleopard.tw](mailto:tin@newsleopard.tw)