HTML 4.0 語法表格標簽

 【網頁中的表格觀念】

　　舉個例子來說，如果今天我們要做一個3欄2列的表格，在WORD中，只要設定表格為3欄、2列就完成了，不過，在網頁中做一個3欄2列的表格，可是要分成好幾個步驟的，第一個步驟，利用<TABLE></TABLE>標簽告訴電腦我要做一個表格；第二個步驟，利用一組<TR></TR>標簽先做一個橫列，然後在橫列中利用三組<TD></TD>標簽再分出三欄；第三個步驟，重復第二個步驟，再做一橫列然後再分三欄，如此才能得到一個3欄2列的表格。聽不太懂嗎？沒關系，以下咱們就來慢慢的看個仔細：

　　首先我們來看一個最簡單的表格：

　　利用<TABLE>這個標簽來告訴電腦，這是一個表格，至於 BORDER=1 這參數是設定此表格的框線粗細為 1。一組<TR></TR>是設定一橫列的開始。一組<TD></TD>則是設定一個欄位。當然，文字就是要擺在這裡面。

　　現在我們再來增加二個格子：

　　看見沒有，<TR></TR>沒有增加，<TD></TD>卻增加了二組。那如果我要再加上一列呢？很簡單，就像這樣：

　　【合並表格欄位】

　　並非所有的表格都是規規矩矩的只有幾欄、幾列而已，有時候，我們還會希望能夠“合並欄位”，讓表格更美觀、更實用一點，而談到“合並欄位”，我們就必須知道，合並的方向有兩種：一種是上下合並（也就是橫列間的合並），一種是左右合並（也就是直欄間的合並），這兩種合並方式各有不同的屬性設定方法。

左右欄位合並：基本上，您的表格已經學會啰！接下來，咱們就來看看，如何將 1、2、3 格通通合並變成一大格：

　　您應該會發現，怎麼2、3都消失了？只剩下1，而且該欄的<TD>標簽還多了一個陌生的臉孔COLSPAN="3"，沒錯，這就是“左右欄位合並”的屬性，COLSPAN="3"的意思就是“這個欄位左右橫跨了3個欄位”，也正因如此，本來的兩個<TD>都可以省掉了，因為都被並掉了嘛！

　　上下欄位合並：學會了左右合並！接下來，咱們就來看看，如何上下合並，將 1、4格通通合並變成一大格：

　　有了上一次的經驗後，我們就知道，要合並欄位就一定有些欄位會被“犧牲”掉（也就是那些被合並的欄位啦！），這次我們要“上下合並”，我們將1與4合並成一個欄位，那麼被犧牲的是哪一個欄位呢？沒錯就是下面那一個倒楣的4，我們看看上圖，果然4已經刪掉了，而在1的<TD>標簽中則多了個生面孔ROWSPAN，這就是“上下欄位合並”的屬性，ROWSPAN=2的意思就是“這個欄位上下連跨了2個欄位”，其結果如下：

　　【表格欄位對齊位置設定】

　　我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的“寬”及“高”喔！我們來制作一個寬100、高60的表格，做法如下：

哎呀！怎麼 1 老是在表格的左邊呢？可以弄到中間嗎？當然可以，只要在<TD>加入 ALIGN=CENTER 這參數即可：

　　此外，利用 ALIGN=RIGHT可以讓表格中物件置右、利用 ALIGN=LEFT可以讓表格中物件置左（預設值），至於為什麼要加在<TD>中呢？因為，<TD>是一個欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在<TD>中。

　　既然可以置中，那麼也可以控制表格內文字靠上方、靠下方嗎？可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內物件靠上方對齊。