制作三维表格效果

曾经有位网友问我:“你主页带立体效果左边菜单是图片还是用按钮软件做的?”
其实它根本不是什么按钮工具做图形,而完全是利用表格(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>
有人可能又要问了,三维表格的颜色到底怎么取才好看呢?这个问题可要专业平面设计人员才能正确回答了。

时间: 2024-11-03 10:07:25

制作三维表格效果的相关文章

PPt2007制作三维立体字效果教程

  Office中的艺术字效果已经帮你打理好各种好看的立体炫彩效果.那么你知道如何自己来设置三维立体字么? 本文将与大家分享用Powerpoint2007制作三维立体字效果教程. 教程步骤: 新建一张幻灯片(可以选择将不需要的模板去掉) 点击"插入"-"艺术字"(选择自己喜欢的字体效果) 图1 在文字框中输入自己的内容. 图2 输入好文字之后,我们可以看到如图的效果,接下来我们要做的就是设置三维立体文字效果.右键点击文字,在弹出的菜单中点击"设置文字效果格

Illustrator利用3D工具制作三维轮廓效果教程

给各位Illustrator软件的使用者们来详细的解析分享一下利用3D工具制作三维轮廓效果的教程. 教程分享: STEP 1 使用钢笔工具绘制一个和下图类似的图形.   STEP 2 现在就要开始使用3D效果了.选择这个看起来有点像半个8的图形.打开"Effect > 3D > Revolve"(效果>3D>旋转).这时会弹出一个3D旋转选项的对话框.首先,看看这个对话框是不是全部展开了.如果不是就点击"More Options"(更多选项)

PS制作三维文字效果

教程介绍透视字效果的制作方法.作者采用的使用多层图层错位的方式制作立体效果.制作的方法不是很难,不过需要调整好文字表面及立体面的质感色泽.  最终效果 1.新建文档,大小随意,给背景填充黑色.选择文字工具,选择SEGA字体, 前景设为白色,输入文字:选中上排的文字,在上面T那里输入100点,再选中下排的文字,改为72点:将上下排文字一起选中,并将它们之间的行距更改,使其挨得紧点.    2.选中字体,将颜色改为#E59710:选中'P'字,将它与'S'之间的间距改为-55,再选中'S',将它与'

Powerpoint2007制作三维立体字效果

  新建一张幻灯片(可以选择将不需要的模板去掉) 点击"插入"-"艺术字"(选择自己喜欢的字体效果) 图1 在文字框中输入自己的内容. 图2 输入好文字之后,我们可以看到如图的效果,接下来我们要做的就是设置三维立体文字效果.右键点击文字,在弹出的菜单中点击"设置文字效果格式": 图3 点击进入"三维格式",将具体数据设置如图所示. 图4 同样我们继续设置"三维旋转"设置如右图所示并得到左图效果.(当然角度方

CorelDRAW制作三维效果图形

1.启动CorelDRAW 9.0,在属性栏中将"绘图窗口"选为横向放置,或者将高和宽做相应的调整.然后使用基本绘制工具,完成创建效果的准备工作.单击"椭圆工具",在" 绘图窗口"中部单击鼠标,按住Ctrl键并拖动鼠标到预定的位置,然后放开鼠标,再放开Ctrl键,绘制一个正圆. 2.用选择工具选择第一个圆,通过编辑菜单中的"再制"命令复制这个圆.用选择工具选择第一个圆,然后在圆的上方右击,从弹出的菜单中选择"属性&q

Illustrator利用3D绕转命令制作逼真的三维图形效果教程

给各位Illustrator软件的使用者们来详细的解析分享一下利用3D绕转命令制作逼真的三维图形效果的教程. 教程分享: (1)打开本实例配套素材"糖果广告.ai"文件.   (2)选择瓶盖路径,执行"效果"→"3D"→"绕转"命令.   (3)设置该对象的绕转方向.   (4)手动调整对象的旋转角度.     (5)在对话框中精确设置该对象的角度.   (6)在对话框中展开"表面"选项栏.   (7)在&

Illustrator设计三维弹簧效果图样实例制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计三维弹簧效果图样实例的制作教程. 教程分享: 第1步创建一个新的文档. RGB色彩模式.   接下来创建一个背景. 使用矩形工具(M)创建一个矩形,填充为黑色.(可以直接用ctrl+2进行锁定背景.)   第2步创建一个路径,看起来像字母S,使用椭圆工具(L),创建一个圆圈,无填充和一个白色的描边颜色.   接下来找到对象>变换>移动,使用移动完整复制另一个圆,然后在对话框中单击"复制"按钮.   第3步使用

PPT怎么制作折叠字效果

PPT怎么制作折叠字效果   反倒是如上图所示,通过一些文字变形小技巧以及背景明暗对比做出来的3D效果更加受人追捧.在本文中,小编图文详解使用PPT制作折叠字效果的方法. 1.使用矩形和梯形绘制墙面.为了表现出立体的转角效果,为矩形填充浅灰色(白色主题色系列中第二个),为梯形填充略深一些的灰色(白色主题色系列中第三个).使用文本框工具插入文字内容,字号大小以适合左侧矩形排版为准. 2.同时选中标题和副标题的文本,复制并粘贴为图片格式(具体操作见荧光字效果教程中的相同步骤).将图片格式的文字复制一

如何在网页中制作虚线表格

网页 icech: 在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题. 方法一:作一个1X2的图. 半黑半白,再利用表格作成线.这种方法虽然麻烦,但在任何浏览器中均可浏览,兼容性最好. 方法二:在CSS里面设定. 如果你用DreamWeaver话,只要在CSS面板里new一个style,选择"redefine HTML Tag",再在下拉菜单里先"table",在弹出的面板里,category里选择border,在border里,将top,