一、利用屬性面板。
(圖一)
首先我們需要了解兩個表格屬性面板上的參數(shù):CellPad和CellSpace。如圖一所示,CellPad是指表格中兩個單元格之間的距離,CellSpace是指每個單元格與它中間的內(nèi)容之間的間隔距離。通過改變這兩個參數(shù),并配合背景色彩的變化,可以方便的做出1像素的表格邊框。
1、使用Object面板插入一個表格,定義表格寬、高及行數(shù)和列數(shù)。注意此時Dreamweaver中插入表格的默認(rèn)CellPad和CellSpace、Border都為0。如圖二;
(圖二)
2、在屬性面板中定義表格的Border為0,CellPad為5(這項(xiàng)可使單元格中的內(nèi)容與單元格邊緣之間保持5個像素);CellSpace為1(此項(xiàng)使得單元格之間保持1個項(xiàng)素的間距)。如圖三;
(圖三)
3、設(shè)置表格的背景色#999999,如圖四;
(圖四)
4、設(shè)置單元格的背景色#FFFFFF,如圖五;
(圖五)
5、在瀏覽器中預(yù)覽一下效果,我們可以看到表格呈現(xiàn)一個像素的邊框,如圖六;
(圖六)
二、利用表格嵌套。
還是上面的主要原理,我們在利用表格之間的互相嵌套,就可以實(shí)現(xiàn)更多的效果。
1、首先我們繪制一個表格,參照前面的例子設(shè)定此表格的CellPad和CellSpace的數(shù)值和顏色。具體效果如圖七;
(圖七)
2、接下來繪制另一個單行單列的表格,設(shè)置CellPad=2,CellSpace=1具體參數(shù)如圖八;
(圖八)
3、將第一步中作好的表格移動到第二步中的表格中,此時的表格外觀如圖九;
(圖九)
我們看到此表格具有雙線外框,單線內(nèi)框。
4、再修改第二步中的表格為單行雙列,在每個單元格中都放置一個第一步中的表格,最后的表格外觀如圖十;
(圖十)
三、利用樣式表美化表格。
1、直接重新定義
(圖十一)
Width代表上下左右的邊框?qū)挾?;Color可以分別定義上下左右邊框的顏色;Style可以丁一邊框的樣式,常用的為solid(實(shí)線),其它類型還有:dotted(點(diǎn)線)、dashed(虛線)、double(雙線)、groove(槽線)、ridge(脊線)、inset(內(nèi)陷)、outset(外陷)。不過有幾個類型必須是IE5.5以上版本才可以看到的。
2、重新定義了
3、我們?nèi)∠麑?td>的重新定義,單獨(dú)定義一個.tdstyle樣式,具體參數(shù)如圖十三;
(圖十三)
注意在這里我們定義了頂端和下端的邊框?qū)挾葹?像素,左右兩邊的為0。
4、最后的表格效果見圖十四;
(圖十四)
我們可以看到此表格呈現(xiàn)只有橫線,沒有豎線的外觀。
5、改變上一步中Top和Left為1,Bottom和Right為0。表格效果如圖十五;
(圖十五)
此時表格呈現(xiàn)類似立體的效果。
6、上面這個表格感覺不太完美,整個表格的右邊和下方無邊框。我們可以再定義一個樣式.table1,定義此樣式的四邊都為1像素,并將它附給