表格在網頁中的靈活運用

王占成

摘 要： 網頁設計中，頁面布局是不可缺少的，表格就是常用規劃網頁布局，進行頁面元素排版常用的工具之一。熟練掌握和合理運用表格在網頁制作中的使用方法，能夠制作出有吸引力的精美網頁。

關鍵詞： 網頁制作 網頁布局 表格 嵌套 表格布局

一、網頁設計中表格的作用與地位

表格是網頁設計者制作網頁不可缺少的元素，它以簡捷明了和高效的方式將圖片、文本、數據和表單等元素有序地顯示在頁面上，使不規則的內容有了條理性，使網頁的布局更加美觀。

從而讓我們可以設計出更漂亮的頁面，使用表格排版布局的頁面在不同平臺、不同分辨率的瀏覽器里都能保持原有布局，而在不同的瀏覽器平臺有較好的兼容性，所以表格是網頁中最常用的排版方式之一。

二、靈活運用表格的方法

1.圓角表格的制作

為了美化網頁，經常需要在表格的四角加上圓角，避免直接使用直角表格而顯得過于呆板，從而使網頁的整體效果更加美觀。給大家介紹一個最常用也是最通用的方法，能很好地適應各種瀏覽器和不同分辨率。

（1）利用Photoshop等制圖軟件繪制的圓角矩形，再用“矩形選框工具”選取左上角的圓角部分，復制選框內區域到剪切板內。

（2）此時不要取消選區，直接新建一副畫布，Photoshop會根據剪切板內選區大小自動設置新建畫布的大小。將復制內容粘貼到當前畫布內，另存為網頁WEB格式。

（3）重復步驟（2），分別用“水平翻轉”和“垂直翻轉”工具，依次保存所需其他3個方向的圓角圖片。

（4）打開Dreamweaver制作軟，插入一個“1”行“3”列的表格，設置其單元格的間距、邊距和邊框屬性值都為“0”。在第一列插入圖片1.gif，第三列插入圖片2.gif，設置單元格的高度和寬度與圖片一致。設置第二列的背景顏色與圓角圖片一致的顏色，設置寬度為整個表格的寬度減去兩個圖片的寬度，并切換到代碼視圖，刪除這行中的字符“?；”，當插入內容高度小于當前高度則會撐大表格。用同樣的方法制作下半部分的圓角表格。

（5）在步驟（4）插入的兩個表格中間再插入一個“1”行“3”列的表格，單元格的間距、邊距和邊框屬性值都為“0”，表格的寬度與上2個表格同寬。設置第1列和第3列背景顏色為與圓角圖片同色，寬度為“1”像素，并切換到代碼視圖，刪除第1、3列中的字符“?；”。此時，圓角表格就做好了，接下來在第2列中輸入顯示的文字信息即可，也可以適當設置一些文字顯示效果。

2.表格的嵌套

在網頁布局中合理運用嵌套表格也是一種實用的方法，嵌套表格是為了達到特殊的效果而在表格中再插入一個表格。

網頁的排版有時會很復雜，在外部需要一個總表格控制總體布局，而內部排版的細節如果也通過總表格實現，就容易引起行高列寬的沖突，給表格的制作帶來困難。

所以在使用表格布局頁面的時候應該總表格負責整體排版，由嵌套的表格負責各個子欄目的排版，并插入總表格的相應位置中，各司其職，互不沖突。但是表格的嵌套層次盡量要少，嵌套越復雜、嵌套層次越多的表格加載速度越慢。舉一個小例子給大家視覺上的沖擊。

例：利用嵌套表格制作圖4頁面排版效果

（1）插入一個“1”行“1”列的表格一，寬度“200”像素，高度“100%”，邊框為“0”，單元格間距為“5”，單元格邊距為5像素。表格背景顏色為：“#98FEEA”。

（2）將光標放置再表格一內，設置單元格的背景顏色為：“#CCECFF”。

（3）在表格一內插入表格二，“4”行“1”列，寬度“100%”，高度“100%”，邊框為“0”，單元格邊距為“0”，單元格間距為“2”像素。

（4）在表格二的各個單元格中依次插入4個導航按鈕圖片。

3.利用表格制作分割線的方法

在進行網頁版面設計時，有時會用到分割線，很多人會用圖片實現，但是使用圖片會過于繁瑣。那么使用表格就能夠很好地解決。首先在Dreamweaver的設計視圖中插入一個“1”行“1”列的表格，然后切換到源代碼視窗進行修改。表格寬度設置“100%”，設置其cellspacing、cellspadding和Border屬性值都為“0”；height設置“1”像素。bgcolor設置為：紅色；具體代碼如下：

?；

在上述代碼中刪除“?；”，我們制作的其實就是一個高為“1”像素的表格，表格內無其他任何內容，如果需要換顏色則只需改變表格的背景顏色的值即可。同理，使用該方法也可以實現在頁面內顯示豎線或豎的分割線，只需要將表格的寬度設為“1”像素，高度根據所需豎線長度而定。

4.控制表格邊框顯示和隱藏的方法

用表格顯示內容時，經常會做一些特殊處理或將表格顯示樣式調整修飾后顯示。那么表格屬性中自帶2個屬性就可以輕松實現控制表格邊框的顯示和隱藏。從而實現表格的特殊格式化，起到美化網頁外觀效果。主要使用下面兩個屬性。

（1）控制表格的上下左右邊框的顯示與隱藏的屬性為：Frame。具體參數如下：

不顯示表格的邊框：Frame=“void”

顯示表格的左右邊框：Frame=“vsides”

顯示表格的上下邊框：Frame=“hsides”

顯示表格的左邊框：Frame=“his”

顯示表格的右邊框：Frame=“rhs”

顯示表格的上邊框：Frame=“above”

顯示表格的下邊框：Frame=“below”

當Frame屬性不設置的時候，默認顯示表格的上下左右邊框。

（2）控制表格內部邊框顯示與隱藏的屬性為：Rules。具體參數如下：

不顯示內部邊框：Rules=”None”

只顯示列邊框：Rules=”cols”

只顯示行邊框：Rules=”rows”

只顯示介于行、列間的邊框：Rules=”Groups”

顯示所有內部邊框：Rules=”All”

當Rules屬性不設置的時候，默認顯示表格的所有內部邊框。

5.表格的布局排版原則

在網頁制作時，一般采用從整體到局部、從上到下和從左到右的順序進行表格的布局及網頁內容的添加。

從網頁下載速度來講，瀏覽器只有將整個表格的結構都分析清楚后，才會將表格中的信息顯示在屏幕上，所以如果不是特殊需求，則盡量不使用過大的表格，更不要過多地使用表格嵌套。網頁制作初學者們一般都會犯這樣的錯誤，用一個大的表格排版布局整張網頁。如果頁面內圖像、視頻等元素較多，則會明顯降低頁面訪問及顯示速度，網頁的訪問者往往會失去等待的耐心而放棄瀏覽這個網頁。

三、結語

通過以上使用表格的方法，我們更深刻地認識到使用表格進行網頁的布局設計時除了熟悉表格的基本設置方法以外，還應該學會表格運用上的一些技巧，只有將這些設計技巧合理地運用到網頁設計中，才能更好地發揮表格的作用，達到內容與形式的完美結合，增強網站、網頁的吸引力，制作出布局合理、頁面美觀、賞心悅目、有吸引力的網頁。

參考文獻：

[1]葛艷玲.網頁制作基礎教程（Dreamweaver CS3）[M].電子工業出版社，2010.

[2]許昭霞，段欣.網頁制作（第2版）[M].電子工業出版社，2009.