1、http:/教學提示和教學目的教學提示和教學目的5.1 插入表格插入表格 5.2 設置表格屬性設置表格屬性5.3 表格的根本操作表格的根本操作5.4 用表格陳列數據用表格陳列數據http:/n教學提示：對于網頁的排版規劃來說，表格是不可短少的教學提示：對于網頁的排版規劃來說，表格是不可短少的工具，作為一名網頁設計人員，表格運用的熟練與否直接工具，作為一名網頁設計人員，表格運用的熟練與否直接影響到網頁的美觀程度。本章著重引見表格的根本功能及影響到網頁的美觀程度。本章著重引見表格的根本功能及其操作，從創建表格、編輯表格、修正表格、創建表格特其操作，從創建表格、編輯表格、修正表格、創建表格特效等各個

2、方面作了詳細的論述，最后經過實例引見表格在效等各個方面作了詳細的論述，最后經過實例引見表格在版面規劃方面的運用。版面規劃方面的運用。n教學目的：教學目的：n掌握表格的插入掌握表格的插入n掌握表格的屬性掌握表格的屬性n掌握表格的根本操作掌握表格的根本操作n掌握表格陳列數據掌握表格陳列數據n創建網頁細線表格創建網頁細線表格n創建網頁圓角表格創建網頁圓角表格n利用表格規劃網頁利用表格規劃網頁http:/n表格在網頁中占有重要的位置，它不但可以記載表表格在網頁中占有重要的位置，它不但可以記載表單式的資料、規范各種數據、輸入列表式的文字，單式的資料、規范各種數據、輸入列表式的文字，而且利用它還可以陳列文

3、字和圖像。只需經過設置而且利用它還可以陳列文字和圖像。只需經過設置表格的寬度和高度，以及彼此之間的比例大小等，表格的寬度和高度，以及彼此之間的比例大小等，就可以把不同的網頁元素分別放置在不同的單元格就可以把不同的網頁元素分別放置在不同的單元格中。中。n5.1.1 表格的根本概念表格的根本概念n5.1.2 插入表格插入表格http:/n在開場制造表格之前，我們先對表格的各部分稱號在開場制造表格之前，我們先對表格的各部分稱號(如圖如圖5.1所所示示)做簡單引見。做簡單引見。n一張表格橫排叫行，縱排叫列，行列交叉部分就叫做單元格。一張表格橫排叫行，縱排叫列，行列交叉部分就叫做單元格。單元格中的內容和

4、邊框之間的間隔叫做邊距。單元格和單元格單元格中的內容和邊框之間的間隔叫做邊距。單元格和單元格之間的間隔叫做間距。整張表格的邊緣叫做邊框。之間的間隔叫做間距。整張表格的邊緣叫做邊框。n選中整個表格，就出現表格的【屬性】面板，可以在【屬性】選中整個表格，就出現表格的【屬性】面板，可以在【屬性】面板中輸入參數。面板中輸入參數。n選中單元格后【屬性】面板就發生相應變化，選擇行或者列都選中單元格后【屬性】面板就發生相應變化，選擇行或者列都屬于選中單元格。屬于選中單元格。http:/n在在Dreamweaver 8中插入表格的方中插入表格的方法很簡單，詳細操作步驟如下。法很簡單，詳細操作步驟如下。n(1)

5、 翻開網頁文檔，將鼠標指針置于翻開網頁文檔，將鼠標指針置于頁面中要插入表格的位置，選擇【插頁面中要插入表格的位置，選擇【插入】入】|【表格】命令，彈出【表格】【表格】命令，彈出【表格】對話框。對話框。n(2) 在對話框中輸入【行數】、【列在對話框中輸入【行數】、【列數】、【表格寬度】、【邊框粗細】、數】、【表格寬度】、【邊框粗細】、【單元格邊距】和【單元格間距】等，【單元格邊距】和【單元格間距】等，單擊【確定】按鈕，即可插入相應的單擊【確定】按鈕，即可插入相應的表格，如圖表格，如圖5.5所示。所示。n在創建表格時應留意以下幾個問題。在創建表格時應留意以下幾個問題。n整個表格不要都套在一個表格里

6、，盡整個表格不要都套在一個表格里，盡量拆分成多個表格。量拆分成多個表格。n表格的嵌套層次盡量要少，最好嵌套表格的嵌套層次盡量要少，最好嵌套表格不超越表格不超越3層。層。n表格的構造盡量整齊。表格的構造盡量整齊。http:/n在在Dreamweaver 8中為了使創建的表格更加美觀、中為了使創建的表格更加美觀、醒目，需求對表格的屬性醒目，需求對表格的屬性(如表格的顏色、單元格如表格的顏色、單元格的背景圖像、背景顏色等的背景圖像、背景顏色等)進展設置。進展設置。n5.2.1 設置表格屬性設置表格屬性n5.2.2 設置單元格屬性設置單元格屬性http:/n可以在表格【屬性】面板中對表格的屬性進展詳細

7、的設置。設置表格屬性之可以在表格【屬性】面板中對表格的屬性進展詳細的設置。設置表格屬性之前，首先要選中表格，出現如圖前，首先要選中表格，出現如圖5.6所示的表格【屬性】面板。所示的表格【屬性】面板。n在表格【屬性】面板中可以進展如下設置。在表格【屬性】面板中可以進展如下設置。n【對齊】：設置表格的對齊方式，其下拉列表中包含四個選項，分別是【默【對齊】：設置表格的對齊方式，其下拉列表中包含四個選項，分別是【默許】、【左對齊】、【居中對齊】和【右對齊】。許】、【左對齊】、【居中對齊】和【右對齊】。n【背景顏色】：設置表格的背景顏色?！颈尘邦伾浚涸O置表格的背景顏色。n【背景圖像】：設置表格的背景圖

8、像?！颈尘皥D像】：設置表格的背景圖像。n【邊框顏色】：設置表格的邊框顏色?！具吙蝾伾浚涸O置表格的邊框顏色。n【填充】：設置單元格內容和單元格邊境之間的像素數?！咎畛洹浚涸O置單元格內容和單元格邊境之間的像素數。n【間距】：設置相鄰的單元格之間的像素數?！鹃g距】：設置相鄰的單元格之間的像素數。n【邊框】：設置表格邊框的寬度?！具吙颉浚涸O置表格邊框的寬度。 http:/n將鼠標指針定位于單元格中，該單元格就處于選中形狀，此時【屬性】將鼠標指針定位于單元格中，該單元格就處于選中形狀，此時【屬性】面板中顯示出一切允許設置的單元格屬性選項，如圖面板中顯示出一切允許設置的單元格屬性選項，如圖5.7所示。所

9、示。n在單元格【屬性】面板中可以進展如下設置。在單元格【屬性】面板中可以進展如下設置。n【程度】：設置單元格中對象程度方向的對齊方式，其下拉列表框中包【程度】：設置單元格中對象程度方向的對齊方式，其下拉列表框中包含四個選項，分別是【默許】、【左對齊】、【居中對齊】和【右對含四個選項，分別是【默許】、【左對齊】、【居中對齊】和【右對齊】。齊】。n【垂直】：設置單元格中對象垂直方向的對齊方式，其下拉列表框中包【垂直】：設置單元格中對象垂直方向的對齊方式，其下拉列表框中包含五個選項，分別是【默許】、【頂端】、【居中】、【底部】和【基含五個選項，分別是【默許】、【頂端】、【居中】、【底部】和【基線】。

10、線】。n【寬與高】：設置單元格的寬與高?！緦捙c高】：設置單元格的寬與高。n【不換行】：表示單元格的寬度將隨文字長度的不斷添加而加長?！静粨Q行】：表示單元格的寬度將隨文字長度的不斷添加而加長。n【標題】：將當前單元格設置為標題行?！緲祟}】：將當前單元格設置為標題行。n【背景】：設置表格的背景圖像。【背景】：設置表格的背景圖像。n【邊框】：設置表格邊框的顏色。【邊框】：設置表格邊框的顏色。http:/n在網頁中，表格可用于網頁的版面設計，如文字放在網頁中，表格可用于網頁的版面設計，如文字放在頁面的某個位置，就可以運用表格，將文字放在在頁面的某個位置，就可以運用表格，將文字放在表格的某個單元格中并設

11、置表格的屬性即可。運用表格的某個單元格中并設置表格的屬性即可。運用表格可以明晰地顯示網頁元素的列表信息，從而使表格可以明晰地顯示網頁元素的列表信息，從而使網頁的可讀性更好。網頁的可讀性更好。n5.3.1 選擇表格選擇表格n5.3.2 添加行或列添加行或列n5.3.3 刪除行或列刪除行或列n5.3.4 合并單元格合并單元格n5.3.5 拆分單元格拆分單元格http:/n可以經過以下幾種方法選取整個表格。可以經過以下幾種方法選取整個表格。n單擊表格上的恣意一個邊框線。單擊表格上的恣意一個邊框線。n將鼠標指針置于表格內的恣意位置，選擇【修正】將鼠標指針置于表格內的恣意位置，選擇【修正】|【表格】【表

12、格】|【選擇表格】命令?！具x擇表格】命令。n將鼠標指針置于表格的左上角，按住鼠標左鍵不放拖動到表格的右下角，將一切將鼠標指針置于表格的左上角，按住鼠標左鍵不放拖動到表格的右下角，將一切的單元格選中，然后選擇【編輯】的單元格選中，然后選擇【編輯】|【全選】命令，如圖【全選】命令，如圖5.10所示。所示。n將鼠標指針置于表格內恣意位置，單擊文檔窗口左下角的將鼠標指針置于表格內恣意位置，單擊文檔窗口左下角的標簽，如圖標簽，如圖5.11所示。所示。 http:/n在制造網頁文檔時，在特殊情況下需求對表格添加行或列。添加行、列在制造網頁文檔時，在特殊情況下需求對表格添加行或列。添加行、列的詳細操作步驟如

13、下。的詳細操作步驟如下。n(1) 在已創建的表格中插入行，要先將鼠標指針置于要插入行的單元格在已創建的表格中插入行，要先將鼠標指針置于要插入行的單元格中，選擇【修正】中，選擇【修正】|【表格】【表格】|【插入行】命令，那么在鼠標指針所在單【插入行】命令，那么在鼠標指針所在單元格的上面添加了一行。元格的上面添加了一行。n(2) 插入列，要先將鼠標指針置于要插入列的單元格中，選擇【修正】插入列，要先將鼠標指針置于要插入列的單元格中，選擇【修正】|【表格】【表格】|【插入列】命令，那么在鼠標指針所在單元格的左側添加了【插入列】命令，那么在鼠標指針所在單元格的左側添加了一列。一列。n另外，選擇【修正】

14、另外，選擇【修正】|【表格】【表格】|【插入行或列】命令，在彈出【插入行【插入行或列】命令，在彈出【插入行或列】對話框中進展相應的設置也可以插入行或列。或列】對話框中進展相應的設置也可以插入行或列。n在【插入行或列】對話框中可以進展如下設置。在【插入行或列】對話框中可以進展如下設置。n【插入】：包含【行】和【列】兩個單項選擇按鈕，一次只能選擇其中【插入】：包含【行】和【列】兩個單項選擇按鈕，一次只能選擇其中一個來插入行或者列。該選項組的初始形狀選擇的是【行】選項，所以一個來插入行或者列。該選項組的初始形狀選擇的是【行】選項，所以下面的選項就是【行數】。假設選擇的是【列】選項，那么下面的選項下面

15、的選項就是【行數】。假設選擇的是【列】選項，那么下面的選項就變成了【列數】，在【列數】文本框內可以直接輸入要插入的列數。就變成了【列數】，在【列數】文本框內可以直接輸入要插入的列數。n【位置】：包含【所選之上】和【所選之下】兩個單項選擇按鈕。假設【位置】：包含【所選之上】和【所選之下】兩個單項選擇按鈕。假設【插入】選項選擇的是【列】選項，那么【位置】選項后面的兩個單項【插入】選項選擇的是【列】選項，那么【位置】選項后面的兩個單項選擇按鈕就會變成【在當前列之前】和【在當前列之后】。選擇按鈕就會變成【在當前列之前】和【在當前列之后】。http:/n將鼠標指針置于要刪除的將鼠標指針置于要刪除的行中，

16、選擇【修正】行中，選擇【修正】|【表【表格】格】|【刪除行】命令，即【刪除行】命令，即可刪除行，如圖可刪除行，如圖5.15所示。所示。將鼠標指針置于要刪除的將鼠標指針置于要刪除的列中，選擇【修正】列中，選擇【修正】|【表【表格】格】|【刪除列】命令，即【刪除列】命令，即可刪除列。可刪除列。n將鼠標指針置于要刪除的將鼠標指針置于要刪除的表格中，單擊鼠標右鍵，表格中，單擊鼠標右鍵，在彈出的快捷菜單中選擇在彈出的快捷菜單中選擇【刪除行或列】命令，也【刪除行或列】命令，也可以刪除相應的行或列?？梢詣h除相應的行或列。http:/n合并單元格就是將選中的多個延合并單元格就是將選中的多個延續單元格合并成一個

17、單元格。要續單元格合并成一個單元格。要合并單元格，首先將要合并的單合并單元格，首先將要合并的單元格選中，然后選擇【修正】元格選中，然后選擇【修正】|【表格】【表格】|【合并單元格】命令，【合并單元格】命令，即可將多個單元格合并成一個單即可將多個單元格合并成一個單元格，如圖元格，如圖5.16所示。所示。n合并單元格還有以下兩種方法。合并單元格還有以下兩種方法。n選中要合并的單元格，在【屬性】選中要合并的單元格，在【屬性】面板中單擊【合并所選單元格，面板中單擊【合并所選單元格，運用跨度】按鈕，即可合并單元運用跨度】按鈕，即可合并單元格。格。n 選中要合并的單元格，單擊鼠標選中要合并的單元格，單擊鼠

18、標右鍵，在彈出的快捷菜單中選擇右鍵，在彈出的快捷菜單中選擇【表格】【表格】|【合并單元格】命令，【合并單元格】命令，即可合并單元格。即可合并單元格。http:/n在網頁中設計中有時需求對表格進展拆分，拆分單元格的詳細操作步驟在網頁中設計中有時需求對表格進展拆分，拆分單元格的詳細操作步驟如下。如下。n(1) 將鼠標指針置于要拆分的單元格中，選擇【修正】將鼠標指針置于要拆分的單元格中，選擇【修正】|【表格】【表格】|【拆【拆分單元格】命令，彈出【拆分單元格】對話框。分單元格】命令，彈出【拆分單元格】對話框。n(2) 在對話框中將【把單元格拆分】設置為【列】，【列數】設置為在對話框中將【把單元格拆分

19、】設置為【列】，【列數】設置為3，單擊【確定】按鈕，即可拆分單元格。單擊【確定】按鈕，即可拆分單元格。 拆分單元格還有以下兩種方法。 將鼠標指針置于要拆分的單元格中，單擊鼠標右鍵，在彈出的快捷菜單中選擇【表 格】|【拆分單元格】命令，彈出【拆分單元格】對話框，在對話框中進行相應的 設置，即可拆分單元格。 單擊【屬性】面板中的【拆分單元格】按鈕，從彈出的【拆分單元格】對話框進行 設置即可。 提 示 http:/n在實踐設計中，有時需求把其他運用程序在實踐設計中，有時需求把其他運用程序(如如Excel、Access)建立的表格數據導入到網頁中，在建立的表格數據導入到網頁中，在Dreamweaver

20、中，利用【導入表格式數據】命令中，利用【導入表格式數據】命令可以很容易的實現這一導入功能，表格排序功能主可以很容易的實現這一導入功能，表格排序功能主要針對具有格式數據的表格而言，它根據表格列表要針對具有格式數據的表格而言，它根據表格列表中的數據來排序。中的數據來排序。 n5.4.1 導入表格式數據導入表格式數據n5.4.2 表格排序表格排序http:/n在導入表格式數據前，首先要將表格數據文件轉換成在導入表格式數據前，首先要將表格數據文件轉換成.txt(文本文件文本文件)格式，并且該文件中格式，并且該文件中的數據要帶有分隔符，如逗號、分號、冒號等。導入到的數據要帶有分隔符，如逗號、分號、冒號等

21、。導入到Dreamweaver中的數據不會出現中的數據不會出現分隔符，且會自動生成表格。分隔符，且會自動生成表格。n在【導入表格式數據】指定對話框中可以進展如下設置。在【導入表格式數據】指定對話框中可以進展如下設置。n【數據文件】：要導入的數據文件的保管途徑和文件名?！緮祿募浚阂獙氲臄祿募谋９芡緩胶臀募【定界符】：選擇定界符，使之與導入的數據文件格式匹配。有【定界符】：選擇定界符，使之與導入的數據文件格式匹配。有Tab、【逗點】、【分、【逗點】、【分號】、【引號】和【其他】號】、【引號】和【其他】5個選項。個選項。n【表格寬度】：設置導入表格的寬度?！颈砀駥挾取浚涸O置導入表格的寬度。n【匹配內容】：勾選此單項選擇按鈕，創建一個根據最長文件進展調整的表格?！酒ヅ鋬热荨浚汗催x此單項選擇按鈕，創建一個根據最長文件進展調整的表格。n【設置為】：勾選此單項選擇按鈕，在后面的文本框中輸入表格的寬度并設置其單位。【設置為】：勾選此單項選擇按鈕，在后面的文本框中輸入表格的寬度并設置其單位。n【單元格邊距】：設置單元格內容和單元格邊境之間的像素數。【單元格邊距】：設置單元格內容和單元格邊境之間的像素數。n【單元格間距】：設置相鄰的表格單元格間的像素數?！締卧耖g距】：設置相鄰的表格單元格間的像素數。n【格式化首行】：設置首行標題的格式?！靖袷交仔小浚涸O置