HTML中級教程表格_XHTML教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

表格在HTML初級教程中看起來夠復雜的了。也是，在一維的代碼中表現二維的格確實有些困難。
嗯，它需要技巧。感謝rowspan和colspan屬性。這兩個臭雜種。

下面的代碼跟HTML初級指南中的表格教程類似。

示例代碼 [www.wf0088.com]

<table border="1">
<tr>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
<th>Column 3 heading</th>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>
</tr>
<tr>
<td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

首先，我們在第一行中用td標簽取代了th標簽。td是標準的數據單元格，th是單元格表頭。像td標簽一樣，這些th標簽也要用在tr標簽里邊。

在一些td標簽中，我們用到了colspan和rowspan屬性。在瀏覽器中查看，你會發現，在第二行中兩個單元格代替了三個，第二個單元格橫跨了兩列。colspan屬性，意即“列跨越”，將會跨越指定數目的單元格。就是說，在這個例子中不再需要第三個td標簽──兩個單元格個已經合并成一個。

rowspan屬性跟colspan屬性類似，顯而易見，它將跨越行。又，它跨越的單元格應該被刪除。在這個例子中，因為它跨越了四行，這一行只有兩個單元格。

與那個簡單的3x4，12個單元格的表格，我們也來算一下這些有合并單元格的表格數目。盡管只有10個單元格，但里面包含了2個跨越。