Table-based 排版基礎
上一課我們知道了 Email 排版要用 Table。但 Table 排版跟你想的「Excel 表格」不太一樣——它更像是「用格子拼出版面」。
想像你要做一封商品推薦信：左邊放商品圖片，右邊放品名和價格。用 Table 就像在一張紙上畫格子，然後把內容放進去。
Table 基本結構
一個 Table 由三個標籤組成：
| 標籤 | 作用 | 比喻 |
|---|---|---|
<table> | 整個表格 | 一張紙 |
<tr> | 一列（row） | 紙上的一橫排 |
<td> | 一格（cell） | 每個格子 |
基本結構：
EDM 必備的 Table 屬性
在做 EDM 時，Table 標籤上通常要加這些屬性：
| 屬性 | 說明 | EDM 常用值 |
|---|---|---|
width | 表格寬度 | 600（Email 標準寬度） |
cellpadding | 格子內容與邊框的距離 | 0（用 inline CSS 的 padding 取代） |
cellspacing | 格子之間的距離 | 0（消除預設間距） |
border | 邊框粗細 | 0（不要邊框） |
align | 表格對齊方式 | center（置中） |
為什麼 cellpadding 和 cellspacing 設 0？ 因為預設值在不同郵件客戶端不一樣，設成 0 再用 inline CSS 控制間距，才能確保一致。
做一個左圖右文的商品卡片
電商 EDM 最常見的排版：左邊放商品圖，右邊放商品資訊。
關鍵技巧拆解
1. 圖片一定要加 width 和 display: block
<img src="..." width="220" style="display: block;" alt="商品圖片" />
width屬性（不是 CSS 的 width）：確保圖片大小一致display: block：消除圖片下方莫名的空白alt：圖片載不出來時顯示的替代文字
2. 用 vertical-align: top 對齊頂部
預設情況下，<td> 裡的內容會垂直置中。加上 vertical-align: top 讓內容靠上對齊，看起來更自然。
3. 用 width 控制欄位寬度
左欄 250px 放圖片，右欄 350px 放文字，加起來剛好 600px（Email 標準寬度）。
Table 巢狀：複雜排版的祕密
真實的 EDM 通常是「Table 裡面包 Table」：
外層 Table 控制整體寬度和區塊，內層 Table 負責商品排列。這就是 EDM 排版的核心模式。
AI 協作：學了這個，跟 AI 怎麼配合？
你現在懂 Table-based layout 了，可以更精準地指揮 AI。
你的人類優勢：
- 你能看出 AI 生成的 Table 結構是否正確（欄寬加起來對不對、有沒有漏掉 cellpadding="0"）
- 你知道什麼時候該用巢狀 Table
可以這樣跟 AI 說：
幫我做一封 EDM，用 600px 寬的 table layout。上方是標題列，下方是 2 欄商品展示（左圖右文），要加 cellpadding="0" cellspacing="0"。
練習題
互動示範
挑戰任務
做一個 600px 寬的 table，包含一列兩格：左邊放「夏季洋裝」（寬 300px），右邊放「NT$ 1,290」（寬 300px）。記得加上 cellpadding='0'、cellspacing='0'、border='0'。
做一個左圖右文的商品卡片：左邊放一張 200px 寬的圖片（用 https://via.placeholder.com/200x200），右邊放商品名稱「經典帆布鞋」、價格「NT$ 890」和一個「加入購物車」連結。整體寬度 600px。
做一個巢狀 Table：外層 table 寬 600px 有兩列，第一列是深色背景的標題「新品推薦」，第二列裡面放一個內層 table，內層有兩欄（各 50%），分別放商品 A 和商品 B 的名稱。