css之表格

表格在HTML初級指南中看起來夠複雜的了。也是，在一維的程式碼中表現二維的格確實有些困難。

嗯，它需要技巧。感謝rowspan和colspan屬性。這兩個臭雜種。

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

<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個跨越。