破产案件受理费:[原创]灵活运用用html和css，让我们的表格漂亮起来！ - html/css & we...

大家在上网的时候会发现很多网站做的很公整，很漂亮，而我们自己的小站却糟糕的很，这是为什么呢，其中很大的关键在于表格的运用，当然也包括色彩，今天我们就来说一说其中的玄机！先发几种效果，大家看一下。网上应用最多的也无非就是这几种!
当然大家如果又发现了其他漂亮表格，可以来这里咨询和讨论！呵呵
[ 本帖最后由 寅生 于 2006-4-24 09:44 AM 编辑 ]
附件: 您所在的用户组无法下载或查看附件
快乐学习！

UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP

寅生
版主

乐于助人

个人空间
发短消息
加为好友
当前离线
沙发 大 中 小 发表于 2006-4-24 08:55 只看该作者
我们先说第一种效果
代码如下： 复制内容到剪贴板 代码:





这里的奥秘有三点：
1、这是两个表格嵌套。
2、色彩的设置，外面一层表格的背景设置为0099FF，在效果中会是外框颜色，外面表格的单元格背景设置为FFFFFF，效果中就是内外表格中间的白色间隙，内部表格单元格的背景色仍然设置为0099FF。
3、内外两个表格的cellspacing值都设为1，边框border设为0
好了，注意这几个要点，举一反三，效果就是这样实现的。呵呵
快乐学习！

UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主

乐于助人

个人空间
发短消息
加为好友
当前离线
板凳 大 中 小 发表于 2006-4-24 09:12 只看该作者
第二个表格我们会用到样式
源代码如下： 复制内容到剪贴板 代码:






关键点：
这里用到了样式style。两次设置border的样式。
第一次border:1px solid #7AA9DF。这是左边一个单元格的边框，粗细为1像素，颜色为7AA9DF。
第二次border-bottom:1px solid #7AA9DF，这是右边单元格，只设置边框的底边border-bottom。
[ 本帖最后由 寅生 于 2006-4-24 09:27 AM 编辑 ]
快乐学习！

UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主

乐于助人

个人空间
发短消息
加为好友
当前离线
地板 大 中 小 发表于 2006-4-24 09:15 只看该作者
第三个表格
源码如下： 复制内容到剪贴板 代码:

bordercolorlight="#000000" bordercolordark="#eeeeee" height="20">	bordercolorlight="#000000" bordercolordark="#eeeeee">
bordercolorlight="#000000" bordercolordark="#eeeeee" height="20">	bordercolorlight="#000000" bordercolordark="#eeeeee">

要点如下：
1、跟上面效果最大的区别就是这里的边框border值为1，表格之间的间隙cellspacing值仍然为1
2、在这里如果大家看代码的很明显bordercolorlight，bordercolordark主要是用这两个属性。顾名思义，他们分别为边框颜色亮的部分和暗的部分。
3、注意这里这两个颜色的设置，表格的这两个颜色值都为白色，单元格的值分别为000000，eeeeee
快乐学习！

UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主

乐于助人

个人空间
发短消息
加为好友
当前离线
5# 大 中 小 发表于 2006-4-24 09:35 只看该作者
第四个表格效果
源码如下： 复制内容到剪贴板 代码:













这个效果是表格嵌套中的经典，简单美观，现在很多人在模仿这个效果。
关键点：
1、表格的嵌套
先建一个3*2的表格，cellspacing值设为6。然后合并第二行的两个单元格，分别在第一行很第三行的单元格里再插入2*1表格。
2、单元格颜色的设置可以看源码！
快乐学习！

UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主

乐于助人

个人空间
发短消息
加为好友
当前离线
6# 大 中 小 发表于 2006-4-24 09:43 只看该作者
第五个表格
先看一下源码： 复制内容到剪贴板 代码:








这是网页中标准的内容块。显著的标题和内容区分，简洁大方。
关键点：
表格cellspacing值为1，效果中的边框线，背景颜色设为0099FF。下面内容块单元格的颜色设为白色。效果就出来了。是不是很简单，呵呵
好了这五种表格效果都讲完了，大家可以举一反三。
如果上面有什么纰漏，希望朋友们指正。有什么不明白的可以贴出来研究一下。
快乐学习！

UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
clear
酷MM

青铜长老

个人空间
发短消息
加为好友
当前离线
7# 大 中 小 发表于 2006-4-24 09:55 只看该作者
好好学习
一切皆有可能!

UID
19876
帖子
980
精华
0
积分
5117
金币
1747 枚
威望
0
热心度
79
阅读权限
60
来自
广东省东莞市厚街
注册时间
2006-3-9
查看详细资料
TOP
Biglin
支柱会员

个人空间
发短消息
加为好友
当前离线
8# 大 中 小 发表于 2006-4-26 23:04 只看该作者
学习～