制作三維表格效果

2024-04-27 13:54:42

字體：大中小

供稿：網(wǎng)友

曾經(jīng)有位網(wǎng)友問我：“你主頁帶立體效果左邊菜單是圖片還是用按鈕軟件做的？”
其實(shí)它根本不是什么按鈕工具做圖形，而完全是利用表格（TABLE）標(biāo)簽的兩個(gè)元素屬性borderColorDark、borderColorLight而做出來的，另外還要加上對bgcolor元素屬性以及對色彩的較好把握。
HTML表格帶立體效果的三維表格，是依靠邊線亮度實(shí)現(xiàn)的。邊線亮色分明色（Light）和暗色（ Dark）兩種，一般使用其默認(rèn)值即可，但也是可以調(diào)整的。調(diào)整表格邊框亮度實(shí)際上就是指定其明暗兩種顏色，由TABLE元素的borderColorLight、borderColorDark屬性來定義。

1、下例是將邊框明色設(shè)為白色，暗色設(shè)為紫醬色：
（編者注：為了讓HTML源代碼正常顯示，已將所有“< ”符號的右邊加了一個(gè)空格，實(shí)際應(yīng)用時(shí)需將該空格去掉。）

代碼：
< table cellspacing=1 border=1 bordercolorlight=white bordercolordark=maroon>
< tr>
< th>Food< /th>
< th>Drink< /th>
< th>Sweet< /th>
< tr>
< td>A< /td>
< td>B< /td>
< td>C< /td>
< /tr>
< /table>
以上是對bordercolorlight、bordercolordark屬性簡單應(yīng)用。

2、上面的三維效果是凹下去的，現(xiàn)在讓我們把明暗色對換一下看看效果如何：

代碼：
< table cellspacing=1 border=1 bordercolorlight=white bordercolordark=maroon>
< tr>
< th>Food< /th>
< th>Drink< /th>
< th>Sweet< /th>
< tr>
< td>A< /td>
< td>B< /td>
< td>C< /td>
< /tr>
< /table>
哇！神了，竟變成凸上來的效果。

3、等等，先別樂，凸上來的效果是有了但好象還缺點(diǎn)什么似的。加上個(gè)表格底色看看。

代碼：
< table cellspacing=1 border=1 bordercolorlight=white bordercolordark=maroon bgcolor=fdc0c0>
< tr>
< th>Food< /th>
< th>Drink< /th>
< th>Sweet< /th>
< tr>
< td>A< /td>
< td>B< /td>
< td>C< /td>
< /tr>
< /table>
啊！這就是顏色渾然一體的三維表格了，看看是不是比上面那個(gè)沒加底色的表格好看多了。

4、最后再看看下面這個(gè)示例：

代碼：
< table cellspacing=1 border=1 borderColorDark=#fdfeff borderColorLight=#99ccff bgColor=#e0f0ff>
< tr>
< th>Food< /th>
< th>Drink< /th>
< th>Sweet< /th>
< tr>
< td>A< /td>
< td>B< /td>
< td>C< /td>
< /tr>
< /table>
有人可能又要問了，三維表格的顏色到底怎么取才好看呢？這個(gè)問題可要專業(yè)平面設(shè)計(jì)人員才能正確回答了。

上一篇：正確使用XHTML的冒險(xiǎn)以及解決辦法

下一篇：在IE中為abbr標(biāo)簽加樣式