表格是HTML中展示結構化數據的重要元素，而表格合并則是提升表格表現力的關鍵技術。本文將全面介紹HTML中的表格合并方法，幫助您創建更專業、更靈活的數據展示界面。

1. 表格合并基礎概念

在HTML中，表格合并主要通過兩個屬性實現：

• colspan - 水平合并單元格（跨列）
• rowspan - 垂直合并單元格（跨行）

1.1 基本語法

<td colspan="2">跨2列的單元格</td>
<td rowspan="3">跨3行的單元格</td>

2. colspan：水平單元格合并

2.1 基本使用

<table border="1"><tr><td colspan="2">合并的標題</td></tr><tr><td>數據1</td><td>數據2</td></tr>
</table>

2.2 復雜表頭示例

<table border="1"><tr><th colspan="3">銷售報表 - 2023</th></tr><tr><th>季度</th><th colspan="2">銷售額</th></tr><tr><th></th><th>產品A</th><th>產品B</th></tr>
</table>

2.3 注意事項

• 合并后要減少相應行的單元格數量
• 確保每行的總列數一致
• 避免過度合并導致表格結構混亂

3. rowspan：垂直單元格合并

3.1 基本使用

<table border="1"><tr><td rowspan="2">垂直合并</td><td>數據A</td></tr><tr><td>數據B</td></tr>
</table>

3.2 側邊欄示例

<table border="1"><tr><td rowspan="3">分類</td><td>項目1</td></tr><tr><td>項目2</td></tr><tr><td>項目3</td></tr>
</table>

3.3 注意事項

• 合并會影響下方行的單元格數量
• 后續行需要減少相應位置的單元格
• 垂直合并過多可能導致表格高度不均勻

4. colspan和rowspan組合使用

4.1 復雜表格結構

<table border="1"><tr><td rowspan="2">部門</td><td colspan="2">員工信息</td></tr><tr><td>姓名</td><td>工號</td></tr><tr><td rowspan="3">技術部</td><td>張三</td><td>001</td></tr><tr><td>李四</td><td>002</td></tr><tr><td>王五</td><td>003</td></tr>
</table>

4.2 日歷表示例

<table border="1"><tr><th colspan="7">2023年10月</th></tr><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr><tr><td colspan="5"></td><td>1</td><td>2</td></tr><!-- 其他行 -->
</table>

5. 高級技巧與最佳實踐

5.1 響應式表格合并

@media (max-width: 600px) {/* 小屏幕下調整合并策略 */.responsive-table td {display: block;}.responsive-table td[colspan] {display: table-cell;}
}

5.2 輔助可視化工具

使用開發者工具實時調整和預覽合并效果：

1. 右鍵點擊表格 → 檢查
2. 修改colspan/rowspan值
3. 實時查看效果

5.3 無障礙訪問考慮

<th scope="colgroup" colspan="2">合并標題</th>
<th scope="rowgroup" rowspan="3">分類</th>

5.4 動態合并的JavaScript實現

function mergeCells(tableId, columnIndex) {const table = document.getElementById(tableId);let previous = null;let count = 1;for (let i = 0; i < table.rows.length; i++) {const cell = table.rows[i].cells[columnIndex];if (previous && cell.innerHTML === previous.innerHTML) {count++;previous.rowSpan = count;cell.style.display = 'none';} else {previous = cell;count = 1;}}
}

6. 常見問題與解決方案

6.1 表格錯位問題

原因：合并后行列數不匹配
解決：確保每行總列數一致

6.2 邊框顯示異常

解決：使用CSS明確指定邊框

table {border-collapse: collapse;
}
td, th {border: 1px solid #ddd;
}

6.3 打印時合并單元格問題

解決：添加打印專用樣式

@media print {table { page-break-inside:auto }tr { page-break-inside:avoid }
}

7. 實際應用案例

7.1 財務報表

<table class="financial-report"><tr><th rowspan="2">項目</th><th colspan="3">2023年</th><th colspan="3">2022年</th></tr><tr><th>Q1</th><th>Q2</th><th>Q3</th><th>Q1</th><th>Q2</th><th>Q3</th></tr><!-- 數據行 -->
</table>

7.2 課程表

<table class="timetable"><tr><th>時間</th><th>周一</th><th>周二</th><!-- 其他工作日 --></tr><tr><td rowspan="2">8:00-9:30</td><td>數學</td><td>物理</td><!-- 其他單元格 --></tr><!-- 其他時間行 -->
</table>

8. 結語

表格合并是HTML表格處理中的重要技術，合理使用可以顯著提升數據展示的清晰度和專業性。掌握colspan和rowspan的配合使用，結合CSS樣式和JavaScript動態處理，可以創建出各種復雜的表格結構。記住在設計時要考慮響應式布局和無障礙訪問，確保表格在所有設備和用戶群體中都能良好呈現。