4.1 表格基本結(jié)構(gòu)及操作

HTML中的表格類似于Word軟件中的表格，尤其在使用網(wǎng)頁制作工具時(shí)，基本操作也很相似。HTML制作表格的原理是使用相關(guān)標(biāo)記定義完成，如表格對(duì)象<table>、行對(duì)象<tr>、單元格對(duì)象<td>，其中單元格的合并在表格操作中應(yīng)用廣泛。

4.1.1 表格基本結(jié)構(gòu)

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

圖4-1 表格的組成

<table>標(biāo)記用于標(biāo)識(shí)一個(gè)表格對(duì)象的開始，</table>標(biāo)記用于標(biāo)識(shí)一個(gè)表格對(duì)象的結(jié)束。一個(gè)表格中，只允許出現(xiàn)一對(duì)<table>標(biāo)記。在HTML5中不再支持它的任何屬性。

<tr>標(biāo)記用于標(biāo)識(shí)表格一行的開始，</tr>標(biāo)記用于標(biāo)識(shí)表格一行的結(jié)束。表格內(nèi)有多少對(duì)<tr></tr>標(biāo)記，就表示表格中有多少行。在HTML5中不再支持它的任何屬性。

<td>標(biāo)記用于標(biāo)識(shí)表格某行中的一個(gè)單元格開始，</td>標(biāo)記用于標(biāo)識(shí)表格某行中的一個(gè)單元格結(jié)束。<td></td>標(biāo)記書寫在<tr></tr>標(biāo)記內(nèi)，一對(duì)<tr></tr>標(biāo)記內(nèi)有多少對(duì)<td></td>標(biāo)記，就表示該行有多少個(gè)單元格。在HTML5中它僅有colspan和rowspan兩個(gè)屬性，詳見4.1.2小節(jié)。

最基本的表格，必須包含一對(duì)<table></table>標(biāo)記、一對(duì)或幾對(duì)<tr></tr>標(biāo)記以及一對(duì)或幾對(duì)<td></td>標(biāo)記。一對(duì)<table></table>標(biāo)記定義一個(gè)表格，一對(duì)<tr></tr>標(biāo)記定義一行，一對(duì)<td></td>標(biāo)記定義一個(gè)單元格。

例如，定義一個(gè)4行3列的表格。

【例4.1】（實(shí)例文件：ch04\4.1.html）

在IE 11.0中預(yù)覽網(wǎng)頁效果，如圖4-2所示。

圖4-2 表格基本結(jié)構(gòu)

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

4.1.2 合并單元格

在實(shí)際應(yīng)用中，并非所有表格都是規(guī)范的幾行幾列，有時(shí)需要將某些單元格進(jìn)行合并，以符合某種內(nèi)容上的需要。在HTML中合并的方向有兩種，一種是上下合并，一種是左右合并，這兩種合并方式只需要使用<td>標(biāo)記的兩個(gè)屬性即可。

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

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

     <td colspan="數(shù)值">單元格內(nèi)容</td>

其中，colspan屬性的取值為數(shù)值型整數(shù)數(shù)據(jù)，代表幾個(gè)單元格進(jìn)行左右合并。

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

【例4.2】（實(shí)例文件：ch04\4.2.html）

在IE 11.0中預(yù)覽網(wǎng)頁效果，如圖4-3所示。

圖4-3 單元格左右合并

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

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

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

     <td rowspan="數(shù)值">單元格內(nèi)容</td>

其中，rowspan屬性的取值為數(shù)值型整數(shù)數(shù)據(jù)，代表幾個(gè)單元格進(jìn)行上下合并。

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

【例4.3】（實(shí)例文件：ch04\4.3.html）

在IE 11.0中預(yù)覽網(wǎng)頁效果，如圖4-4所示。

圖4-4 單元格上下合并

從預(yù)覽圖中可以看到，A1和A2單元格合并成一個(gè)單元格。

通過上面對(duì)左右單元格合并和上下單元格合并的操作，讀者會(huì)發(fā)現(xiàn)合并單元格的實(shí)質(zhì)就是“丟掉”某些單元格。對(duì)于左右合并，就是以左側(cè)為準(zhǔn)，將右側(cè)要合并的單元格“丟掉”；對(duì)于上下合并，就是以上方為準(zhǔn)，將下方要合并的單元格“丟掉”。如果一個(gè)單元格既要向右合并，又要向下合并，該如實(shí)現(xiàn)呢？

【例4.4】（實(shí)例文件：ch04\4.4.html）

在IE 11.0中預(yù)覽網(wǎng)頁效果，如圖4-5所示。

圖4-5 兩個(gè)方向合并單元格

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

3．使用Dreamweaver CC合并單元格

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

圖4-6 表格屬性面板

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

圖4-7 拆分單元格有效