第九講 網頁中的表格操作

在網頁中插入表格可以使網頁上的內容排列整齊，讓瀏覽者對錶格中表達的資料及其含義一目瞭然，更容易找到感興趣的材料。不僅如此，表格還是設計網頁的重要工具，熟練地、合理地使用表格對於製作網頁非常重要。
　　在網頁中，表格的作用主要有兩種：一是存放資料和顯示資訊，這是常見最基本的應用，也是Word中一直用到的；二是組織網頁的內容，使網頁更整潔美觀。對於圖文混排的網頁，利用表格可以大大提高網頁製作的效率。在隱藏表格框線後，瀏覽者幾乎感受不到表格的存在。實際上FrontPage提供的各網頁模板，就是用表格來組織的。
　　本講我們先學習如何在頁面中插入表格，以及對錶格進行簡單的編輯處理。
一、表格的插入和修改
　　FrontPage多種方法來建立各種樣式的表格，這些方法和Word差不多。下面我們來仔細看看。
　　1、使用常用工具列的“插入表格”按鈕
　　您可以使用此工具快速建立一份簡易表格：
　　將游標移至您要插入表格的地方。在工具列的“插入表格”處按下滑鼠左鍵 ，會出現一個表格模型。然後按住左鍵向下向右拖動。拖曳滑鼠“向右”可以增加表格的列，“向下”拖曳可以增加表格的行，直到您要的行數與列數（如10行×4列）顯示出來（如）。然後釋放滑鼠即可產生一個預設格式的表格。

　　在拖動滑鼠時，若拖過頭還可往回拖。
　　2、使用“表格”菜單中的“插入表格”命令
　　前面介紹的方法雖然簡單快捷，但建立的表格是預設的格式，您還得根據需要來修改表格的屬性。
　　“表格”菜單中的“插入表格”命令可以讓你更精確設定表格，比如設定表格的“對齊”，“邊框粗細”等等。
　　單擊“表格”菜單，在“插入”子功能表中單擊“表格”，出現“插入表格”對話方塊，在“插入表格”對話方塊上設定表格的行、列數等，然後單擊“確定”完成表格建立。
　　【例】為“常用網站”網頁建立一個寬度為80%、置中的表格
　　1）在FrontPage視窗中開啟“網頁練習”網站，並建立一個空白網頁。
　　2）為建立的空白網頁輸入標題“常用網站”，並設定好字型及段落格式。
　　3）另起一行後，按一下滑鼠“表格”菜單，在“表格”菜單中選擇“插入”選項，再在“插入”子功能表中單擊“表格”；

　　4）在出現的“插入表格”對話方塊中的“行數”後的欄位中輸入5，在“列數”後的欄位中輸入4，對齊改為“水平置中”，指定寬度為80%，邊框粗細、儲存格邊距及間距分別為1、1及0：

　　5）在網頁中出現所示的表格，最後將網頁儲存為“cywz.htm”檔案：

　　【注意】在“插入表格”對話方塊中的各參數改變以後將會儲存下來，使以後的預設格式變成這次設定的樣式，包括用“插入表格”按鈕建立的表格。
　　3、手工繪製表格
　　除了上面的兩種建立表格的方法外，你也可以通過表格工具列上的“畫筆”（“手繪表格”）來繪製自己需要的表格。

　　單擊“表格”工具列上的“鉛筆”（“手繪表格”按鈕），這時候滑鼠指標會變成一隻鉛筆，將已變成筆形的滑鼠移到表格的一個角端點，按住左鍵，斜方向拖動至其對角端，鬆開左鍵，表格的外框線即畫成，然後再畫各行線和各列線。您可以建立一個儲存格大小不同、行列數變化的複雜表格。
　　當您完成繪製表格後，請再單擊“表格”工具列上的“手繪表格”按鈕，以使此按鈕不再被選取。
　　若要刪除任何您不想要的線，請單擊“表格”工具列上的“橡皮”（“清除”按鈕），按住滑鼠並拖動通過不要的線段，當此線段變為紅色時，再放開滑鼠按鍵即可。如果你需要分割表格，在需要分割的地方一端拖曳畫筆到另一端並串連即可。
　　所以“表格”工具列上的這兩個按鈕還可以對已建立的表格進行修改。
　　【例】示範了用“鉛筆”畫不規則表格的過程：
　　1）單擊“表格”工具列上的“手繪表格”按鈕，將已變成筆形的滑鼠移到表格的一個角端點，按住左鍵，斜方向拖動至其對角端（1）；
　　2）鬆開左鍵，表格的外框線即畫成。再將筆形滑鼠移到表格的左邊線上部，按住左鍵，沿水平方向拖動至表格的右邊線（2），鬆開左鍵，行線即畫成。
　　3）依次再畫一根列線（3）和一根列線（4）。鬆開左鍵，整個表格即畫成（5）。

　　若FrontPage視窗沒有顯示表格工具列，只要右擊工具列或功能表列的任何位置，在捷徑功能表中選擇“表格”即可顯示表格工具列。另外，單擊“表格”菜單，選擇“手繪表格”項，也會在視窗顯示“表格工具列”，並且“手繪表格”選項已經被自動選取了。
　　4、由文本轉換
　　這項功能常用於將Word的表格加入網頁，可以縮小網頁的空間佔用。我們將在第十六講《最佳化網頁》中再做介紹。
　　表格建立後，就可以在表格中輸入文字，輸入方法和在Word中是一樣的。當然，也可以在表格中插入圖片。
二、表格的修改調整
　　當表格建立好以後，由於在預設下均勻分布的規則的表格不一定能滿足我們的要求。常常需要對錶格進行修改調整。下面我們以在上表中圖片一行的下面添加一個新行來說明添加新行、新列的方法。另外，列寬是平均分配的，
　　1、改變列寬和整個表格寬度
　　將滑鼠指標移動到框線上，在滑鼠指標變成雙向箭頭時，按下左鍵拖動，可改變列寬。若滑鼠指在表格的右邊線上推動可以改變整個表格的寬度。下面二圖顯示了將“常用網站”網頁中的表格變成左窄右寬的前後情況：

滑鼠指標變成雙向箭頭

列寬改變

　　用同樣方法也可改變表格的行高，但因行高會隨著儲存格裡邊的內容增加而自動變大，所以通常不需去改變行高。
　　2、插入行與列
　　插入行、列，最簡單的方法是利用“表格”工具列上的“插入行”或“插入列”按鈕：
　　先將游標移至需插入行（或列）下方（或右側）的儲存格中，然後單擊“表格”工具列上的“插入行”（或“插入列”）按鈕就可以在該儲存格上面（或右側）插入一行（或一列）。
　　我們經常需要在表格的最後添加幾行，這就要利用“表格”菜單中的“插入行或列”命令，然後在“插入行或列”對話方塊上進行設定。
　　【例】在“常用網站”網頁中的表格最後添加五行：
　　1）單擊圖片所在行，使游標出現在該行中。單擊“表格”菜單，再單擊“插入”子功能表中的“行或列”（下左圖）。就會開啟“插入行或列”對話方塊，如下右圖所示。

　　2）在“插入行或列”對話方塊中選中“行”（預設設定），然後選中“所選地區下方”（預設設定），在“行數”右端的欄位中輸入5。
　　3）單擊“確定”按鈕，在圖片所在行的下面將插入一行，結果如所示。

　　插入新列的操作與插入新行基本一樣，但插入新列不會使表格寬度增加，大家可以試一試。
　　3、刪除行與列
　　要刪除行或列，必須首先選中需刪除（可不連續）的行或列（可不連續），選擇行與列最簡單的方法是：
　　將滑鼠移至需選定行的最左端，當滑鼠變成向右的粗黑箭頭後單擊（如），可選定一行；將滑鼠移至需選定列的最上端，當滑鼠變成向下的粗黑箭頭後單擊，可選定一列。出現粗黑箭頭後按住左鍵往上下（或左右）拖，可選定連續多行（或列）。在選中一行（列）後，按住“Ctrl”鍵再單擊其它行（列），可選中不連續的行（或列）。

　　選中行（或列）後再單擊“常用”工具列上的“剪下”按鈕或“表格”工具列上的“刪除儲存格”按鈕就可刪除所選中的行（或列）。但按鍵盤上的“Delete（刪除）”鍵只能刪除表格中的內容，不能刪除行或列。
　　4、平均分布各列或各行
　　在移動列（行）線後，表格的各列（行）分布不均勻，若要使它們恢複均勻分布。或除其中一列（行）外，其餘各列（行）均勻分布。可在選定需要平均列寬或行高的列或行後，單擊“表格”工具列上的“平均分配行高”或“平均分配列寬”按鈕，就可達到目的。
　　5、合併儲存格
　　和Word一樣，我們可以對錶格中的儲存格進行拆分和合併作業。通過這些操作，使一個規則的表格變成一個不規則的表格。
　　只有同一行（列）中相鄰的儲存格才能合并。合并的具體步驟是：選中要合并的相鄰的儲存格，“表格”工具列中的“合併儲存格”按鈕就變成實線，單擊它，就可將選中的這些儲存格合并為一個大儲存格。
　　儲存格合并後，原先各儲存格中文字、圖片等將全部移入新儲存格中。
　　【例】若想建立下面那樣一個表格，其具體步驟為：

　　1)先用“表格”工具列上的“插入表格”按鈕拉出一個5×5的表格，並用滑鼠在右邊線上拖動，使表格的寬度符合要求：

　　2）用滑鼠在左邊第一根列線上拖動，使第一列的寬度符合要求：

　　3）用滑鼠將第二到第五列全部拖黑（選中），單擊“表格”工具列上的“平均分配行高”按鈕，使這四列的寬度一樣：

　　4）用滑鼠將第一行全部拖黑（選中），單擊“表格”工具列上的“合併儲存格”按鈕，使第一行變成一個大儲存格：

　　5）用滑鼠將第一列下面的四個儲存格全部拖黑（如所示），單擊“表格”工具列上的“合併儲存格”按鈕，使這四個儲存格變成一個大儲存格，完成整個表格修改工作。

　　6、拆分儲存格
　　可以將一個儲存格拆分成多個儲存格。拆分的具體步驟是：
　　1）將游標放到需拆分儲存格，單擊“表格”工具列中的“拆分儲存格”按鈕。
　　2）在右圖所示的“拆分儲存格”對話方塊上，首先選定“拆分為行”或“拆分為列”，再輸入“行數”或“列數”框中所需的數字，最後單擊確定即可完成。
　　儲存格拆分後，其中的文字、圖片等集中在第一儲存格中，其它儲存格空白。
三、表格的修飾和設定
　　除了前面介紹的對錶格的修改，我們還可以通過設定表格屬性和儲存格屬性來修飾表格，包括對齊、邊框粗細，框框線的顏色以及背景色等。
　　1、表格屬性
　　滑鼠移到表格處單擊右鍵，在捷徑功能表中選擇“表格屬性”，就可開啟“表格屬性”設定視窗：

　　我們可以看到，在表格屬性設定中一共有三個大項，布局、邊框和背景：
　　1）表格的布局
　　在“布局”中的“對齊”是控制在頁面中擺放表格的位置，你可以選擇靠右對齊、靠左對齊、水平置中、左右對齊。預設是靠左對齊，但這要視表格大小來決定，在表格寬度佔滿100%時，此項不用設定。
　　“浮動”是指定文本與某一格表格的環繞方式，就好像文本環繞圖片一樣。
　　“指定寬度、高度”可以自由設定表格的寬度和高度。如果你沒有指定高度的值，那麼表格將根據表格中的對象自行調整。
　　表示表格大小的單位有百分比和像素。一般來說，我們選擇百分比作為表格大小的單位，因為它可以根據訪問者顯示器大小和瀏覽器視窗大小自行調整，靈活性較高。
　　“儲存格格邊距”則是表明表格邊距與該儲存格中的本文之間的距離，預設為“1”，你可以按自己的需要設定數值。
　　“儲存格格間距”時指儲存格與儲存格之間的距離，預設為“2”，此數值可影響表格的線條格式，當將它設定為“0”時可使表格的線條從下左圖那樣的雙線條變成下右圖那樣的單線條（邊框顏色都是黑色）。

　　2）表格的邊框
　　表格的邊框的預設值為“1”。有時為了頁面配置需要，我們會關閉表格的邊框，也就是將邊框值設為“0”。你在FrontPage中編輯網頁時，關閉後的邊框將以虛線顯示，而瀏覽的時候，邊框是不可見的。
　　將邊框值設為大於“1”時，表格內部的線條仍不變，但四周框線變粗，如所示：

　　我們還可以設定邊框的顏色、亮邊框和暗邊框的顏色(也就是向光面和背光面的顏色)，從而增強表格的三維立體效果。當邊框顏色、亮邊框和暗邊框的顏色都採用預設格式（“自動”），表格的的框線如下左圖所示的浮雕效果；若亮邊框和暗邊框的顏色仍採用預設格式，但邊框顏色設為黑色，則表格的的框線變成下中圖那樣的雙線條；若將亮邊框設為黃色，暗邊框設為紅色，表格的框線就呈下右圖所示的三維立體效果。在這三個例子中“邊框粗細”為“1”，“儲存格間距”為“2”。

所有邊框顏色為“自動”	邊框顏色為黑色	亮邊框為黃色，暗邊框為紅色

　　若將邊框顏色設為和網頁背景色一樣，也可消除表格框線。但這樣做在FrontPage中也看不見框線，會給調整表格帶來困難。
　　3）表格背景的設定
　　在預設狀態（“自動”）下，表格的背景與網頁的背景相同。在表格中設定背景可以將表格與網頁的背景區分開，使表格的內容更突出。
　　在這裡不僅可以設定整個表格的背景顏色。而且還可以設定背景圖片，首先單擊“使用背景圖片”前的複選框，然後單擊“瀏覽”找到合適的背景圖片，或直接在欄位中輸入背景圖片的路徑和檔案名稱（URL），就可以將圖片設定為表格的背景。注意：當映像的尺寸大於表格的尺寸時，映像的多餘部分將被截掉；當映像的尺寸小於表格的尺寸時，映像將在表格中被重複充填。
　　2、儲存格屬性
　　除了設定整個表格的屬性外，還可以對某一個或相鄰幾個儲存格的屬性進行設定。
　　滑鼠使游標定在該儲存格中或選中幾個儲存格，然後單擊在“表格” 菜單中選擇 “屬性”中的“儲存格”，就可開啟“儲存格屬性”對話方塊。

 

　　從該對話方塊可以看出，其中很多項目與“表格屬性”對話方塊是相同的，如邊框和背景。但大家要注意的是，如果你為某一儲存格設定了屬性，那麼表格屬性將在這個儲存格裡無效。比如，你設定了表格的背景色，但你又設定了某儲存格的背景色，那麼儲存格背景色將覆蓋表格的背景色。
　　【例】用圖片作為一個表格的背景，但第一行的背景設為黃色

　　1）用常用工具列的“插入表格”按鈕在網頁上拉出一個合適的表格；
　　2）滑鼠右擊表格處，在退出的捷徑功能表中選擇“表格屬性”，開啟“表格屬性”設定對話方塊；
　　3）單擊“使用背景圖片”前的複選框，然後單擊“瀏覽”，在與“選擇背景圖片”同時出現的“選擇檔案”對話方塊中找到合適的背景圖片：

　　4）單擊“確定”後，回到“表格屬性”設定對話方塊，在“使用背景圖片”下面的空框中已經有了該圖片檔案的帶路徑檔案名稱：

　　5）選中第一行的全部儲存格，右擊後在彈出的捷徑功能表中選擇“儲存格屬性”。在“儲存格屬性”對話方塊中單擊背景色塊右邊的下拉按鈕，將背景顏色設為黃色。

　　儲存格屬性設定雖然和表格屬性設定大致相同，但有些地方是有區別的：
　　1、水平對齊
　　它確定儲存格內文本或圖片的水平對齊，可以選擇靠右對齊、靠左對齊、水平置中、左右對齊，預設是靠左對齊。
　　2、垂直對齊
　　決定儲存格內文本或者圖片的垂直對齊。預設是置中對齊，當利用表格來設計網頁時可設定成為“頂邊對齊”。
　　3、“行(列)跨距”
　　是用來設定不同的儲存格大小，一般來說我們表格中的儲存格是一樣大的。如果想得到不同的儲存格大小，就需要在這裡指定，但容易引起表格的混亂。
　　下面再對儲存格的尺寸問題加以說明：
　　選中“指定寬度”複選框，可指定儲存格的寬度。既可指定絕對值（選中“像素”單選框），也可指定與整個表格寬度的百分比（選中“百分比”單選框）。由於指定絕對值不容易控制整個表格的一致性，一般都採用百分比方式。如，選中“百分比”後，在左邊的文字框中，鍵入50%（“%”可以省略），則該儲存格所在列的寬度就設定為整個表格寬度的一半。
　　“指定高度”：選中該複選框，即可設定整個表格的高度。

【練一練】
　　建立一個“版主小檔案”的新網頁，插入一個表格，並根據自己的實際情況在表格中填入姓名、性別、年齡等相應的內容。根據您自己的喜好對網頁和表格進行適當修飾後儲存到本地網站中，並通過首頁與它連結。