相关文章
北京网站建设CSS编写过程中常见的10个错误
北京网站制作应用DIV+CSS编码时容易犯的一些错误
企通互联绿色下划线的简洁CSS导航代码
北京网页设计引入样式表(css)的四种方式
企通互联标准建站过程中注意CSS的兼容性问题
企通互联模板制作(下)
网站设计纯CSS搞的alt跟title效果
北京网站制作教程/dreamweaver/提高 为你的站点定做颜色
网站建设需要掌握的八个CSS布局技巧
北京网站建设Xhtml第5天:head区的其他设置
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 企通互联北京网站设计制作三维表格效果
企通互联北京网站设计制作三维表格效果
作者： 北京网站建设 日期：2008-03-27 06:03:34 来源： http://www.qitongnet.com
曾经有位网友问我：“你主页带立体效果左边菜单是图片还是用按钮软件做的？”北京网站建设
其实它根本不是什么按钮工具做图形，而完全是利用表格（TABLE）标签的两个元素属性borderColorDark、borderColorLight而做出来的，另外还要加上对bgcolor元素属性以及对色彩的较好把握。 北京网站制作
HTML表格带立体效果的三维表格，是依靠边线亮度实现的。边线亮色分明色（Light）和暗色（ Dark）两种，一般使用其默认值即可，但也是可以调整的。调整表格边框亮度实际上就是指定其明暗两种颜色，由TABLE元素的borderColorLight、borderColorDark属性来定义。 网页设计
网站建设 网页设计
1、下例是将边框明色设为白色，暗色设为紫酱色： www.qitongnet.com企通互联
（编者注：为了让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> 北京网站设计
有人可能又要问了，三维表格的颜色到底怎么取才好看呢？这个问题可要专业平面设计人员才能正确回答了。
北京网站设计
其实它根本不是什么按钮工具做图形，而完全是利用表格（TABLE）标签的两个元素属性borderColorDark、borderColorLight而做出来的，另外还要加上对bgcolor元素属性以及对色彩的较好把握。 北京网站制作
HTML表格带立体效果的三维表格，是依靠边线亮度实现的。边线亮色分明色（Light）和暗色（ Dark）两种，一般使用其默认值即可，但也是可以调整的。调整表格边框亮度实际上就是指定其明暗两种颜色，由TABLE元素的borderColorLight、borderColorDark属性来定义。 网页设计
网站建设 网页设计
1、下例是将边框明色设为白色，暗色设为紫酱色： www.qitongnet.com企通互联
（编者注：为了让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> 北京网站设计
有人可能又要问了，三维表格的颜色到底怎么取才好看呢？这个问题可要专业平面设计人员才能正确回答了。