教你如何制作網(wǎng)頁表格

1、第7章 表 格7.1 創(chuàng)建表格7.2 編輯表格7.3 表格的格式化7.4 利用表格布局版面思考與練習(xí)17.1創(chuàng)創(chuàng)建建表格7.1.1表表格的的基本概概念在網(wǎng)頁中中，表格格的結(jié)構(gòu)構(gòu)如圖7.1所所示。表格由一一些線條條分開的的小格組組成。線線條即是是表格的的邊框，被邊框框分割開開來的區(qū)區(qū)域稱之之為單元元格，數(shù)數(shù)據(jù)、文文字、圖圖形、圖圖片等對(duì)對(duì)象均可可根據(jù)需需要放在在相應(yīng)的的單元格格中。位位于水平平方向上上的一系系列單元元格稱作作一行，位于垂垂直方向向上的一一系列單單元格稱稱作一列列。在單元格格中，可可以輸入入文字和和其他對(duì)對(duì)象，這這些文字字或?qū)ο笙笸瑔卧襁吘壘壷g的的距離稱稱作單元元格內(nèi)部部邊距

2、（cell padding）。單元格之之間的距距離稱作作單元格格間距（cell spacing）。2圖7.137.1.2插插入表表格【例7.1】插插入表格格 將插插入點(diǎn)放放置到文文檔中要要插入表表格的地地方。 執(zhí)行行Insert|Table（插入|表表格）命命令，或或單擊普普通對(duì)象象面板上上的InsertTable按鈕（見見圖7.2）。如果沒沒有預(yù)先先設(shè)置插插入點(diǎn)的的位置，可以直直接從對(duì)對(duì)象面板板中將該該按鈕拖拖動(dòng)到文文檔中需需要插入入表格的的位置，打開如如圖7.3所示示的對(duì)話話框，提提示確定定表格的的格式。 在Rows （行）文本本框中，輸入要要插入表表格的行行數(shù)。在Columns（列）文本

3、本框中，輸入要要插入表表格的列列數(shù)。在Cell Padding文本框中中，輸入入單元格格中對(duì)象象同單元元格內(nèi)部部邊界之之間的距距離，單單位為像像素點(diǎn)。4圖7.25圖7.36在Cell Spacing文本框中中，輸入入單元格格之間的的距離值值，單位位為像素素點(diǎn)。在Width文本框中中輸入表表格寬度度值，單單位可以以在右方方的下拉拉列表中中選擇。Pixel（像素），以絕對(duì)對(duì)的像素素值來設(shè)設(shè)置表格格寬度；Percent（百分比），設(shè)置置表格寬寬度同瀏瀏覽器窗窗口寬度度的百分分比。在Border（邊框）文文本框中中，輸入入邊框的的寬度，單位為為像素點(diǎn)點(diǎn)，0表表示無邊邊框。 設(shè)置置完畢，單擊OK按鈕，確

4、確定操作作。一個(gè)個(gè)表格就就會(huì)出現(xiàn)現(xiàn)在文檔檔中，如如圖7.4所示示。7.1.3在在表格格中添加加內(nèi)容表格的內(nèi)內(nèi)容要添添加到表表格的單單元格中中。單元元格中可可以插入入任何類類型的數(shù)數(shù)據(jù)，例例如文本本、圖像像、表單單甚至表表格等。同時(shí)也也可以按按照通常常的編輯輯頁面元元素的方方法，編編輯其中中的內(nèi)容容。例如如，可以以編輯其其中的文文本，也也可以設(shè)設(shè)置其中中的文本本格式。7圖7.48單擊要插插入內(nèi)容容的單元元格，可可以直接接插入、編輯文文本，也也可插入入圖像、導(dǎo)航條條、表單單等頁面面元素，方法同同不在表表格中的的方法完完全相同同。在一一個(gè)單元元格中輸輸入完畢畢，按Tab鍵，可以以將插入入點(diǎn)移動(dòng)動(dòng)到下

5、一一個(gè)單元元格中，以便繼繼續(xù)輸入入。如果果在當(dāng)前前行的最最后一個(gè)個(gè)單元格格中按Tab鍵，則將將插入點(diǎn)點(diǎn)移動(dòng)到到下一行行中的第第一個(gè)單單元格內(nèi)內(nèi)。按Shift+Tab鍵可將插插入點(diǎn)移移動(dòng)到上上一個(gè)單單元格。在當(dāng)前前行的第第一個(gè)單單元格中中按Shift+Tab鍵，則將將插入移移到上一一行中的的最后一一個(gè)單元元格內(nèi)。當(dāng)然，也可直直接用鼠鼠標(biāo)單擊擊需要輸輸入文本本的單元元格，直直接將插插入點(diǎn)轉(zhuǎn)轉(zhuǎn)移到該該單元格格中。圖圖7.5是在表表格中插插入的文文本和圖圖像。9圖7.5107.1.4利利用文文本文件件創(chuàng)建表表格如果已有有一些數(shù)數(shù)據(jù)在MicrosoftExcel的工作表表中，或或在MicrosoftAc

6、cess的數(shù)據(jù)庫庫中，或或在其他他形式的的文件系系統(tǒng)中，如果在在HTML文件中重重新輸入入這些數(shù)數(shù)據(jù)，就就會(huì)顯得得非常麻麻煩，如如果數(shù)據(jù)據(jù)量很大大，也就就不大現(xiàn)現(xiàn)實(shí)。在Dreamweaver中，允許許導(dǎo)入其其他類型型文檔中中的數(shù)據(jù)據(jù)，從而而避免了了再次輸輸入數(shù)據(jù)據(jù)的麻煩煩。1.生生成分隔隔符類型型的文本本數(shù)據(jù)文文件在Dreamweaver中，如果果要導(dǎo)入入表格數(shù)數(shù)據(jù)，必必須首先先將數(shù)據(jù)據(jù)存儲(chǔ)為為以某種種分隔符符作數(shù)據(jù)據(jù)間隔的的純文本本文件，圖7.6、圖圖7.7所示分分別是以以Tab和逗號(hào)作作分隔符符的數(shù)據(jù)據(jù)文件格格式。這這種格式式文件可可以使用用相應(yīng)軟軟件的存存儲(chǔ)工具具生成，如Microsof

7、tExcel中的“文文件|另另存為”命令等等，也可可以手工工編輯。11圖7.612圖7.713注意：文文件中中的一行行相當(dāng)于于表格的的一行，一行中中的各列列數(shù)據(jù)間間用Tab空格或逗逗號(hào)隔開開，在這這樣的文文件中，數(shù)據(jù)不不像表格格中的數(shù)數(shù)據(jù)排得得那樣整整齊。2.從從格式化化文本數(shù)數(shù)據(jù)文件件中導(dǎo)入入表格數(shù)數(shù)據(jù)【例7.2】利利用格式式化文本本創(chuàng)建表表格 執(zhí)行行File|Import（文件|導(dǎo)導(dǎo)入）命命令，再再選擇ImportTableData（導(dǎo)入表格格數(shù)據(jù)）；或執(zhí)執(zhí)行Insert|TabularData（插入|表表格數(shù)據(jù)據(jù)）；也也可以直直接單擊擊對(duì)象面面板上的的InsertTabularData（

8、插入表格格數(shù)據(jù)）按鈕(圖7.8)。打開InsertTabularData（插入表格格數(shù)據(jù)）對(duì)話框框（圖7.9），提示示選擇數(shù)數(shù)據(jù)文件件及格式式。14圖7.815圖7.916 在Data File（數(shù)據(jù)文件件）文本本框中，輸入含含有分隔隔符的數(shù)數(shù)據(jù)文件件的路徑徑和名稱稱，也可可以單擊擊Browse（瀏覽）按按鈕，從從磁盤上上選擇數(shù)數(shù)據(jù)文件件。 在Delimiter（分隔符）下拉列列表中，選擇文文本數(shù)據(jù)據(jù)文件中中所采用用的分隔隔符。例例如，如如果數(shù)據(jù)據(jù)文件采采用制表表符作為為分隔符符，則應(yīng)應(yīng)該選擇擇Tab（制表符）；如果果數(shù)據(jù)文文件中使使用逗號(hào)號(hào)作為分分隔符，則可以以選擇Comma（逗號(hào)）。其中分

9、分隔符種種類有以以下幾種種：Tab（制表符）、Comma（逗號(hào)）、Semicolon（分號(hào)）、Colon（冒號(hào)）、Other（其他）。如果在Delimiter（分隔符）下拉列列表中沒沒有合適適的分隔隔符號(hào)，則可以以選擇Other，然后在右右方的文文本框中中手工輸輸入需要要的分隔隔符。17在TableWidth（表格寬度度）區(qū)域域進(jìn)行表表格寬度度的設(shè)置置。選擇擇FitToData（配合數(shù)據(jù)據(jù)）單選選按鈕，則創(chuàng)建建的表格格中，每每個(gè)表格格列的寬寬度根據(jù)據(jù)數(shù)據(jù)的的長度而而定，使使之剛好好能夠容容納最長長的數(shù)據(jù)據(jù)。選擇擇Set（設(shè)置）單單選按鈕鈕，則可可以自行行指定表表格的列列寬，在在右方的的文本框框

10、中輸入入列寬數(shù)數(shù)值，在在下拉列列表中選選擇寬度度單位。在Cell Padding（單元格內(nèi)內(nèi)邊空）文本框框中，輸輸入單元元格中對(duì)對(duì)象同單單元格內(nèi)內(nèi)部邊界界之間的的距離。在Cell Spacing（單元格間間距）文文本框中中，輸入入單元格格之間的的距離。在FormatTop Row（格式化頂頂行）下下拉列表表中，可可以設(shè)置置表格頂頂行的文文字格式式。這可可以使表表格列所所表述的的主題更更加清晰晰，相當(dāng)當(dāng)于將表表頭突出出顯示。其中的的選擇有有：NoFormatting （不格式化化）、Bold（加粗）、Italic（傾斜）、Bold Italic（加粗傾斜斜）。在Border文本框中中，可以以輸入

11、表表格邊框框的寬度度。18 設(shè)置置完畢，單擊OK按鈕，確確定操作作。這時(shí)時(shí)數(shù)據(jù)源源文件中中的數(shù)據(jù)據(jù)就被導(dǎo)導(dǎo)入到文文檔中，同時(shí)創(chuàng)創(chuàng)建了相相應(yīng)的表表格。圖圖7.10就是是導(dǎo)入圖圖7.6的數(shù)據(jù)據(jù)生成的的表格。3.導(dǎo)導(dǎo)出表格格數(shù)據(jù)執(zhí)行File|Export|ExportTable（文件|導(dǎo)導(dǎo)出|導(dǎo)導(dǎo)出表格格）命令令可以將將網(wǎng)頁中中的表格格數(shù)據(jù)導(dǎo)導(dǎo)出到文文本文件件中，供供其他軟軟件使用用。參數(shù)數(shù)設(shè)置與與導(dǎo)入表表格類似似。19圖7.10207.2編編輯輯表格7.2.1選選中表表格元素素1.選選中整張張表格要要選中整整張表格格，有6種方法法： 將鼠鼠標(biāo)移動(dòng)動(dòng)到表格格的左上上角位置置，或是是表格上上邊框或或下

12、邊框框外附近近的任意意位置，當(dāng)鼠標(biāo)標(biāo)光標(biāo)呈呈現(xiàn)一個(gè)個(gè)交叉十十字的形形狀時(shí)單單擊鼠標(biāo)標(biāo)，即可可選中表表格，如如圖7.11所所示。 將鼠鼠標(biāo)移動(dòng)動(dòng)到表格格左方邊邊框之外外的區(qū)域域，當(dāng)鼠鼠標(biāo)指針針變?yōu)橹钢赶蛴疑仙戏降募^形形狀時(shí)時(shí)，單擊擊鼠標(biāo)，即可選選中整張張表格。 單擊擊表格中中任意位位置，然然后執(zhí)行行Modify|Table|Select Table（修改|表表格|選選擇表格格）命令令，這時(shí)時(shí)整張表表格被選選中。21圖7.1122 單擊擊表格中中任意位位置，執(zhí)執(zhí)行Edit|SelectAll（編輯|全全選）命命令，或或是按Ctrl+A鍵。 單擊擊表格中中的任意意位置，然后在在文檔窗窗口左下下方

13、狀態(tài)態(tài)行上標(biāo)標(biāo)記選擇擇器中單單擊標(biāo)記。 按住住Shift鍵，然后后單擊表表格中的的任意位位置。當(dāng)表格被被選中時(shí)時(shí)，其周周圍出現(xiàn)現(xiàn)一個(gè)邊邊框，表表明被選選中，同同時(shí)在邊邊框的右右方和下下方帶有有黑色控控制柄。通過拖拖動(dòng)這些些黑色控控點(diǎn)，可可以改變變表格的的大小。2.選選擇表格格行要選中表表格行，可以使使用以下下幾種方方法。 將鼠鼠標(biāo)移動(dòng)動(dòng)到要選選中表格格行左方方表格之之外的位位置，當(dāng)當(dāng)鼠標(biāo)指指針變?yōu)闉橐粋€(gè)指指向右方方的黑色色箭頭形形狀時(shí)單單擊鼠標(biāo)標(biāo)，即可可選中相相應(yīng)的表表格行，如圖7.12所示。這時(shí)按按下鼠標(biāo)標(biāo)上下拖拖動(dòng)，可可以選中中多行。23圖7.1124圖7.1225 單擊擊要選擇擇的表格格

14、行中的的第一個(gè)個(gè)單元格格，然后后按住鼠鼠標(biāo)左鍵鍵，拖動(dòng)動(dòng)鼠標(biāo)，直到要要選擇的的表格行行中最后后一個(gè)單單元格中中，釋放放鼠標(biāo)，即可選選中表格格行。同同樣，拖拖動(dòng)鼠標(biāo)標(biāo)，移過過多個(gè)表表格行，即可選選中多個(gè)個(gè)表格行行。 單擊擊要選擇擇的表格格行中任任意一個(gè)個(gè)單元格格，然后后在文檔檔窗口左左下方狀狀態(tài)行上上單擊標(biāo)記，即即可選中中該表格格行，當(dāng)當(dāng)表格行行被選中中時(shí)，該該行中所所有的單單元格四四周都帶帶有黑色色粗框。3.選選擇表格格列要選中表表格列，有如下下方法： 將鼠鼠標(biāo)移動(dòng)動(dòng)到要選選中表格格列上方方表格之之外的位位置，當(dāng)當(dāng)鼠標(biāo)光光標(biāo)指針針變?yōu)橐灰粋€(gè)指向向下方的的黑色箭箭頭形狀狀時(shí)單擊擊鼠標(biāo)，即可選選中

15、相應(yīng)應(yīng)的表格格列；這這時(shí)按下下鼠標(biāo)左左右拖動(dòng)動(dòng)，可以以選中多多列，如如圖7.13所所示。26圖7.1327 單擊擊要選擇擇表格列列中的第第一個(gè)單單元格，然后按按住鼠標(biāo)標(biāo)左鍵，拖動(dòng)鼠鼠標(biāo)，直直到要選選擇表格格列中最最后一個(gè)個(gè)單元格格中，再再釋放鼠鼠標(biāo)，即即可選中中表格列列。同樣樣，拖動(dòng)動(dòng)鼠標(biāo)，移過多多個(gè)表格格列，即即可選中中多個(gè)表表格列。4.選選中單元元格在Dreamweaver中，可以以選中相相鄰的單單元格，也可以以選中不不相鄰的的單元格格。 選擇擇一個(gè)單單元格。在要選選擇的單單元格中中單擊鼠鼠標(biāo)，然然后拖動(dòng)動(dòng)到相鄰鄰單元格格（左、右、上上、下以以及斜線線方向皆皆可）中中部，當(dāng)當(dāng)要選中中單元格

16、格四周帶帶有粗框框時(shí)釋放放鼠標(biāo)。另一種方方法是在在要選中中的單元元格中單單擊鼠標(biāo)標(biāo)，然后后在文檔檔窗口左左下方狀狀態(tài)行上上的標(biāo)記記選擇器器中，單單擊或標(biāo)記。被被選中的的單元格格四周會(huì)會(huì)出現(xiàn)粗粗框。28 選中中相鄰多多個(gè)單元元格。在在相鄰單單元格中中的第一一個(gè)單元元格中按按下鼠標(biāo)標(biāo)，拖動(dòng)動(dòng)鼠標(biāo)（可以橫橫向、縱縱向、斜斜線拖動(dòng)動(dòng)），移移動(dòng)到最最后一個(gè)個(gè)單元格格中，即即可選中中一組相相鄰單元元格。 選中中不相鄰鄰的多個(gè)個(gè)單元格格。按住住Ctrl鍵，單擊擊要選中中的單元元格，則則被單擊擊的單元元格就會(huì)會(huì)被選中中。5.取取消選中中狀態(tài)選中表格格元素后后，如果果希望取取消選擇擇狀態(tài)，只要單單擊任何何單元格

17、格，就會(huì)會(huì)取消對(duì)對(duì)表格元元素的選選中狀態(tài)態(tài)。也可可以通過過單擊表表格之外外的其他他任意位位置來取取消對(duì)表表格元素素的選擇擇。297.2.2插插入行行或列最初插入入表格的的行數(shù)或或列數(shù)不不夠時(shí)，可以插插入行或或列，這這些操作作都可以以在Modify|Table菜單中實(shí)實(shí)現(xiàn)（見見圖7.14）。1.插插入一行行執(zhí)行Modify|Table|Insert Row（修改|表表格|插插入行）命令，或按Ctrl+M鍵，就會(huì)會(huì)在原先先單元格格的上方方，插入入一個(gè)新新空白行行。2.插插入一列列執(zhí)行Modify|Table|Insert Column（修改|表表格|插插入列）命令，在原單單元格的的左方插插入一列列

18、。3.插插入多行行或多列列 執(zhí)行行Modify|Table|Insert RowsorColumns（插入行或或列）命命令,打打開InsertRowsorColumns（插入行或或列）對(duì)對(duì)話框（圖7.15），提示示輸入要要添加的的行數(shù)、列數(shù)和和位置。30圖7.1431圖7.1532 要插插入行，可以選選擇Rows；要插入列列，可以以選擇Columns。如果插入入行，則則在NumberofRows（行數(shù)）數(shù)數(shù)值框中中輸入要要添加的的行數(shù)；如果插插入列，則在NumberofColumns（列數(shù)）數(shù)數(shù)值框中中輸入要要添加的的列數(shù)。在Where（哪里）區(qū)區(qū)域，設(shè)設(shè)置新插插入行或或列的位位置。對(duì)對(duì)于插入

19、入行，可可以選擇擇AbovetheSelection（選中項(xiàng)之之上）或或BelowtheSelection（選中項(xiàng)之之下）；對(duì)于插插入列，可以選選擇BeforecurrentColumn（當(dāng)前列之之前）或或Aftercurrent Column（當(dāng)前列之之后）。提示：要要在表表格的最最下邊或或右邊增增加行或或列，可可以使用用表格屬屬性面操操作。選中整個(gè)個(gè)表格；在表格屬屬性面板板（圖7.16）的Rows或Cols文本框中中，輸入入需要的的整個(gè)表表格的行行數(shù)或列列數(shù)，即即可實(shí)現(xiàn)現(xiàn)對(duì)表格格行和列列的增刪刪操作。33圖7.16347.2.3刪除行或或列對(duì)于多余余的行或或列，可可以從表表格中刪刪除。1.

20、刪刪除行選中要?jiǎng)h刪除的行行，然后后執(zhí)行Modify|Table|Delete Row（刪除行）命令，或是按按下Del鍵，或執(zhí)執(zhí)行Edit|Cut命令，即即可刪除除該行。2.刪刪除列選中要?jiǎng)h刪除的列列，再執(zhí)執(zhí)行Modify|Table|Delete Column（刪除列）命令，或按Del鍵，或執(zhí)執(zhí)行Edit|Cut命令，即即可刪除除該列。3.刪刪除表格格選中要?jiǎng)h刪除的表表格，按按Del鍵，或執(zhí)執(zhí)行Edit|Cut命令，即即可刪除除表格。357.2.4合合并與與拆分單單元格合并單元元格指將將兩個(gè)或或多個(gè)相相鄰單元元格合并并成一個(gè)個(gè)單元格格，拆分分單元格格指將一一個(gè)單元元格分成成多個(gè)單單元格。設(shè)初始

21、表表格如圖圖7.10所示示?！纠?.3】合合并單元元格 選中中要合并并的兩個(gè)個(gè)或多個(gè)個(gè)單元格格（見圖圖7.17）。 執(zhí)行行Modify|Table|MergeCells（合并單元元格）命命令，或或單擊屬屬性面板板MergeSelectedCellsUsingSpans(使用跨度度合并選選中單元元格)按按鈕（見見圖7.18），圖7.19是合并并后的效效果。36圖7.1737圖7.1838圖7.1939【例7.4】拆拆分單元元格 選中中要拆分分的一個(gè)個(gè)單元格格（圖7.20），或或?qū)⒉迦肴朦c(diǎn)放入入要拆分分的單元元格中。 執(zhí)行行Modify|Table|SplitCells（拆分單元元格）命命令，或或

22、單擊屬屬性面板板SplitsCellInto RowsorColumns(將單元格格拆分為為行或列列)按鈕鈕（見圖圖7.18），打開SplitCell（拆分單元元格）對(duì)對(duì)話框(圖7.21)。 在SplitCell中選擇拆拆分為Rows(行）還是是拆分為為Columns(列）。如果拆分分為行，則在下下面的NumberofRows（行數(shù)）文文本框中中輸入插插分的行行數(shù)。如果拆分分為列，則在下下面的NumberofColumns（列數(shù)）文文本框中中輸入插插分的列列數(shù)。40圖7.2041圖7.2142 設(shè)置置完成，單擊OK確認(rèn)操作作，效果果見圖7.22。合并和拆拆分單元元格在需需要將表表格中的的數(shù)據(jù)分

23、分成幾類類時(shí)非常常有用。7.2.5編編輯單單元格在表格操操作時(shí)，有時(shí)需需要復(fù)制制多個(gè)單單元格并并保留原原先的格格式。將將單元格格內(nèi)容的的復(fù)制、剪切、粘貼等等操作稱稱為編輯輯單元格格。1.復(fù)復(fù)制或剪剪切單元元格 選中中要復(fù)制制或剪切切的一個(gè)個(gè)或多個(gè)個(gè)單元格格，并保保證選中中的單元元格區(qū)域域呈現(xiàn)矩矩形。 執(zhí)行行Edit|Copy命令，或或按Ctrl+C鍵，即可可將選中中的單元元格復(fù)制制到剪貼貼板上；執(zhí)行Edit|Cut命令，或或按Ctrl+X鍵，即可可將選中中的單元元格剪切切到剪貼貼板上。43圖7.22442.粘粘貼單元元格 選擇擇要粘貼貼數(shù)據(jù)的的目標(biāo)對(duì)對(duì)象。如如果希望望將數(shù)據(jù)據(jù)粘貼入入單元格格內(nèi)

24、，可可以單擊擊該單元元格，將將插入點(diǎn)點(diǎn)放入該該單元格格內(nèi)；如如果希望望將剪貼貼板中的的數(shù)據(jù)粘粘貼為一一個(gè)新的的表格，可以在在文檔中中將插入入點(diǎn)放置置到該位位置上。 執(zhí)行行Edit|Paste命令，或或按Ctrl+V鍵。在粘貼剪剪貼板中中的單元元格時(shí)，如果將將完整的的行和列列數(shù)據(jù)粘粘貼入現(xiàn)現(xiàn)有的表表格中，則行和和列數(shù)據(jù)據(jù)會(huì)自動(dòng)動(dòng)插入到到表格中中的相應(yīng)應(yīng)位置上上。如果果將數(shù)據(jù)據(jù)粘貼入入一個(gè)單單獨(dú)的單單元格中中，則相相應(yīng)單元元格區(qū)域域中的內(nèi)內(nèi)容會(huì)被被替換。如果在在表格之之外的文文檔位置置上粘貼貼表格，則會(huì)自自動(dòng)生成成一個(gè)新新的表格格，并填填入相應(yīng)應(yīng)的行和和列數(shù)據(jù)據(jù)，圖7.23、圖7.24和圖7.25

25、分別是是剪切、在表格格內(nèi)粘貼貼和在表表格外粘粘貼單元元格的效效果。45圖7.2346圖7.2447圖7.2548提示：可可以將將一個(gè)表表格中的的單元格格粘貼到到另一個(gè)個(gè)表格中中。3.刪刪除單元元格內(nèi)容容要?jiǎng)h除選選中單元元格中的的內(nèi)容只只需選中中要?jiǎng)h除除其中內(nèi)內(nèi)容的單單元格，然后執(zhí)執(zhí)行Edit|Clear命令，或或是按下下Del鍵。注意：如如果選選中的是是整行或或整列，則上述述操作會(huì)會(huì)刪除表表格的行行或列。7.2.6表表格排排序表格作為為處理數(shù)數(shù)據(jù)的常常見形式式，經(jīng)常常需要對(duì)對(duì)其中的的內(nèi)容進(jìn)進(jìn)行排序序?！纠?.5】表表格排序序 選中中表格。49 執(zhí)行行Commands|Sort Table（命令

26、|排排序表格格）命令令（圖7.26），打打開Sort Table（排序表格格）對(duì)話話框（圖圖7.27）。 在Soft By（排序依據(jù)據(jù)）下拉拉列表中中，選擇擇以哪一一列作為為排序依依據(jù)。 在Order（順序）下下拉列表表中，可可以設(shè)置置排序的的順序。Alphabetically（字母），則以字字母順序序排序，Numerically，則以數(shù)字字大小排排序。在右方的的下拉列列表中，可以進(jìn)進(jìn)一步指指定排序序方向。Ascending（升序），則從字字母A至Z ，從數(shù)字0至9，按升序序排序。Descending（降序），則從字字母Z至A ，從數(shù)字9至0，按降序序排序。50圖7.2651圖7.2752 在

27、Then By（其他排序序依據(jù)）下拉列列表中，可以選選擇以哪哪一列作作為第二二排序依依據(jù)。同同樣，可可以在Order區(qū)域設(shè)置置排序順順序和排排序方向向。 如果果選中Soft Includes First Row（排序時(shí)包包括首行行）復(fù)選選框，則則在對(duì)表表格數(shù)據(jù)據(jù)排序時(shí)時(shí)，同時(shí)時(shí)也對(duì)首首行進(jìn)行行排序；有時(shí)候候表格的的首行都都是標(biāo)題題單元格格（也即即表格的的首行作作為表頭頭），則則可以清清除該復(fù)復(fù)選框。如果選中中Keep TR AttributeWith SortedRow（保留排序序行的TR屬性）復(fù)復(fù)選框，則在對(duì)對(duì)表格排排序后保保留排序序行中標(biāo)記的原原有屬性性。 設(shè)置置完畢，單擊OK按鈕，確確定

28、操作作，表格格即被排排序（見見圖7.28）。注意：如如果表表格中包包含Rowspan或Colspan屬性，即即使用了了合并單單元格或或拆分單單元格，則無法法對(duì)之進(jìn)進(jìn)行排序序。這時(shí)時(shí)如果確確實(shí)需要要拆分或或合并單單元格，可以先先排序后后拆分或或合并。53圖7.28547.3表表格格的格式式化7.3.1設(shè)設(shè)置表表格的整整體格式式對(duì)表格的的格式化化操作，主要可可以通過過表格屬屬性面板板來完成成。選中中整張表表格，這這時(shí)的屬屬性面板板如圖7.29所示。1.設(shè)設(shè)置表格格名稱TableName（表格名稱稱）：在在屬性性面板左左方的第第一個(gè)文文本框，也即TableName文本框中中，可以以設(shè)置表表格的名名稱

29、。為為表格命命名，便便于頁面面描述語語言JavaScript等對(duì)表格格的操作作。2.設(shè)設(shè)置表格格的行數(shù)數(shù)和列數(shù)數(shù)Rows（行）：在在該文文本框中中，可以以設(shè)置表表格的行行數(shù)。Cols（列）：在在該文文本框中中，可以以設(shè)置表表格的列列數(shù)。55圖7.2956注意：行行數(shù)和和列數(shù)的的設(shè)置可可以增加加或刪除除行和列列。數(shù)值值大于原原值會(huì)增增加行列列，數(shù)值值小于原原值則刪刪除行列列。3.設(shè)設(shè)置表格格的高度度和寬度度W（寬度）： 在該該文本框框中，可可以輸入入表格的的寬度數(shù)數(shù)值，在在右邊的的下拉列列表框中中，可以以選擇數(shù)數(shù)值的單單位。Pixel表示寬度度是像素素值，這這時(shí)表格格的寬度度是絕對(duì)對(duì)寬度，不隨瀏

30、瀏覽器窗窗口的變變化而變變化。選選擇“%”，則則表明表表格的寬寬度是表表格寬度度相對(duì)于于瀏覽器器窗口寬寬度的百百分比數(shù)數(shù)值，這這時(shí)表格格寬度將將隨瀏覽覽器窗口口的寬度度變化而而變化。H（高度）： 在該該文本框框中，可可以輸入入表格的的高度數(shù)數(shù)值，在在右邊的的下拉列列表框中中，可以以選擇數(shù)數(shù)值的單單位，但但一般來來說，不不需要設(shè)設(shè)置表格格的高度度值。提示：選選中表表格，拖拖動(dòng)表格格邊框上上出現(xiàn)的的控制，也可以以改變表表格的寬寬度和高高度。如如果希望望在拖動(dòng)動(dòng)鼠標(biāo)時(shí)時(shí)保持表表格的長長寬比，可以按按住Shift鍵再拖動(dòng)動(dòng)表格邊邊框上的的控制點(diǎn)點(diǎn)。574.表表格的對(duì)對(duì)齊方式式Align（對(duì)齊）： 在該

31、該下拉列列表框中中，可以以設(shè)置整整張表格格在瀏覽覽器窗口口水平方方向上的的對(duì)齊方方式。選選擇Left，表明表格格同瀏覽覽器窗口口在水平平方向上上左端對(duì)對(duì)齊，Center，表示居中中對(duì)齊，Right表示右對(duì)對(duì)齊，Default，則采用瀏瀏覽器指指定的默默認(rèn)表格格對(duì)齊方方式，通通常是左左對(duì)齊。圖7.30是是表格的的3種對(duì)對(duì)齊方式式。5.設(shè)設(shè)置內(nèi)部部邊距和和單元格格間距Cellpad（單元格內(nèi)內(nèi)部邊距距）：該該文本本框設(shè)置置表格內(nèi)內(nèi)部內(nèi)容容同單元元格內(nèi)部部邊界之之間的距距離，單單位是像像素。Cellspace（單元格間間距）： 該文文本框用用于設(shè)置置表格中中單元格格之間的的距離，單位是是像素。默認(rèn)情

32、情況下大大多數(shù)瀏瀏覽器將將單元格格內(nèi)部邊邊距設(shè)置置為1，而將將單元格格間距設(shè)設(shè)置為2 。58圖7.30596.設(shè)設(shè)置表格格的邊框框格式Border（邊框）： 在該該文本框框中，可可以設(shè)置置表格的的邊框?qū)拰挾戎?，其單位位是像素素。Brdr Color（邊框顏色色）：這這是一一個(gè)顏色色框，可可以設(shè)置置整個(gè)邊邊框的顏顏色,包包括單元元格邊框框。提示：在在HTML中，還可可以設(shè)置置邊框架架顏色的的另外兩兩個(gè)屬性性，即亮亮邊框（Bordercolorlight）和暗邊框框(Bordercolordark)，一般情況況下,表表格的左左邊框和和上邊框框可以用用加亮的的顏色顯顯示,右右邊框和和下邊框框可以用用

33、較暗的的顏色顯顯示，整整個(gè)邊框框呈立體體感，Bordercolorlight設(shè)置表格格左邊和和上邊的的邊框,Bordercolordark設(shè)置表格格右邊和和下邊的的邊框。例如,下列語語句定義義了表格格的亮邊邊框?yàn)榱亮良t色,暗邊框框顏色為為暗紅色色。60注意：表格邊框框設(shè)置的的是整個(gè)個(gè)表格四四周的邊邊框?qū)挾榷?，而不不是各個(gè)個(gè)單元格格的邊框框?qū)挾?，但border=0時(shí)，整個(gè)個(gè)表格都都沒有表表格線，圖7.31是是border=20,Cellpadding=2,CellSpace=3時(shí)的表格格邊框,圖7.32是是border=0時(shí)的表格格邊框。7.設(shè)置表格格背景BgColor（背景顏色色）:這這是一一

34、個(gè)顏色色框,可可以設(shè)置置表格的的背景顏顏色?？煽梢詥螕魮纛伾窗粹o選擇擇顏色,也可以以直接在在顏色框框中輸入入顏色的的十六進(jìn)進(jìn)制數(shù)值值。BgImage(背景圖像像):在在該文文本框中中，可以以設(shè)置表表格的背背景圖像像?？梢砸灾苯虞斴斎雸D像像文件的的URL地址，也也可以單單擊右方方的文件件夾按鈕鈕，從磁磁盤上選選擇圖像像文件。如果同同時(shí)設(shè)置置背景顏顏色和背背景圖像像,則顯顯示的是是背景圖圖像。使用這兩兩個(gè)屬性性,可以以設(shè)置與與頁面不不同的表表格背景景。61圖7.3162圖7.32638.清清除表格格的行高高和列寬寬在表格的的修改過過程中,有時(shí)已已經(jīng)修改改了表格格的某些些行的高高度和列列的寬度度,

35、但又又覺得并并不合適適,這時(shí)時(shí)可以使使用清除除表格的的行高和和列寬功功能，清清除表格格中的行行高和列列寬數(shù)值值。使表表格恢復(fù)復(fù)為最原原始的狀狀態(tài)。如如果表格格中有內(nèi)內(nèi)容，則則表格的的寬度和和高度將將調(diào)整為為正好容容納其中中的內(nèi)容容。ClearRowHeights（清除行高高）按鈕鈕：可可以清除除表格中中所有的的行高值值，包括括為表格格和單元元格設(shè)置置的行高高值等。ClearColumnWidths（清除列寬寬）按鈕鈕：可可以清除除表格中中所有的的列寬值值，包括括為表格格和單元元格設(shè)置置的列寬寬值等。64提示：選選中表表格，執(zhí)執(zhí)行Modify|Table|ClearCellHeights（清除單

36、元元格行高高）命令令，也可可以完成成清除表表格行高高的操作作。執(zhí)行行Modify|Table|ClearCellWidths（改變單元元格列寬寬）命令令，可以以完成清清除表格格列寬的的操作。9.轉(zhuǎn)轉(zhuǎn)換表格格的寬度度表格寬度度的度量量有兩種種方式，一種是是絕對(duì)的的像素值值，這時(shí)時(shí)表格的的寬度不不隨瀏覽覽器窗口口的變化化而變化化；另一一種是百百分比數(shù)數(shù)值，這這時(shí)表格格的寬度度隨瀏覽覽器的窗窗口變化化而變化化。這兩種方方法各有有其優(yōu)缺缺點(diǎn)。使使用絕對(duì)對(duì)寬度，能夠準(zhǔn)準(zhǔn)確地保保持單元元格中數(shù)數(shù)據(jù)的格格式和位位置，但但是如果果瀏覽器器窗口過過小，則則需要拖拖動(dòng)瀏覽覽器的水水平滾動(dòng)動(dòng)條瀏覽覽表格，這不便便于

37、對(duì)表表格整體體的觀察察。而使使用相對(duì)對(duì)寬度，則能夠夠保持在在瀏覽器器窗口中中看到整整個(gè)表格格行，但但是隨著著瀏覽器器窗口的的變化，表格中中內(nèi)容的的格式和和位置可可能也會(huì)會(huì)發(fā)生變變化，這這在很多多時(shí)候不不利于對(duì)對(duì)數(shù)據(jù)的的查看。65在Dreamweaver中，提供供了將表表格的寬寬度數(shù)值值在像素素和百分分比之間間進(jìn)行轉(zhuǎn)轉(zhuǎn)換的功功能，根根據(jù)需要要，隨時(shí)時(shí)將表格格的寬度度設(shè)置為為需要的的度量方方式。這這種轉(zhuǎn)換換用屬性性面板上上的Convert Table WidthstoPixels(將表格寬寬度轉(zhuǎn)換換為像素素)和Convert Table Widthsto%(將表格寬寬度轉(zhuǎn)換換為百分分比)來來完成。

38、7.3.2設(shè)置行、列和單單元格的的格式行、列、單元的的格式化化指設(shè)置置單元格格的高度度、寬度度、單元元格內(nèi)部部內(nèi)容的的對(duì)齊方方式等。設(shè)置表表格的行行、列和和單元格格的格式式，首先先要選中中相應(yīng)的的表格元元素，然然后在屬屬性面板板上設(shè)置置相應(yīng)屬屬性的值值。請注注意，選選中單元元格和選選中表格格時(shí)的屬屬性面板板是不一一樣的（見圖7.33），但但選中的的是行、表格列列還是單單元格時(shí)時(shí)屬性面面板的內(nèi)內(nèi)容都是是一樣的的。因?yàn)闉樾?、列列也不過過是多個(gè)個(gè)單元格格的集合合而已。66圖7.33671.設(shè)設(shè)置內(nèi)容容對(duì)齊方方式Horz（水平）： 該下下拉列表表用于設(shè)設(shè)置一個(gè)個(gè)或多個(gè)個(gè)單元格格內(nèi)容在在水平方方向上相相

39、對(duì)單元元格的對(duì)對(duì)齊方式式。有4種選擇擇，即Left（居左）、Center（居中）、Right（居右）、Default（默認(rèn)）。Default采用瀏覽覽器指定定的水平平對(duì)齊方方式，通通常是左左對(duì)齊方方式。在HTML中，水平平對(duì)齊方方式由標(biāo)記的Align屬性設(shè)置置，當(dāng)選選擇Default時(shí)，實(shí)際際上就是是刪除Align屬性，即即取消水水平對(duì)齊齊方式的的設(shè)置。Vert（垂直）： 在該該下拉列列表中，可以設(shè)設(shè)置單元元格內(nèi)容容在垂直直方向上上相對(duì)單單元格的的對(duì)齊方方式。有有5種選選擇，即即Top（頂部）、Middle（居中）、Bottom（底端）、Baseline（基線）、Default（默認(rèn)）。選擇D

40、efault，則采用瀏瀏覽器指指定的默默認(rèn)垂直直對(duì)齊方方式，通通常是居居中對(duì)齊齊方式，這時(shí)也也相當(dāng)于于在HTML中刪除垂垂直對(duì)齊齊方式的的屬性Valign，即取消垂垂直對(duì)齊齊方式的的設(shè)置。68注意：水平對(duì)齊齊和垂直直對(duì)齊的的意義和和效果與與在文本本和圖像像中的對(duì)對(duì)齊是一一樣的；單元格的的對(duì)齊效效果可以以通過屬屬性面板板上部的的文本對(duì)對(duì)齊方式式按鈕實(shí)實(shí)現(xiàn)，但它們們的本質(zhì)質(zhì)是不同同的，單單元格對(duì)對(duì)齊方式式設(shè)置的的是標(biāo)記的align屬性和valign屬性，它它影響所所設(shè)置的的整個(gè)單單元格；而文本本對(duì)齊設(shè)設(shè)置的是是段落屬屬性，它它只影響響所設(shè)置置的一個(gè)個(gè)或多個(gè)個(gè)段落，如果兩兩者都設(shè)設(shè)置，則則段落屬屬性

41、優(yōu)先先。2.設(shè)設(shè)置單元元格的寬寬度和高高度在表格中中，一行行中的所所有單元元格的高高度是一一樣的，一列中中的所有有單元格格的寬度度也是一一樣的。所以，單元格格的高度度就是相相應(yīng)行的的高度，單元格格的寬度度就是相相應(yīng)列的的寬度。69W（寬度）：該該文本框框設(shè)置單單元格寬寬度值，如果輸輸入數(shù)值值，則表表示是像像素值；如果輸輸入帶有有百分號(hào)號(hào)的數(shù)字字，如“40%”，則則表示單單元格寬寬度相對(duì)對(duì)于整張張表格寬寬度的百百分比，但該值值的設(shè)置置一般不不影響整整個(gè)表格格的寬度度。H（高度）：該該文本框框用來設(shè)設(shè)置單元元格的高高度。輸輸入數(shù)字字，表示示像素值值；輸入入帶有百百分號(hào)的的數(shù)字，如“10%”，表示示

42、單元格格高度相相對(duì)于整整張表格格高度的的百分比比。注意：如如果在在一行中中設(shè)置了了多個(gè)單單元格的的高度，則行高高以最高高的設(shè)置置為準(zhǔn)，列寬也也是一樣樣，所以以，設(shè)置置時(shí)最好好按行或或列設(shè)置置高度和和寬度。用鼠標(biāo)拖拖動(dòng)的方方法改變變表格的的行高和和列寬更更為方便便。將鼠鼠標(biāo)移動(dòng)動(dòng)到某行行下方的的邊框上上，當(dāng)鼠鼠標(biāo)變?yōu)闉樯舷码p雙箭頭形形狀時(shí)拖拖動(dòng)鼠標(biāo)標(biāo)，即可可以改變變行高。將鼠標(biāo)標(biāo)移動(dòng)到到某列右右方的邊邊框上，當(dāng)鼠標(biāo)標(biāo)變?yōu)樽笞笥译p箭箭頭形狀狀時(shí)拖動(dòng)動(dòng)鼠標(biāo)，即可以以改變列列寬(見見圖7.34)。70圖7.34713.設(shè)設(shè)置單元元格的邊邊框顏色色和背景景單元格的的邊框顏顏色和背背景是指指定單元元格四周

43、周的邊框框顏色和和局部背背景顏色色，不是是整個(gè)表表格的邊邊框和背背景，也也不是所所有單元元格的邊邊框架和和背景。通過單單元格邊邊框顏色色和背景景的設(shè)置置，可以以使不同同的區(qū)域域有不同同的邊框框顏色和和背景。如果設(shè)設(shè)置的單單元格邊邊框顏色色與背景景顏色相相同，可可以實(shí)現(xiàn)現(xiàn)局部無無線表格格的效果果（見圖圖7.35）。Brdr（邊框顏色色）：設(shè)設(shè)置選選中行、列或單單元格的的邊框顏顏色?？煽梢詥螕魮纛伾窗粹o選擇擇需要的的顏色，也可以以直接在在顏色框框中輸入入顏色的的十六進(jìn)進(jìn)制數(shù)值值。72圖7.3573Bg（背景）： 上面面一個(gè)Bg文本框用用來設(shè)置置單元格格的背景景圖像?？梢栽谠谠撐谋颈究蛑休斴斎雸D像

44、像文件的的URL地址，也也可以單單擊右方方的文件件夾按鈕鈕，從磁磁盤上選選擇圖像像文件下下面的Bg（背景）顏顏色框可可以設(shè)置置單元格格的背景景顏色?？梢詥螁螕纛伾粹o選選擇顏色色，也可可以在顏顏色框中中輸入顏顏色的十十六進(jìn)制制數(shù)值。注意：單單元格格的邊框框顏色和和背景顏顏色設(shè)置置的是選選中單元元格的局局部邊框框和背景景顏色，對(duì)未設(shè)設(shè)置的單單元格，使用的的是表格格的相應(yīng)應(yīng)屬性值值。4.控制單元元格內(nèi)容容的換行行方式由于表格格單元格格的區(qū)域域受到限限制，在在顯示長長文本時(shí)時(shí)如何換換行就顯顯得比較較重要。NoWarp（不換行）：如如果不選選中該復(fù)復(fù)選框，則在單單元格中中輸入文文本時(shí)，長度超超出了單單元格的的寬度，文本會(huì)會(huì)自動(dòng)換換行，單單元格的的高度增增加，寬寬度保持持不變。反之，如果選選中該復(fù)復(fù)選框，則在單單元格中中輸入文文本時(shí)，文本長長度超出出了單元元格的寬寬度，文文本