8.1 水平合併儲存格
在表格中合併儲存格讓你可以創建更靈活和信息豐富的數據展示。 當你需要合併多個儲存格以創建標題或匯總數據時，這特別有用。 在HTML中，合併儲存格使用屬性colspan和rowspan。
屬性colspan
屬性colspan用於水平合併儲存格。它指定了一個儲存格應覆蓋多少列。 例如，如果你有一個儲存格的colspan="2"，它將占據該行中兩個普通儲存格的位置。
使用範例:
想像一下，你有一個有三列的表格，你想讓這行中的第一個儲存格占據兩列。 你可以使用colspan="2"來合併這兩個儲存格。這對於創建覆蓋多個列的標題或合併涉及多個類別的數據非常有用。
<table border="1">
<tr>
<th>名字</th>
<th>年齡</th>
<th>城市</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>倫敦</td>
</tr>
<tr>
<td colspan="2">總計</td>
<td>2 記錄</td>
</tr>
</table>
8.2 垂直合併儲存格
屬性rowspan用於垂直合併儲存格。它指定了一個儲存格應覆蓋多少行。 例如，如果你有一個儲存格的rowspan="2"，它將占據該列中兩個普通儲存格的位置。
使用範例:
想像一下，你有一個有三行的表格，你想讓這列中的第一個儲存格占據兩行。 你可以使用rowspan="2"來合併這兩個儲存格。這對於創建一個數據類別涉及多行的表格很有用，比如合併的標題或匯總數據。
<table border="1">
<tr>
<th>名字</th>
<th>項目</th>
<th>城市</th>
</tr>
<tr>
<td rowspan="2">Alice</td>
<td>項目 A</td>
<td>倫敦</td>
</tr>
<tr>
<td>項目 B</td>
<td>巴統</td>
</tr>
</table>
8.3 工作原理解釋
colspan 和 rowspan 的工作原理
水平合併 (colspan): 想像你在創建一個課程表格，其中一門課程在多個教室舉行。 你可以使用colspan來合併儲存格，指示一門課程覆蓋兩個時間段。
垂直合併 (rowspan): 想像你在創建一個比賽結果表，其中一位參賽者參加多個階段。 你可以使用rowspan合併儲存格，指出一位參賽者覆蓋兩個階段。
實際範例
創建覆蓋多個列的標題: 如果你有一個包含不同數據類別的表格，想要創建一個覆蓋多個列的標題，使用colspan。 例如，標題"員工信息"可以覆蓋"名字"、"年齡"和"部門"列。
垂直合併數據: 如果你有需要垂直合併的數據，例如一個人或物件的多個記錄，使用rowspan。 例如，如果你有項目相關的信息，一個項目佔據多行（例如，項目的階段），使用rowspan合併行。
8.4 範例
想像一下，你有一個表格顯示員工及其參與的不同項目：
- 員工: Ivan, Maria, Peter.
- 項目: 項目 A, 項目 B.
你想合併儲存格以顯示Ivan和Maria同時在兩個項目工作：
<table border="1">
<tr>
<th>名字</th>
<th>項目 A</th>
<th>項目 B</th>
<th>城市</th>
</tr>
<tr>
<td>Ivan</td>
<td colspan="2">是</td>
<td>倫敦</td>
</tr>
<tr>
<td>Maria</td>
<td colspan="2">是</td>
<td>倫敦</td>
</tr>
<tr>
<td>Peter</td>
<td>是</td>
<th>否</th>
<td>羅馬</td>
</tr>
</table>
或者，如果你想顯示Ivan在兩個項目工作：
<table border="1">
<tr>
<th>名字</th>
<th>項目</th>
<th>城市</th>
</tr>
<tr>
<td rowspan="2">Ivan</td>
<td>項目 A</td>
<td>倫敦</td>
</tr>
<tr>
<!-- empty -->
<td>項目 B</td>
<td>倫敦</td>
</tr>
<tr>
<td>Sergey</td>
<td>項目 C</td>
<td>羅馬</td>
</tr>
</table>
我特意在被相鄰單元格擴展"吃掉"的單元格位置放了一個註釋。這樣清楚地顯示其他的顯示位置。
GO TO FULL VERSION