4.1 使用表格

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

4.1.1 創(chuàng)建表格

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

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

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

□ <tr> 該標記表示表格中的行，使用</fr>標記表示結束。

□ <td> 該標記表示表格中的單元格，使用</td>標記表示結束。

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

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

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

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

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

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

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

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

4.2 編輯單元格

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

4.2.1 調(diào)整單元格

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

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

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

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

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

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

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

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

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

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

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

4.2.2 設置單元格背景

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

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

4.2.3 合并單元格

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

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

1. 左右合并

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

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

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

2. 上下合并

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

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

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

3. 上下左右合并

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

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

4.3 設置表格

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

4.3.1 定義表格

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

1. 定義表格大小

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

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

2. 定義表格的表頭

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

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

4.3.2 設置邊框類型

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

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

4.3.3 設置表格背景

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

1. 設置表格背景顏色

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

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

2. 設置表格背景圖片

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

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

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

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

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

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

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

其中，【排序表格】對話框中各選項的具體含義如下所述。

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

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

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

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

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

□ 排序標題行 啟用該復選框，可以指定使用與主體行相同的條件對表格的標題部分中的所有行進行排序。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 導出數(shù)據(jù)

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

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

最后，在彈出的【表格導出為】對話框中，設置保存位置和名稱，單擊【保存】按鈕即可，如下圖。

4.5 練習：制作個人簡歷

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

操作步驟

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

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

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

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

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

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

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

4.6 練習：制作購物車頁

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

操作步驟

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

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

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

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

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

STEP|06 設置第1行中單元格的屬性，并輸入相應的文本。

STEP|07 用同樣的方法，設置其他單元格屬性，并輸入相應的文本。