<P>　　 曾经有位网友问我：“你主页带立体效果左边菜单是图片还是用按钮软件做的？” 
<P>　　  
其实它根本不是什么按钮工具做图形，而完全是利用表格（TABLE）标签的两个元素属性borderColorDark、borderColorLight而做出来的，另外还要加上对bgcolor元素属性以及对色彩的较好把握。  
 
<P>　　 HTML表格带立体效果的三维表格，是依靠边线亮度实现的。边线亮色分明色（Light）和暗色（  
Dark）两种，一般使用其默认值即可，但也是可以调整的。调整表格边框亮度实际上就是指定其明暗两种颜色，由TABLE元素的borderColorLight、borderColorDark属性来定义。<BR><BR>1、下例是将边框明色设为白色，暗色设为紫酱色：<BR>（编者注：为了让HTML源代码正常显示，已将所有“<  
”符号的右边加了一个空格，实际应用时需将该空格去掉。）<BR> 
<TABLE cellSpacing=0 borderColorDark=maroon cellPadding=4 width=450 align=center  
borderColorLight=white border=1> 
<TBODY> 
<TR> 
<TD class=whiteword width="50%" bgColor=#808080>源代码</TD> 
<TD class=whiteword width="50%" bgColor=#808080>效果图 </TD></TR> 
<TR> 
<TD bgColor=#ffffff>< 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><BR></TD> 
<TD vAlign=center align=middle bgColor=#d8d8d8> 
<TABLE cellSpacing=1 borderColorDark=maroon borderColorLight=white border=1> 
<TBODY> 
<TR> 
<TH>Food</TH> 
<TH>Drink</TH> 
<TH>Sweet</TH> 
<TR> 
<TD>A</TD> 
<TD>B</TD> 
<TD>C</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>　　  
以上是对bordercolorlight、bordercolordark属性简单应用。<BR><BR>2、上面的三维效果是凹下去的，现在让我们把明暗色对换一下看看效果如何：<BR><BR> 
<TABLE cellSpacing=0 borderColorDark=maroon cellPadding=4 width=450 align=center  
borderColorLight=white border=1> 
<TBODY> 
<TR> 
<TD class=whiteword width="50%" bgColor=#808080>源代码</TD> 
<TD class=whiteword width="50%" bgColor=#808080>效果图 </TD></TR> 
<TR> 
<TD bgColor=#ffffff>< 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> </TD> 
<TD vAlign=center align=middle bgColor=#d8d8d8> 
<TABLE cellSpacing=1 borderColorDark=white borderColorLight=maroon border=1> 
<TBODY> 
<TR> 
<TH>Food</TH> 
<TH>Drink</TH> 
<TH>Sweet</TH> 
<TR> 
<TD>A</TD> 
<TD>B</TD> 
<TD>C</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>　　  
哇！神了，竟变成凸上来的效果。<BR><BR>3、等等，先别乐，凸上来的效果是有了但好象还缺点什么似的。加上个表格底色看看。<BR><BR> 
<TABLE cellSpacing=0 borderColorDark=maroon cellPadding=4 width=450 align=center  
borderColorLight=white border=1> 
<TBODY> 
<TR> 
<TD class=whiteword width="50%" bgColor=#808080>源代码</TD> 
<TD class=whiteword width="50%" bgColor=#808080>效果图 </TD></TR> 
<TR> 
<TD bgColor=#ffffff><BR>< table cellspacing=1 border=1  
bordercolorlight=maroon bordercolordark=white bgcolor=fdc0c0> < tr><  
th>Food< /th>< th>Drink< /th>< th>Sweet< /th>  
< tr>< td>A< /td>< td>B< /td>< td>C<  
/td>< /tr> < /table><BR></TD> 
<TD vAlign=center align=middle bgColor=#d8d8d8> 
<TABLE cellSpacing=1 borderColorDark=white bgColor=#fdc0c0  
borderColorLight=maroon border=1> 
<TBODY> 
<TR> 
<TH>Food</TH> 
<TH>Drink</TH> 
<TH>Sweet</TH> 
<TR> 
<TD>A</TD> 
<TD>B</TD> 
<TD>C</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>　　  
啊！这就是颜色浑然一体的三维表格了，看看是不是比上面那个没加底色的表格好看<BR>多了。<BR><BR>4、最后再看看下面这个示例：<BR><BR> 
<TABLE cellSpacing=0 borderColorDark=maroon cellPadding=4 width=450 align=center  
borderColorLight=white border=1> 
<TBODY> 
<TR> 
<TD class=whiteword width="50%" bgColor=#808080>源代码</TD> 
<TD class=whiteword width="50%" bgColor=#808080>效果图 </TD></TR> 
<TR> 
<TD bgColor=#ffffff><BR>< 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><BR></TD> 
<TD vAlign=center align=middle bgColor=#f1fafa> 
<TABLE cellSpacing=1 borderColorDark=#fdfeff bgColor=#e0f0ff  
borderColorLight=#99ccff border=1> 
<TBODY> 
<TR> 
<TH>Food</TH> 
<TH>Drink</TH> 
<TH>Sweet</TH> 
<TR> 
<TD>A</TD> 
<TD>B</TD> 
<TD>C</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>有人可能又要问了，三维表格的颜色到底怎么取才好看呢？这个问题可要专业平面设计人员才能正确回答了。