4.1 使用表格

表格的主要功能是對(duì)網(wǎng)頁元素進(jìn)行定位與排版。熟練的地用表格，不僅可以任意定位網(wǎng)頁元素，還可以豐富網(wǎng)頁的頁面效果。在創(chuàng)建表格之前，需要先來了解一下表格的基本結(jié)構(gòu)。

4.1.1 創(chuàng)建表格

在網(wǎng)頁中使用表格，可以更加清晰和直觀地顯示網(wǎng)頁內(nèi)容。HTML5中的表格類似于Excel表，一般由行、列和單元格組成，如下圖所示。

在HTML5中，用于創(chuàng)建表格的標(biāo)記包括下列3個(gè)。

□ <table> 該標(biāo)記是表格標(biāo)記，表示創(chuàng)建一個(gè)表格，與其他標(biāo)記一樣使用</table>標(biāo)記表示結(jié)束。

□ <tr> 該標(biāo)記表示表格中的行，使用</fr>標(biāo)記表示結(jié)束。

□ <td> 該標(biāo)記表示表格中的單元格，使用</td>標(biāo)記表示結(jié)束。

通常，完整的表格中會(huì)包含<table></table>標(biāo)記、<tr><／tr>和<td></td>標(biāo)記。例如，插入一個(gè)3行3列的表格，代碼如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

4.1.2 創(chuàng)建嵌套表格

嵌套表格是在另一個(gè)表格單元格中插入的表格，其設(shè)置屬性的方法與任何其他表格相同。例如，在上述表格中“赤壁”單元格中插入一個(gè)表示數(shù)字的2行2列的表格，代碼如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

4.1.3 創(chuàng)建標(biāo)題表格

通過插入表格和嵌套表格，用戶會(huì)發(fā)現(xiàn)所創(chuàng)建的表格都不包含表格標(biāo)題。此時(shí)，為了方便描述表格內(nèi)容，可使用<caption>標(biāo)記為表格添加標(biāo)題。添加表格標(biāo)題的示例代碼，如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

4.2 編輯單元格

創(chuàng)建表格之后，可以通過調(diào)整單元格、合并單元格、設(shè)置單元格背景等一系列的設(shè)置操作，達(dá)到美化表格的目的。

4.2.1 調(diào)整單元格

調(diào)整單元格包括調(diào)整單元格的列寬和行高，以及單元格的對(duì)齊方式。

1. 調(diào)整列寬與行高

在HTML5中，可通過在<tb>標(biāo)簽中添加width和height屬性的方法，來調(diào)整單元格的列寬與行高。調(diào)整列寬與行高的代碼，如下所示：

例如，如若創(chuàng)建一個(gè)3列3行，單元格寬度為60，高度為50的表格，代碼如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

2. 調(diào)整對(duì)齊方式

對(duì)齊方式包括水平對(duì)齊和垂直對(duì)齊，水平對(duì)齊包括左對(duì)齊、居中對(duì)齊和右對(duì)齊，垂直對(duì)齊包括頂端對(duì)齊、居中對(duì)齊、底部對(duì)齊和基線對(duì)齊。在HTML5中，水平對(duì)齊使用align屬性，垂直對(duì)齊則使用valign屬性。不同對(duì)齊方式的示例代碼如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

3. 調(diào)整邊距和間距

在HTML5中，可以通過調(diào)整單元格邊距和間距來調(diào)整單元格的大小。調(diào)整單元格的邊距，可通過cellspacing屬性來實(shí)現(xiàn)；而調(diào)整單元格的間距，則需要通過cellpadding屬性來實(shí)現(xiàn)。具體代碼如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

4.2.2 設(shè)置單元格背景

在HTML5中，可以為單元格設(shè)置背景顏色和背景圖片。例如，下面代碼中顯示了為單元格添加背景顏色的標(biāo)簽。

使用瀏覽器預(yù)覽，其效果如下圖所示。

4.2.3 合并單元格

合并單元格可以將同行或同列中的多個(gè)連續(xù)單元格合并為一個(gè)單元格，但所選連續(xù)的單元格必須可以組成一個(gè)矩形形狀，否則將無法合并單元格。

在HTML中，使用td標(biāo)記中的屬性即可實(shí)現(xiàn)合并單元格操作，合并單元格分為左右和上下合并兩種方式。

1. 左右合并

左右單元格的合并即合并左右相鄰的兩個(gè)及以上數(shù)量的單元格，可使用td標(biāo)記中的colspan屬性進(jìn)行合并，該屬性的語法格式如下：

在上述語法中，colspan屬性值表示需要進(jìn)行合并的單元格數(shù)量。左右合并單元格的示例代碼如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

2. 上下合并

上下單元格的合并即合并上下連續(xù)的兩個(gè)及以上數(shù)量的單元格，可使用<td>標(biāo)記中的rowspan屬性進(jìn)行合并，該屬性的語法格式如下所示：

在上述語法格式中，colspan屬性值表示進(jìn)行上下合并的單元格數(shù)量。上下合并單元格的示例代碼如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

3. 上下左右合并

在HTML5中，除了左右合并及上下合并單元格之外，還可以進(jìn)行上下左右合并單元格。其中，上下左右合并單元格的示例代碼，如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

4.3 設(shè)置表格

設(shè)置表格包括定義表格大小、定義表頭、設(shè)置邊框類型等內(nèi)容，通過設(shè)置表格可以使表格符合網(wǎng)頁的整體設(shè)計(jì)要求，從而達(dá)到美化和規(guī)范網(wǎng)頁的目的。

4.3.1 定義表格

定義表格包括定義表格的大小和定義表格的表頭兩部分內(nèi)容，定義表格的大小是調(diào)整表格的整體大小，而定義表頭則是設(shè)置表頭區(qū)域的格式。

1. 定義表格大小

在HTML5中，創(chuàng)建的表格大小是固定的，可通過下列代碼來調(diào)整表格大小：

使用瀏覽器預(yù)覽，其效果如下圖所示。

2. 定義表格的表頭

在HTML5中，可以通過<th>標(biāo)記定義表格中的表頭。表頭分為垂直和水平兩種類型，下面示例代碼中顯示了分別創(chuàng)建帶有垂直和水平表頭的表格。

使用瀏覽器預(yù)覽，其效果如下圖所示。

4.3.2 設(shè)置邊框類型

在HTML5中，可以使用表格的border屬性來定義表格的邊框類型，也就是定義表格的外邊框類型。不同邊框類型表格的示例代碼如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

4.3.3 設(shè)置表格背景

在HTML5中，可以像設(shè)置網(wǎng)頁背景那樣設(shè)置表格背景，從而增加表格的美觀性。

1. 設(shè)置表格背景顏色

設(shè)置表格的背景顏色與設(shè)置單元格的背景顏色大體一致，也是使用bgcolor屬性進(jìn)行設(shè)置。設(shè)置表格背景顏色的示例代碼如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

2. 設(shè)置表格背景圖片

在HTML5中，除了為表格設(shè)置背景顏色之外，還可以使用background屬性，為表格設(shè)置背景圖片。將圖片設(shè)置為表格背景的示例代碼如下所示：

使用瀏覽器預(yù)覽，其效果如下圖所示。

4.4 處理表格數(shù)據(jù)

目前，可以使用HTML5代碼插入和編輯表格，但無法單獨(dú)對(duì)表格數(shù)據(jù)進(jìn)行排序。只能借助JavaScript中的函數(shù)，以及HTML5編寫軟件Dreamweaver來排序表格數(shù)據(jù)。除此之外，還可以借助Dreamweaver軟件導(dǎo)入與導(dǎo)出外部數(shù)據(jù)和網(wǎng)頁數(shù)據(jù)。

4.4.1 排序數(shù)據(jù)

排序數(shù)據(jù)是指按照一定的規(guī)律對(duì)表格內(nèi)的單列數(shù)據(jù)進(jìn)行升序或降序排列。

選擇表格，執(zhí)行【命令】|【排序表格】命令。在彈出的【排序表格】對(duì)話框中，設(shè)置相應(yīng)的選項(xiàng)，單擊【確定】按鈕即可，如下圖所示。

其中，【排序表格】對(duì)話框中各選項(xiàng)的具體含義如下所述。

□ 排序按 用于設(shè)置進(jìn)行排序所依據(jù)的列。

□ 順序 用于設(shè)置排序的順序和方向，選擇“按字母順序”選項(xiàng)，將按照字母的排列進(jìn)行排序；而選擇“按數(shù)字順序”選項(xiàng)，則按照數(shù)字的排列進(jìn)行排序。當(dāng)選擇“升序”方向時(shí)，則表示排序按照數(shù)字從小到大，字母從A到Z的方向進(jìn)行排列；當(dāng)選擇“降序”方向時(shí)，則表示排序按照數(shù)字從大到小，字母從Z到A的方向進(jìn)行排列。

□ 再按 用于設(shè)置進(jìn)行排序所依據(jù)的第二依據(jù)的列。

□ 順序 用于設(shè)置第二依據(jù)的排序順序和方向。

□ 排序包含第一行 啟用該復(fù)選框，可以將表格第一行包含在排序中。

□ 排序標(biāo)題行 啟用該復(fù)選框，可以指定使用與主體行相同的條件對(duì)表格的標(biāo)題部分中的所有行進(jìn)行排序。

□ 排序腳注行 啟用該復(fù)選框，可以指定按照與主體行相同的條件對(duì)表格的腳注部分中所有的行進(jìn)行排序。

□ 完成排序后所有行顏色保持不變 啟用該復(fù)選框，可以指定排序之后表格行屬性應(yīng)該與同一內(nèi)容保持關(guān)聯(lián)。

4.4.2 導(dǎo)入／導(dǎo)出表格數(shù)據(jù)

Dreamweaver為用戶提供了導(dǎo)入／導(dǎo)出表格數(shù)據(jù)功能，通過該功能不僅可以將以分隔文本格式、Excel和Word等格式的數(shù)據(jù)導(dǎo)入到Dreamweaver中，還可以將Dreamweaver中的數(shù)據(jù)導(dǎo)出為普通的表格式數(shù)據(jù)。

1. 導(dǎo)入表格式數(shù)據(jù)

在Dreamweaver文檔中，執(zhí)行【文件】|【導(dǎo)入】|【表格式數(shù)據(jù)】命令，在彈出的【導(dǎo)入表格式數(shù)據(jù)】對(duì)話框中，設(shè)置相應(yīng)選項(xiàng)，單擊【確定】按鈕即可，如下圖。

其中，在【導(dǎo)入表格式數(shù)據(jù)】對(duì)話框中，主要包括下列7種選項(xiàng)。

□ 數(shù)據(jù)文件 用于設(shè)置所需導(dǎo)入的文件路徑，可通過單擊【瀏覽】按鈕，在彈出的對(duì)話框中選擇導(dǎo)入文件。

□ 定界符 用于設(shè)置導(dǎo)入文件中所使用的分隔符，包括“逗號(hào)”“引號(hào)”“分號(hào)”“Tab”和“其他”5種分隔符；當(dāng)用戶選擇“其他”分隔符時(shí)，則需要在右側(cè)的文本框中輸入新的分隔符。

□ 表格寬度 用于設(shè)置表格的寬度，選中“匹配內(nèi)容”選項(xiàng)可以使每個(gè)列足夠?qū)挘赃m應(yīng)該列中最長的文本字符串；選中“設(shè)置為”選項(xiàng)，既可以以px為單位指定表格的固定列寬，又可以按照瀏覽器窗口寬度的百分比來指定表格的列寬。

□ 單元格邊距 用于指定單元格內(nèi)容與單元格邊框之間的距離，以px為單位。

□ 單元格間距 用于指定相鄰單元格之間的距離，以px為單位。

□ 格式化首行 用于設(shè)置表格首行的格式，包括“無格式”“粗體”“斜體”和“加粗斜體”4種格式。

□ 邊框 用于指定表格邊框的寬度，以px為單位。

2. 導(dǎo)入Excel數(shù)據(jù)

在Dreamweaver文檔中，選擇導(dǎo)入位置，執(zhí)行【文件】|【導(dǎo)入】|【Excel文檔】命令，在彈出的【導(dǎo)入Excel文檔】對(duì)話框中，選擇Excel文件，單擊【打開】按鈕，如下圖。

此時(shí)，用戶可以在Dreamweaver文檔中，查看所導(dǎo)入的Excel文檔中的數(shù)據(jù)。對(duì)于導(dǎo)入的Excel數(shù)據(jù)表，用戶也可以選擇該表，在【屬性】面板中設(shè)置表格的基本屬性，如下圖。

3. 導(dǎo)入Word數(shù)據(jù)

在Dreamweaver文檔中，選擇導(dǎo)入位置，執(zhí)行【文件】|【導(dǎo)入】|【W(wǎng)ord文檔】命令，在彈出的【導(dǎo)入Word文檔】對(duì)話框中，選擇Word文件，單擊【打開】按鈕，如下圖。

此時(shí)，用戶可以在Dreamweaver文檔中，查看所導(dǎo)入的Word文檔中的數(shù)據(jù)，如下圖。

4. 導(dǎo)出數(shù)據(jù)

在Dreamweaver文檔中，除了可以導(dǎo)入外部數(shù)據(jù)之外，還可以將Dreamweaver文檔中的表格導(dǎo)出為普通的表格式數(shù)據(jù)。

首先，選擇表格或選擇任意一個(gè)單元格，執(zhí)行【文件】|【導(dǎo)出】|【表格】命令。然后，在彈出的【導(dǎo)出表格】對(duì)話框中，設(shè)置【定界符】選項(xiàng)，用于指定分隔符樣式；同時(shí)設(shè)置【換行符】選項(xiàng)，用于指定打開文件所使用的操作系統(tǒng)版本，并單擊【導(dǎo)出】按鈕，如下圖。

最后，在彈出的【表格導(dǎo)出為】對(duì)話框中，設(shè)置保存位置和名稱，單擊【保存】按鈕即可，如下圖。

4.5 練習(xí)：制作個(gè)人簡歷

表格在網(wǎng)頁中是用來定位和排版的，有時(shí)一個(gè)表格無法滿足所有的需要，這時(shí)就需要運(yùn)用到嵌套表格。在本練習(xí)中，將通過制作一份個(gè)人簡歷（如下圖），來詳細(xì)講述嵌套表格的使用方法和操作技巧。

操作步驟

STEP|01 創(chuàng)建CSS樣式。在<head></head>標(biāo)簽中間輸入<style></style>標(biāo)記，并在其中間輸入CSS樣式。

STEP|02 插入表格。在<body>標(biāo)記中輸入標(biāo)簽屬性代碼，同時(shí)輸入插入表格代碼，插入指定大小的3行3列的表格。

STEP|03 合并單元格。在第1個(gè)<td>標(biāo)簽中輸入合并屬性colspan="3"，合并3個(gè)單元格，同時(shí)刪除該標(biāo)簽下方的2行單元格標(biāo)記。

STEP|04 在合并后的單元格中輸入屬性代碼并插入圖片，然后在第2行中的第1和第3單元格中分別設(shè)置屬性，并插入圖片。

STEP|05 合并第3行中的所有單元格，并在合并后的單元格中插入圖片。

STEP|06 制作表格內(nèi)容。選擇第2行第2列單元格，設(shè)置其屬性值并插入一個(gè)27行5列的表格。然后，合并第1行所有單元格，設(shè)置其屬性并輸入文本。

STEP|07 根據(jù)簡歷設(shè)計(jì)要求，合并相應(yīng)的單元格，并分別設(shè)置不同單元格的不同背景顏色。然后，在各單元格中輸入相應(yīng)的文本及屬性。

4.6 練習(xí)：制作購物車頁

隨著網(wǎng)絡(luò)營銷的不斷擴(kuò)展，越來越多的用戶喜歡在網(wǎng)絡(luò)上購買物品，而網(wǎng)上商城也將逐步替代實(shí)體經(jīng)營店。用戶在網(wǎng)絡(luò)商城購物時(shí)，需要將當(dāng)前所需購買的商品放在購物車中（如下圖），以便選擇完所有的商品后一次性支付購物款項(xiàng)。此時(shí)，購物網(wǎng)站會(huì)通過一個(gè)表格將用戶所購買的商品逐個(gè)列舉，并計(jì)算總額供用戶查看和支付。在本練習(xí)中，將詳細(xì)介紹使用表格功能制作購物車網(wǎng)頁的操作方法。

操作步驟

STEP|01 鏈接CSS文件。首先，在<title></title>標(biāo)簽內(nèi)輸入網(wǎng)頁名稱。然后，在其后輸入鏈接CSS文件的代碼。

STEP|02 制作導(dǎo)航欄。在<body>標(biāo)簽后插入名為“header”的Div層，然后在該層中插入名為“l(fā)ogo”的Div層，在該層中插入圖片。

STEP|03 在“l(fā)ogo”層中插入名為“goto”的Div層，在該層中插入1行3列的表格，設(shè)置表格及單元格的屬性，并輸入相應(yīng)的文本。

STEP|04 在</div>與</body>之間插入名為“myCar”的Div層，在其后插入名為“carList”的Div層，緊接著插入名為“footer”的Div層，并在該層中輸入版尾信息。

STEP|05 將光標(biāo)定位在名為“carList”的Div層中，在該層中插入一個(gè)10行7列的表格，并設(shè)置表格屬性。設(shè)置不同行內(nèi)單元格的屬性，并輸入相應(yīng)的文本。

STEP|06 設(shè)置第1行中單元格的屬性，并輸入相應(yīng)的文本。

STEP|07 用同樣的方法，設(shè)置其他單元格屬性，并輸入相應(yīng)的文本。