reamweaver制作網(wǎng)頁中表格外觀的教程

時(shí)間：2024-10-03 07:50:25 美工設(shè)計(jì) 我要投稿

相關(guān)推薦

　　表格無疑是網(wǎng)頁制作中最為重要的一個(gè)對(duì)象，因?yàn)橥ǔ５木W(wǎng)頁都是依靠表格來進(jìn)行版面布局和各元素組織的，它直接決定了網(wǎng)頁是否美觀，內(nèi)容組織是否清晰。下面是YJBYS小編整理的reamweaver制作網(wǎng)頁中表格外觀的教程，希望對(duì)你有幫助!

　　一、利用屬性面板

　　首先我們需要了解兩個(gè)表格屬性面板上的參數(shù)：CellPad和CellSpace。CellPad是指表格中兩個(gè)單元格之間的距離，CellSpace是指每個(gè)單元格與它中間的內(nèi)容之間的間隔距離。通過改變這兩個(gè)參數(shù)，并配合背景色彩的變化，可以方便的做出1像素的表格邊框。

　　1、使用Object面板插入一個(gè)表格，定義表格寬、高及行數(shù)和列數(shù)。注意此時(shí)Dreamweaver中插入表格的默認(rèn)CellPad和CellSpace、Border都為0。

　　2、在屬性面板中定義表格的Border為0，CellPad為5(這項(xiàng)可使單元格中的內(nèi)容與單元格邊緣之間保持5個(gè)像素);CellSpace為1(此項(xiàng)使得單元格之間保持1個(gè)項(xiàng)素的間距)。

　　3、設(shè)置表格的背景色#999999

　　4、設(shè)置單元格的背景色#FFFFFF

　　5、在瀏覽器中預(yù)覽一下效果，我們可以看到表格呈現(xiàn)一個(gè)像素的邊框

　　二、利用表格嵌套

　　還是上面的主要原理，我們?cè)诶帽砀裰g的互相嵌套，就可以實(shí)現(xiàn)更多的效果。

　　1、首先我們繪制一個(gè)表格，參照前面的例子設(shè)定此表格的CellPad和CellSpace的數(shù)值和顏色。

　　2、接下來繪制另一個(gè)單行單列的表格，設(shè)置CellPad=2，CellSpace=1具體參數(shù)

　　3、將第一步中作好的表格移動(dòng)到第二步中的表格中，此時(shí)的表格外觀

　　我們看到此表格具有雙線外框，單線內(nèi)框。

　　4、再修改第二步中的表格為單行雙列，在每個(gè)單元格中都放置一個(gè)第一步中的表格，最后的表格外觀

　　三、利用樣式表美化表格

　　1、直接重新定義，樣式表的詳細(xì)定義我不作介紹，定義表格邊框主要是在樣式編輯器的Border選項(xiàng)中

　　Width代表上下左右的邊框?qū)挾?Color可以分別定義上下左右邊框的顏色;Style可以丁一邊框的樣式，常用的為solid(實(shí)線)，其它類型還有：dotted(點(diǎn)線)、dashed(虛線)、double(雙線)、groove(槽線)、ridge(脊線)、inset(內(nèi)陷)、outset(外陷)。不過有幾個(gè)類型必須是IE5.5以上版本才可以看到的。

　　2、重新定義了后的表格外觀

　　3、我們?nèi)∠麑?duì)的重新定義，單獨(dú)定義一個(gè).tdstyle樣式，具體參數(shù)

　　注意在這里我們定義了頂端和下端的邊框?qū)挾葹?像素，左右兩邊的為0。

　　4、最后的表格效果

　　我們可以看到此表格呈現(xiàn)只有橫線，沒有豎線的外觀。

　　5、改變上一步中Top和Left為1，Bottom和Right為0。表格效果

　　此時(shí)表格呈現(xiàn)類似立體的效果。

　　6、上面這個(gè)表格感覺不太完美，整個(gè)表格的右邊和下方無邊框。我們可以再定義一個(gè)樣式.table1，定義此樣式的四邊都為1像素，并將它附給，此時(shí)表格外觀。

【reamweaver制作網(wǎng)頁中表格外觀的教程】相關(guān)文章：

Dreamweaver制作網(wǎng)頁中表格外觀的技巧07-16

HTML語言的網(wǎng)頁教程06-14

經(jīng)典格紋美甲教程11-04