先畫出完整格線，為互相嵌合的跨列儲存格規劃 HTML 表格：替每個合併儲存格指定一個矩形，並且只在矩形的起始位置寫入儲存格。本指南會以一個合成範例逐步說明，你可以在 Mac 上用 TextEdit 建立並預覽這個範例。
撰寫儲存格前先定義格線
這項任務是建立一個五欄表格，其中包含分組欄標題、一個同時跨越多列與多欄的儲存格，以及另一個跨越不同列數的儲存格。以下標籤與內容僅供示範：它們代表依欄位位置排列的中性節點區塊。
HTML 表格用來表示多維資料。表格中的儲存格必須完整涵蓋格線，且彼此不得重疊。如果你要呈現的只是互不相關方塊的頁面配置，HTML 標準建議作者改用 CSS Grid 等版面配置工具。此處每個區塊都與其列標題和欄標題有明確關聯，因此適合使用表格。HTML Standard：表格元素。
先列出整張表格中最細的欄位。本範例有 Slot、Node A、Node B、Node C 和 Note 五欄。Nodes 標題會涵蓋其中三欄；它不會新增一欄。
兩個跨距屬性的值都會計入儲存格的完整範圍，包括起始位置。因此，colspan="2" 會涵蓋兩欄，而 rowspan="2" 會涵蓋兩列。兩者同時使用時，就會形成一個二乘二的矩形。省略跨距屬性時，預設值為一。MDN：表格資料儲存格元素。
「互相嵌合」描述的是這些矩形如何拼合。每個儲存格仍然只有矩形範圍；單一儲存格不能繞過另一個儲存格。可以想像是在方格紙上排放標有文字的矩形。
為每一列製作欄位位置清單
使用展開式規劃表，讓重複的標籤呈現一個合併儲存格的範圍。清單中的重複標籤不代表要在 HTML 中重複撰寫該儲存格。標頭區段有兩列；本文區段有四列。
| 規劃列 | 第 1 欄 | 第 2 欄 | 第 3 欄 | 第 4 欄 | 第 5 欄 |
|---|---|---|---|---|---|
| 標頭 1 | Slot | Nodes | Nodes | Nodes | Note |
| 標頭 2 | Slot | Node A | Node B | Node C | Note |
| 本文 1 | Slot 1 | Block P | Block P | Block Q | Note X |
| 本文 2 | Slot 2 | Block P | Block P | Block R | Note X |
| 本文 3 | Slot 3 | Block S | Block T | Block T | Note X |
| 本文 4 | Slot 4 | Block U | Block U | Block U | Note Y |
接著記錄每個合併矩形的起始位置與尺寸。此處座標從一開始計數，並在每個區段中重新起算。
| 儲存格 | 起始位置 | 跨越列數 | 跨越欄數 |
|---|---|---|---|
| Slot 標題 | 標頭第 1 列、第 1 欄 | 2 | 1 |
| Nodes 標題 | 標頭第 1 列、第 2 欄 | 1 | 3 |
| Note 標題 | 標頭第 1 列、第 5 欄 | 2 | 1 |
| Block P | 本文第 1 列、第 2 欄 | 2 | 2 |
| Note X | 本文第 1 列、第 5 欄 | 3 | 1 |
| Block T | 本文第 3 列、第 3 欄 | 1 | 2 |
| Block U | 本文第 4 列、第 2 欄 | 1 | 3 |
有了這份清單，本文第 2 列這個較難處理的部分就很簡單了：Block P 已占據第 2 欄與第 3 欄，Note X 已占據第 5 欄。只有 Slot 2 和 Block R 從這一列開始，因此這一列只需要兩個儲存格元素。
每一列都依照以下步驟處理：
- 標出前面列開始的跨距所占據的位置。
- 找出第一個未被占據的欄位。
- 放入下一個儲存格，並標出其完整矩形範圍，包括後續列。
- 如果矩形的任何部分與已占據的位置重疊，就不要採用。
- 持續進行，直到五個欄位位置都已妥善安排。
這個流程是根據標準的表格模型整理出的規劃輔助方法。瀏覽器放置儲存格時會略過已占據的起始位置，但作者仍必須避免矩形彼此重疊。因此，只計算一列中的儲存格元素數量並不足夠。HTML Standard：處理模型。
一個實用的列檢查方式是：延續占據的欄位數 + 從本列新開始的儲存格所涵蓋的欄位數 = 五。本文第 2 列有三個延續占據的位置和兩個新位置。本文第 3 列有一個延續占據的位置和四個新位置。除了總數，也要檢查實際位置：只有總數相符，仍無法發現「一處重疊、另一處缺漏」的情況。
規劃列群組與標頭關聯
將兩列標頭都放在同一個 thead 中，並將四列本文都放在同一個 tbody 中。儲存格不能跨越不同列群組。例如，區塊 P 無法在一個 tbody 中開始，並在另一個中結束。標準也規定了表格子元素的順序：可選的 caption、欄群組、可選的 thead、本文列，以及可選的 tfoot。HTML Standard：表格。
本範例定義三個欄群組：Slot 一欄、Nodes 三欄、Note 一欄。Nodes 標題使用 scope="colgroup"；下層標題使用 scope="col"。W3C 的不規則標頭指南建議，群組標題應搭配明確的欄群組結構。含不規則標頭的表格。
幾何範圍與內容意義需要分別判斷。Block P 涵蓋兩個 Slot 列和兩個 Node 欄，因此它的預期標頭為 Slot 1、Slot 2、Nodes、Node A 和 Node B。Note X 則對應三個 Slot 列和 Note 欄。
對於這些合併資料儲存格，本範例透過在標頭儲存格中設定 id 值，並在每個資料儲存格的 headers 屬性中以空格分隔參照，明確指定關聯。W3C 說明了這種做法，適用於需要明確標示標頭關係的複雜表格。含多層級標頭的表格。
不要只因為文字相同，就合併彼此獨立的值。在這份合成文件中，Block P 刻意代表一個跨越四個位置的區塊。如果每個位置其實各自包含一筆觀測資料，請保留個別儲存格，讓表格維持這項區別。
在 Mac 上建立完整的 HTML 檔案
TextEdit 可以建立本機 HTML 文件。選擇 File > New，再選擇 Format > Make Plain Text。貼上以下完整文件，選擇 File > Save，並命名為 span-plan.html。如果系統詢問副檔名，請選擇 Use .html。這是 Apple 文件記載的 HTML 建立步驟。在 Mac 上使用 TextEdit 處理 HTML 文件。
這是一份完整的獨立文件，內含範例內容與樣式，不需要指令碼或外部資產。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interlocking span plan</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: 1rem; }
th, td { border: 1px solid #555; padding: 0.75rem; text-align: left; }
thead { background: #eee; }
</style>
</head>
<body>
<table>
<caption>Synthetic node blocks by slot</caption>
<colgroup span="1"></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="1"></colgroup>
<thead>
<tr>
<th rowspan="2" scope="col" id="slot">Slot</th>
<th colspan="3" scope="colgroup" id="nodes">Nodes</th>
<th rowspan="2" scope="col" id="note">Note</th>
</tr>
<tr>
<th scope="col" id="a">Node A</th>
<th scope="col" id="b">Node B</th>
<th scope="col" id="c">Node C</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="s1">Slot 1</th>
<td rowspan="2" colspan="2" headers="s1 s2 nodes a b">Block P</td>
<td headers="s1 nodes c">Block Q</td>
<td rowspan="3" headers="s1 s2 s3 note">Note X</td>
</tr>
<tr>
<th scope="row" id="s2">Slot 2</th>
<td headers="s2 nodes c">Block R</td>
</tr>
<tr>
<th scope="row" id="s3">Slot 3</th>
<td headers="s3 nodes a">Block S</td>
<td colspan="2" headers="s3 nodes b c">Block T</td>
</tr>
<tr>
<th scope="row" id="s4">Slot 4</th>
<td colspan="3" headers="s4 nodes a b c">Block U</td>
<td headers="s4 note">Note Y</td>
</tr>
</tbody>
</table>
</body>
</html>
在 Mac 上用瀏覽器開啟儲存的檔案，並對照欄位位置清單：Block P 應在 Nodes A 和 B 下方延伸至 Slots 1 和 2；Note X 應延伸至 Slots 1–3；Block T 應只在 Slot 3 中涵蓋 Nodes B 和 C。這三項檢查可以辨別預期的互相嵌合模式，以及只有矩形外框、內部配置錯誤的表格。
如果在 TextEdit 中重新開啟檔案時看到格式化內容，請選擇 File > Open，選取檔案，按一下 Show Options，再選取 Ignore rich text commands。Apple 也有記載後續編輯時可使用的設定：TextEdit > Settings > Open and Save，並可在其中啟用 Display HTML files as HTML code instead of formatted text。Apple 的 TextEdit HTML 指南。
診斷錯誤並更新規劃，同時保留結構
結果與規劃不符時，先檢查第一個出錯的列，以及延續到該列的矩形。調整間距或樣式前，先使用以下檢查項目。
| 症狀 | 檢查項目 | 本範例的修正方式 |
|---|---|---|
| 出現非預期的多餘欄位 | 新增的儲存格是否位於先前跨距已占據的位置 | 本文第 2 列只包含 Slot 2 和 Block R；移除該列的任何填充儲存格 |
| Block R 出現在錯誤的節點下方 | Block P 的寬度和高度 | 確認 Block P 同時設定了 rowspan="2" 和 colspan="2" |
| Note X 在 Slot 2 後就結束 | 其列數 | 將跨距設為三列 |
| 標頭層級無法對齊 | 第一列標頭和第二列的儲存格數 | Slot 和 Note 跨越兩列；第二列標頭只包含三個節點標題 |
| 合併儲存格缺少標頭 | 其 headers 參照 |
對照欄位位置清單，檢查所有涵蓋的列和欄 |
若某個位置代表實際的空值，使用空儲存格是恰當的。如果該位置已被跨距儲存格占據，就不需要再放入空儲存格。MDN 的儲存格文件說明，一般儲存格會放入可用位置，而跨距不得重疊。MDN：表格資料儲存格元素。
在這個固定範例中，請使用明確的正整數列數。特殊值 rowspan="0" 代表目前列群組剩餘的列數，因此新增一列可能會擴大該儲存格的涵蓋範圍。只有在「延伸至此群組結尾」符合預期關聯時，才使用這個值。MDN：列跨距行為。
插入、刪除或重新排列列之前，先更新欄位位置清單。如果在 Slots 1 和 2 之間插入一列，而且 Block P 應涵蓋該列，就增加 Block P 的跨距，並在其 headers 清單中加入新列標頭。另行檢視 Note X：插入同一列也可能改變它預期涵蓋的範圍。重新排列列時也要進行同樣檢查，因為跨距會跟著文件中的位置變動。
如果內容無法再組成容易理解的矩形，請簡化呈現方式。W3C 建議，如果多層級標頭讓單一表格難以理解，可以考慮拆成較小的表格。含多層級標頭的表格。
修改文件時，請將欄位位置清單放在原始碼旁邊。每次變更時，都先確定預期的矩形，只在起始位置撰寫儲存格，再檢查相關標頭。這樣就能以可重複的方式，同時保留表格形狀和內容所表達的關係。
資料來源
- HTML Standard — 表格式資料 — WHATWG。
<td>：表格資料儲存格元素 — MDN Web Docs。- 含不規則標頭的表格 — W3C Web 無障礙倡議。
- 含多層級標頭的表格 — W3C Web 無障礙倡議。
- 在 Mac 上使用 TextEdit 處理 HTML 文件 — Apple 支援。