网站设计公司（博纳网络）在前面的网页制作技巧“艺术化处理表格”文章中对如何对图像处理进行过详细介绍，本文深圳网站设计主要与各位分享如何制作立体表格。
立体表格主要通过颜色的设置来实现。本例的立体表格效果如图6-42所示。实现的具体步骤如下。
网站设计如何处理表格立体效果实操图6-42立体表格效果
【操作步骤】
第1步，继续以前面示例为基础，打开index.html。选中插入表格，设置主体表格的第3个单元格背景颜色为蓝色(#667BD8)设置垂直对齐方式为顶端。
第2步，在该单元格中插入个4行2列的表格，设置宽度为180像素，居中显示，效果如图6-43所示
网站设计对于表格立体效果处理实操图6-43插入表格
第3步，插入表格的第1行用来控制表格与顶部标题栏的距离，合并第2行的两个单元格，并设置合并单元格背景图像，在设置之前应把第2行高度设置为背景图像的高度，如图6-44所示。
网站设计立体表格处理实操示意图6-44设置单元格
第4步，设置表格的最后行和表格右侧单元格为l像素高或宽，背景颜色为白色。并设置主体单元格背景颜色为浅蓝色(#D6DFF7)，高为200像素，如图6-45所示。
第5步，以同样的方式或复制上面制作的表格，就可以重复制作多个立体表格，最后效果如图6-46所示。
网站设计立体表格处理操作示意图6-46制作的互体表格效果
网站设计如何定义表格样式
使用css可以实现对表格的样式控制，其中表格样式包括边框宽度、边框颜色、边框样式以及表格背景等效果，以及如何使用css控制表格特性等。
网站设计如何设置表格颜色
css使用color属性设置表格中文字的颜色，通过background-color属性来设置表格的背景颜色。
【示例】启动Dreamweaver，新建一个网页，保存为test.html．在<body>标签内输入如下代码：
在<head>标签I~添加<styletvpe:”text/css”>标签，定义一个内部样式表然后输入下面样式，用来定义网页字体的类型
上面代码中用<table>标签创建了个表格设置表格的宽度为300．表格的边框宽度为1．这里没有给出单位，默认为px。使用<tr>和<td>标签创建了4行5列的表格。可以看到，表格的背景颜色和字体颜色通过css进行了设置。显示效果如图6-47所示。
深圳网站设计公司关于网页在设计时如何处理表格立体效果以及怎样设置表格颜色的经验分享本文就到这里，喜欢本站的您请持续关注我们网站。深圳网站设计-博纳网络编辑整理。
深圳网站设计公司关于网页在设计时如何处理表格立体效果以及怎样设置表格颜色的经验分享本文就到这里，喜欢本站的您请持续关注我们网站。深圳网站设计-博纳网络编辑整理。
当前文章链接：/construction/jzhyzx/1472.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
