製作三維表格效果

曾經有位網友問我：“你首頁帶立體效果左邊菜單是圖片還是用按鈕軟體做的？”
其實它根本不是什麼按鈕工具做圖形，而完全是利用表格（TABLE）標籤的兩個元素屬性borderColorDark、borderColorLight而做出來的，另外還要加上對bgcolor元素屬性以及對色彩的較好把握。
HTML表格帶立體效果的三維表格，是依靠邊線亮度實現的。邊線亮色分明色（Light）和暗色（ Dark）兩種，一般使用其預設值即可，但也是可以調整的。調整表格邊框亮度實際上就是指定其明暗兩種顏色，由TABLE元素的borderColorLight、borderColorDark屬性來定義。

1、下例是將邊框明色設為白色，暗色設為紫醬色：
（編者註：為了讓HTML原始碼正常顯示，已將所有“< ”符號的右邊加了一個空格，實際應用時需將該空格去掉。）

代碼：
< 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屬性簡單應用。

2、上面的立體效果是凹下去的，現在讓我們把明暗色對換一下看看效果如何：

代碼：
< 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、等等，先別樂，凸上來的效果是有了但好象還缺點什麼似的。加上個表格底色看看。

代碼：
< 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>
啊！這就是顏色渾然一體的三維表格了，看看是不是比上面那個沒加底色的表格好看多了。

4、最後再看看下面這個樣本：

代碼：
< 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>
有人可能又要問了，三維表格的顏色到底怎麼取才好看呢？這個問題可要專業平面設計人員才能正確回答了。