教你如何制作網頁表格

1、第7章 表 格7.1 創(chuàng)建表格7.2 編輯表格7.3 表格的格式化7.4 利用表格布局版面思考與練習17.1創(chuàng)創(chuàng)建建表格7.1.1表表格的的基本概概念在網頁中中，表格格的結構構如圖7.1所所示。表格由一一些線條條分開的的小格組組成。線線條即是是表格的的邊框，被邊框框分割開開來的區(qū)區(qū)域稱之之為單元元格，數數據、文文字、圖圖形、圖圖片等對對象均可可根據需需要放在在相應的的單元格格中。位位于水平平方向上上的一系系列單元元格稱作作一行，位于垂垂直方向向上的一一系列單單元格稱稱作一列列。在單元格格中，可可以輸入入文字和和其他對對象，這這些文字字或對象象同單元元格邊緣緣之間的的距離稱稱作單元元格內部部邊距

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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