- 相關(guān)推薦
reamweaver制作網(wǎng)頁(yè)中表格外觀(guān)的教程
表格無(wú)疑是網(wǎng)頁(yè)制作中最為重要的一個(gè)對象，因為通常的網(wǎng)頁(yè)都是依靠表格來(lái)進(jìn)行版面布局和各元素組織的，它直接決定了網(wǎng)頁(yè)是否美觀(guān)，內容組織是否清晰。下面是YJBYS小編整理的reamweaver制作網(wǎng)頁(yè)中表格外觀(guān)的教程，希望對你有幫助!
一、利用屬性面板
首先我們需要了解兩個(gè)表格屬性面板上的參數：CellPad和CellSpace。CellPad是指表格中兩個(gè)單元格之間的距離，CellSpace是指每個(gè)單元格與它中間的內容之間的間隔距離。通過(guò)改變這兩個(gè)參數，并配合背景色彩的變化，可以方便的做出1像素的表格邊框。
1、使用Object面板插入一個(gè)表格，定義表格寬、高及行數和列數。注意此時(shí)Dreamweaver中插入表格的默認CellPad和CellSpace、Border都為0。
2、在屬性面板中定義表格的Border為0，CellPad為5(這項可使單元格中的內容與單元格邊緣之間保持5個(gè)像素);CellSpace為1(此項使得單元格之間保持1個(gè)項素的間距)。
3、設置表格的背景色#999999
4、設置單元格的背景色#FFFFFF
5、在瀏覽器中預覽一下效果，我們可以看到表格呈現一個(gè)像素的邊框
二、利用表格嵌套
還是上面的主要原理，我們在利用表格之間的互相嵌套，就可以實(shí)現更多的效果。
1、首先我們繪制一個(gè)表格，參照前面的例子設定此表格的CellPad和CellSpace的數值和顏色。
2、接下來(lái)繪制另一個(gè)單行單列的表格，設置CellPad=2，CellSpace=1具體參數
3、將第一步中作好的表格移動(dòng)到第二步中的表格中，此時(shí)的表格外觀(guān)
我們看到此表格具有雙線(xiàn)外框，單線(xiàn)內框。
4、再修改第二步中的表格為單行雙列，在每個(gè)單元格中都放置一個(gè)第一步中的表格，最后的表格外觀(guān)
三、利用樣式表美化表格
1、直接重新定義，樣式表的詳細定義我不作介紹，定義表格邊框主要是在樣式編輯器的Border選項中
Width代表上下左右的邊框寬度;Color可以分別定義上下左右邊框的顏色;Style可以丁一邊框的樣式，常用的為solid(實(shí)線(xiàn))，其它類(lèi)型還有：dotted(點(diǎn)線(xiàn))、dashed(虛線(xiàn))、double(雙線(xiàn))、groove(槽線(xiàn))、ridge(脊線(xiàn))、inset(內陷)、outset(外陷)。不過(guò)有幾個(gè)類(lèi)型必須是IE5.5以上版本才可以看到的。
2、重新定義了后的表格外觀(guān)
3、我們取消對的重新定義，單獨定義一個(gè).tdstyle樣式，具體參數
注意在這里我們定義了頂端和下端的邊框寬度為1像素，左右兩邊的為0。
4、最后的表格效果
我們可以看到此表格呈現只有橫線(xiàn)，沒(méi)有豎線(xiàn)的外觀(guān)。
5、改變上一步中Top和Left為1，Bottom和Right為0。表格效果
此時(shí)表格呈現類(lèi)似立體的效果。
6、上面這個(gè)表格感覺(jué)不太完美，整個(gè)表格的右邊和下方無(wú)邊框。我們可以再定義一個(gè)樣式.table1，定義此樣式的四邊都為1像素，并將它附給，此時(shí)表格外觀(guān)。
【reamweaver制作網(wǎng)頁(yè)中表格外觀(guān)的教程】相關(guān)文章：
Dreamweaver制作網(wǎng)頁(yè)中表格外觀(guān)的技巧07-16
HTML語(yǔ)言的網(wǎng)頁(yè)教程06-14
經(jīng)典格紋美甲教程11-04
PPT制作教程10-13
冰淇淋制作教程11-11
CSS制作教程08-11
網(wǎng)頁(yè)Meta標簽優(yōu)化教程05-24
水滴制作-ps制作教程05-18