4.1 表格基本結構及操作

HTML中的表格類似于Word軟件中的表格，尤其在使用網頁制作工具時，基本操作也很相似。HTML制作表格的原理是使用相關標記定義完成，如表格對象<table>、行對象<tr>、單元格對象<td>，其中單元格的合并在表格操作中應用廣泛。

4.1.1 表格基本結構

使用表格顯示數據，可以更直觀和清晰。在HTML文檔中表格主要用于顯示數據，雖然可以使用表格布局，但是不建議使用，它有很多弊端。表格一般由行、列和單元格組成，如圖4-1所示。

圖4-1 表格的組成

<table>標記用于標識一個表格對象的開始，</table>標記用于標識一個表格對象的結束。一個表格中，只允許出現一對<table>標記。在HTML5中不再支持它的任何屬性。

<tr>標記用于標識表格一行的開始，</tr>標記用于標識表格一行的結束。表格內有多少對<tr></tr>標記，就表示表格中有多少行。在HTML5中不再支持它的任何屬性。

<td>標記用于標識表格某行中的一個單元格開始，</td>標記用于標識表格某行中的一個單元格結束。<td></td>標記書寫在<tr></tr>標記內，一對<tr></tr>標記內有多少對<td></td>標記，就表示該行有多少個單元格。在HTML5中它僅有colspan和rowspan兩個屬性，詳見4.1.2小節。

最基本的表格，必須包含一對<table></table>標記、一對或幾對<tr></tr>標記以及一對或幾對<td></td>標記。一對<table></table>標記定義一個表格，一對<tr></tr>標記定義一行，一對<td></td>標記定義一個單元格。

例如，定義一個4行3列的表格。

【例4.1】（實例文件：ch04\4.1.html）

在IE 11.0中預覽網頁效果，如圖4-2所示。

圖4-2 表格基本結構

從預覽圖中讀者會發現，表格沒有邊框，行高及列寬也無法控制。上述知識講述時，提到HTML5中除了<td>標記提供兩個單元格合并屬性之外，<table>和<tr>標記已沒有任何屬性。那么如何修飾表格呢？表格的所有外觀設置都需要通過CSS樣式完成，詳見CSS章節部分。

4.1.2 合并單元格

在實際應用中，并非所有表格都是規范的幾行幾列，有時需要將某些單元格進行合并，以符合某種內容上的需要。在HTML中合并的方向有兩種，一種是上下合并，一種是左右合并，這兩種合并方式只需要使用<td>標記的兩個屬性即可。

1．用colspan屬性合并左右單元格

左右單元格的合并需要使用<td>標記的colspan屬性完成，格式如下：

     <td colspan="數值">單元格內容</td>

其中，colspan屬性的取值為數值型整數數據，代表幾個單元格進行左右合并。

例如，在上面的表格的基礎上，將A1和B1單元格合并成一個單元格。為第一行的第一個<td>標記增加colspan="2"屬性，并且將B1單元格的<td>標記刪除。

【例4.2】（實例文件：ch04\4.2.html）

在IE 11.0中預覽網頁效果，如圖4-3所示。

圖4-3 單元格左右合并

從預覽圖中可以看到，A1和B1單元格合并成一個單元格，C1還在原來的位置上。

2．用rowspan屬性合并上下單元格

上下單元格的合并需要為<td>標記增加rowspan屬性，格式如下：

     <td rowspan="數值">單元格內容</td>

其中，rowspan屬性的取值為數值型整數數據，代表幾個單元格進行上下合并。

例如，在上面的表格的基礎上，將A1和A2單元格合并成一個單元格。為第一行的第一個<td>標記增加rowspan="2"屬性，并且將A2單元格的<td>標記刪除。

【例4.3】（實例文件：ch04\4.3.html）

在IE 11.0中預覽網頁效果，如圖4-4所示。

圖4-4 單元格上下合并

從預覽圖中可以看到，A1和A2單元格合并成一個單元格。

通過上面對左右單元格合并和上下單元格合并的操作，讀者會發現合并單元格的實質就是“丟掉”某些單元格。對于左右合并，就是以左側為準，將右側要合并的單元格“丟掉”；對于上下合并，就是以上方為準，將下方要合并的單元格“丟掉”。如果一個單元格既要向右合并，又要向下合并，該如實現呢？

【例4.4】（實例文件：ch04\4.4.html）

在IE 11.0中預覽網頁效果，如圖4-5所示。

圖4-5 兩個方向合并單元格

從上面的代碼可以看到，A1單元格向右合并B1單元格，向下合并A2單元格，并且A2單元格向右合并B2單元格。

3．使用Dreamweaver CC合并單元格

使用HTML創建表格非常麻煩，Dreamweaver CC工具提供了表格的快捷操作，類似于在Word工具中編輯表格的操作。在Dreamweaver CC中創建表格，只需要單擊【插入】菜單下的【表格】命令，在出現的對話框中指定表格的行數、列數、寬度和邊框，即可在光標處創建一個空白表格。選擇表格之后，屬性面板提供了表格的常用操作，如圖4-6所示。

圖4-6 表格屬性面板

關于表格的操作不再贅述，請讀者自行操作，這里重點講解如何使用Dreamweaver CC合并單元格。在Dreamweaver CC可視化操作中，提供了合并與拆分單元格兩種操作。拆分單元格的操作，其實還是逆行的合并操作。進行單元格合并和拆分時，請將光標置于單元格內，如果選擇了一個單元格，拆分命令有效（如圖4-7所示），如果選擇了兩個或兩個以上單元格，合并命令有效。

圖4-7 拆分單元格有效