Div+Css教程模板無(wú)憂(yōu)>建站教程>Div+Css教程>XHTML教程>

HTML中級(jí)教程表格_XHTML教程

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

表格在HTML初級(jí)教程中看起來(lái)夠復(fù)雜的了。也是，在一維的代碼中表現(xiàn)二維的格確實(shí)有些困難。
嗯，它需要技巧。感謝rowspan和colspan屬性。這兩個(gè)臭雜種。

下面的代碼跟HTML初級(jí)指南中的表格教程類(lèi)似。

示例代碼 [m.dounai2.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>

首先，我們?cè)诘谝恍兄杏胻d標(biāo)簽取代了th標(biāo)簽。td是標(biāo)準(zhǔn)的數(shù)據(jù)單元格，th是單元格表頭。像td標(biāo)簽一樣，這些th標(biāo)簽也要用在tr標(biāo)簽里邊。

在一些td標(biāo)簽中，我們用到了colspan和rowspan屬性。在瀏覽器中查看，你會(huì)發(fā)現(xiàn)，在第二行中兩個(gè)單元格代替了三個(gè)，第二個(gè)單元格橫跨了兩列。colspan屬性，意即“列跨越”，將會(huì)跨越指定數(shù)目的單元格。就是說(shuō)，在這個(gè)例子中不再需要第三個(gè)td標(biāo)簽──兩個(gè)單元格個(gè)已經(jīng)合并成一個(gè)。

rowspan屬性跟colspan屬性類(lèi)似，顯而易見(jiàn)，它將跨越行。又，它跨越的單元格應(yīng)該被刪除。在這個(gè)例子中，因?yàn)樗缭搅怂男校@一行只有兩個(gè)單元格。

與那個(gè)簡(jiǎn)單的3x4，12個(gè)單元格的表格，我們也來(lái)算一下這些有合并單元格的表格數(shù)目。盡管只有10個(gè)單元格，但里面包含了2個(gè)跨越。