表格在網(wǎng)頁中的靈活運(yùn)用

王占成

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

關(guān)鍵詞： 網(wǎng)頁制作 網(wǎng)頁布局 表格 嵌套 表格布局

一、網(wǎng)頁設(shè)計(jì)中表格的作用與地位

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

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

二、靈活運(yùn)用表格的方法

1.圓角表格的制作

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

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

（2）此時(shí)不要取消選區(qū)，直接新建一副畫布，Photoshop會根據(jù)剪切板內(nèi)選區(qū)大小自動設(shè)置新建畫布的大小。將復(fù)制內(nèi)容粘貼到當(dāng)前畫布內(nèi)，另存為網(wǎng)頁WEB格式。

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

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

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

2.表格的嵌套

在網(wǎng)頁布局中合理運(yùn)用嵌套表格也是一種實(shí)用的方法，嵌套表格是為了達(dá)到特殊的效果而在表格中再插入一個(gè)表格。

網(wǎng)頁的排版有時(shí)會很復(fù)雜，在外部需要一個(gè)總表格控制總體布局，而內(nèi)部排版的細(xì)節(jié)如果也通過總表格實(shí)現(xiàn)，就容易引起行高列寬的沖突，給表格的制作帶來困難。

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

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

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

（2）將光標(biāo)放置再表格一內(nèi)，設(shè)置單元格的背景顏色為：“#CCECFF”。

（3）在表格一內(nèi)插入表格二，“4”行“1”列，寬度“100%”，高度“100%”，邊框?yàn)椤?”，單元格邊距為“0”，單元格間距為“2”像素。

（4）在表格二的各個(gè)單元格中依次插入4個(gè)導(dǎo)航按鈕圖片。

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

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

?；

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

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

用表格顯示內(nèi)容時(shí)，經(jīng)常會做一些特殊處理或?qū)⒈砀耧@示樣式調(diào)整修飾后顯示。那么表格屬性中自帶2個(gè)屬性就可以輕松實(shí)現(xiàn)控制表格邊框的顯示和隱藏。從而實(shí)現(xiàn)表格的特殊格式化，起到美化網(wǎng)頁外觀效果。主要使用下面兩個(gè)屬性。

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

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

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

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

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

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

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

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

當(dāng)Frame屬性不設(shè)置的時(shí)候，默認(rèn)顯示表格的上下左右邊框。

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

不顯示內(nèi)部邊框：Rules=”None”

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

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

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

顯示所有內(nèi)部邊框：Rules=”All”

當(dāng)Rules屬性不設(shè)置的時(shí)候，默認(rèn)顯示表格的所有內(nèi)部邊框。

5.表格的布局排版原則

在網(wǎng)頁制作時(shí)，一般采用從整體到局部、從上到下和從左到右的順序進(jìn)行表格的布局及網(wǎng)頁內(nèi)容的添加。

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

三、結(jié)語

通過以上使用表格的方法，我們更深刻地認(rèn)識到使用表格進(jìn)行網(wǎng)頁的布局設(shè)計(jì)時(shí)除了熟悉表格的基本設(shè)置方法以外，還應(yīng)該學(xué)會表格運(yùn)用上的一些技巧，只有將這些設(shè)計(jì)技巧合理地運(yùn)用到網(wǎng)頁設(shè)計(jì)中，才能更好地發(fā)揮表格的作用，達(dá)到內(nèi)容與形式的完美結(jié)合，增強(qiáng)網(wǎng)站、網(wǎng)頁的吸引力，制作出布局合理、頁面美觀、賞心悅目、有吸引力的網(wǎng)頁。

參考文獻(xiàn)：

[1]葛艷玲.網(wǎng)頁制作基礎(chǔ)教程（Dreamweaver CS3）[M].電子工業(yè)出版社，2010.

[2]許昭霞，段欣.網(wǎng)頁制作（第2版）[M].電子工業(yè)出版社，2009.