HTML常用標籤（二）

提到HTML，其中最讓人熟悉的應該是它的表格(table)吧。

表格的概念其實相當簡單 - 其實跟word中的表格完全一樣。在CSS尚未完善之前，不少的網頁排版其實是依靠表格完成。



table是一個對稱標籤，在HTML中插入<table>與</table>就會得到一個表格。


表格之所以為表格，就在於它有列<tr>與欄<td>。首先我們要先插入列：

<table>
      <tr>

      </tr>
</table>

注意，在<tr>與</tr>標籤中間，我們只能插入欄<td>：

<table>
      <tr>
            <td>
                  這是格子
            </td>
      </tr>
</table>

這是格子

好吧，目前為止妳可能覺得沒什麼了不起的，不過接下來我們試著在<tr>與</tr>中間插入兩個<td>：

<table>
      <tr>
            <td>
                  1
            </td>
            <td>
                  2
            </td>
      </tr>
</table>

1

2

神奇的事情發生了！它變成了一列兩攔的表格，接下來我們試著複製<tr></tr>面並貼到後面：

<table>
      <tr>
            <td>
                  1
            </td>
            <td>
                  2
            </td>
      </tr>
      <tr>
            <td>
                  3
            </td>
            <td>
                  4
            </td>
      </tr>
</table>

1	2
3	4

看！由於你貼上了另了一個含有兩欄<td>的列<tr>，所以妳現在又多了兩格，就像...excel或word那樣子！現在，我們將使用<td>的colspan與rowspan屬性來"合併儲存格"：

<table>
      <tr>
            <td rowspan="2">
                  1+3
            </td>
            <td>
                  2
            </td>
      </tr>
      <tr>
            <td>
                  4
            </td>
      </tr>
</table>

1+3	2
	4

這邊要注意一點，因為rowspan的值為"2"，也就是說第一列的第一欄將會延伸到第二列的第一欄，所以第二列必須要減去相應少掉的第一欄。（第二列只能塞一筆<td>）

接下來使用colspan屬性來延伸第一列的第一欄與第二欄：

<table>
      <tr>
            <td colspan="2">
                  1+2
            </td>
      </tr>
      <tr>
            <td>
                  3
            </td>
            <td>
                  4
            </td>
      </tr>
</table>

1+2
3	4

嘿，一切都在你的預料之中吧！colspan的值為"2"，所以第一列的第一欄將會延伸到第一列的第二欄，既然第二列的第二欄將被延伸掉，自然也就不用再寫它了。