神马文学网网页表格特效QQ
来源：百度文库 编辑：神马文学网 时间：2024/05/16 00:17:43
简单实用的网页表格特效
作者：未知出处：天极网责任编辑： 龙犊 [ 2006-03-31 16:17 ]
简单实用的网页表格特效_这里主要是将第一个表格居左，第二个表格居右，第三个表格居中。这样当你随意调整里面三个表格大小的时候，他们的间距将保持不变，非常方便。
一、彩色虚线表格
虚 线
表 格
＜style type="text/css"＞
＜!--
.tab1 {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #00CC66;
border-right-color: #0099CC;
border-bottom-color: #FF0000;
border-left-color: #6699FF;
}
--＞
＜/style＞
＜table width="200" border="0" cellpadding="2" cellspacing="2" class="tab1"＞
＜tr＞
＜td＞＜div align="center"＞虚＜/div＞＜/td＞
＜td＞＜div align="center"＞线＜/div＞＜/td＞
＜/tr＞
＜tr＞
＜td＞＜div align="center"＞表＜/div＞＜/td＞
＜td＞＜div align="center"＞格＜/div＞＜/td＞
＜/tr＞
＜/table＞
二、鼠标指向单元格变色
onmouseout="this.style.backgroundColor=’’" 鼠标离开效果onmouseover="this.style.backgroundColor=’#FFcccc’"鼠标放上去的效果，
可以修改#FFcccc的值来改变颜色
＜table width="200" border="1" cellspacing="0" cellpadding="0"＞
＜tr＞
＜td onmouseout="this.style.backgroundColor=’’" onmouseover="this.style.backgroundColor=’#FFcccc’"＞ ＜/td＞
＜/tr＞
＜tr＞
＜td onmouseout="this.style.backgroundColor=’’" onmouseover="this.style.backgroundColor=’#FFccaa’"＞ ＜/td＞
＜/tr＞
＜/table＞
三、立体表格
立体 表格
＜table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"＞
＜tr align="center"＞
＜td width="86"
bordercolorlight="#000000" bordercolordark="#eeeeee" bgcolor="#B7B7B7" ＞立体＜/td＞
＜td width="108"
bordercolorlight="#000000" bordercolordark="#eeeeee" bgcolor="#B7B7B7" ＞表格＜/td＞
＜/tr＞
＜/table＞
四、表格嵌套
1、利用表格的间距来做嵌套
＜table width="200" border="1" cellspacing="4" cellpadding="0"＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
主要是用到间距 cellspacing="4"
2、充分利用根据表格对齐的方式
这里主要是将第一个表格居左，第二个表格居右，第三个表格居中。这样当你随意调整里面三个表格大小的时候，他们的间距将保持不变，非常方便。
＜table width="200" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000"＞
＜tr＞
＜td＞＜table width="60" border="1" align="left" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜table width="60" border="1" align="right" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜table width="80" border="1" align="center" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞＜/td＞
＜/tr＞
＜/table＞
五、半透明表格
半 透明
表 格
这里主要是用到了CSS滤镜filter: Alpha(Opacity=20)。
＜style type="text/css"＞
＜!--
.bg {
background-color: #66CCFF;
filter: Alpha(Opacity=20);
}
--＞
＜table width="200" border="0" cellpadding="0" cellspacing="0" class="bg"＞
＜tr＞
＜td＞＜div align="center"＞半＜/div＞＜/td＞
＜td＞＜div align="center"＞透明＜/div＞＜/td＞
＜/tr＞
＜tr＞
＜td＞＜div align="center"＞表＜/div＞＜/td＞
＜td＞＜div align="center"＞格＜/div＞＜/td＞
＜/tr＞
＜/table＞
六、阴影表格
111 222 333
这里主要用到了CSS滤镜style="filter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10"
＜div style="filter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10"＞
＜table width=300 border=1 bgcolor=#EAEAEA＞
＜tr＞＜td width="93"＞111＜/td＞＜td width="91"＞222＜/td＞＜td width="94"＞333＜/td＞＜/tr＞
＜/table＞
＜/div＞
附：插入CSS样式的方法（我们这里用半透明表格来做说明)
第一种方法是定义一个CSS名称。
比如
＜style type="text/css"＞
＜!--
.bg {
background-color: #66CCFF;
filter: Alpha(Opacity=20);
}
--＞
元素需要用到CSS的时候，比如表格，定义一个CLASS就可以了，如
＜table width="200" border="0" cellpadding="0" cellspacing="0" class="bg"＞
第二种是直接在你需要用到CSS元素的地方插入相关代码，style=""如：
＜table width="201" border="1" style="filter: Alpha(Opacity=20);background-color: #66CCFF;"＞
Google提供的广告
上海本本之星笔记本论坛IBM港行快修，上海深圳合肥等全国销售强大渠道，完善售后，港行7天正规快修www.nbstar.net北京圣钰佳泰科技有限公司中关村高新企业,与ibm hp sun sisco合作,为您提供更优秀的产品及贴心服务www.aixserver.comIBM笔记本 港行机专卖IBM笔记本港行机专卖论坛专营IBM港行机型 境外机型www.91bjb.com/
发表评论：(Html：禁止，UBB：允许) 【查看关于网页设计 所有评论】
笔名
【收藏到天极网摘】
请您注意：遵守国家有关法律、法规，尊重网上道德，承担一切因您的行为而直接或间接引起的法律责任。 天极网拥有管理笔名和留言的一切权利。
·联动天下域名20元抢购中 ·猫仔队 互动娱乐先锋 ·戴尔网站 大礼不断
·上网买戴尔，超值不超支! ·免费试用 让协同办公更美好 ·电子政务进入快车道
·网络安全的重要性及现实意义 ·上网买戴尔，得免费升级大礼 ·Excel服务器学习下载
相关文章
最新更新
编辑新作
热点文章
介绍符合WEB标准的导航菜单(2006-03-30 08:53)从GMail认识的W3C网页标准和Ajax(2006-03-30 08:58)网页设计高级布局40例参考(2006-03-30 09:06)透露北京网站数量居全国第一(2006-03-30 16:46)业余人士也专业 个人建站流程全接触(2006-03-30 16:52)图例分析outerHTML的用法(2006-04-03 08:49)使用xmlhttp为网站增加域名查询功能(2006-04-03 08:57)十条优秀的网站设计经验(2006-04-03 09:03)“爱看”广告 Xplus推出新广告盈利模式(2006-04-03 09:11)
WML教程：文本框控件（Input）初试WAP之wml＋ASP查询WML Script标准函数库WMLScript脚本程序设计WML Script语法基础历史文章-3214历史文章-1990历史文章-1990历史文章-19907617CSeek产品列表 - 1413页CSeek产品列表 - 1414页CSeek产品列表 - 1415页CSeek产品列表 - 1416页
WML Script标准函数库WMLScript脚本程序设计WML Script语法基础WML的简单例子及编辑、测试方法入门：WML的基本情况概述历史文章-1303历史文章-1791历史文章-1791历史文章-17918370CSeek产品列表 - 762页CSeek产品列表 - 763页CSeek产品列表 - 764页CSeek产品列表 - 765页
网站制作简易流程介绍什么是web 2.0全面解读WEB 2.0很多人问的问题：怎样设计网页ASP视频教程第三章-ASP基本语法历史文章-3585历史文章-1900历史文章-1900历史文章-19006915CSeek产品列表 - 636页CSeek产品列表 - 637页CSeek产品列表 - 638页CSeek产品列表 - 639页
最新热图
世界杯各国足球宝贝大比拼
奢华性感睡衣垂涎你的美色
贝克汉姆06世界杯新发型
杭州十强超女唐笑图片
2006AC米兰球员写真集
笔记本模特靓图欣赏
高性价比液晶电视导购
闪龙赛扬各具优势 教你装低端电脑
近代相机NF-EOS接环试用
热门降价手机“英雄”
天极无线
经典名曲华语流行欧美风情
人声音效原声大碟
死了都要爱-信乐团
枫-周杰伦
光芒-飞儿乐团
桃花朵朵开-阿牛
天鹅-周笔畅
我会好好的-王心凌
香水百合-张韶涵
隐形的翅膀-张韶涵
最佳损友-陈奕迅
QQ爱-S.W.ing
睫毛弯弯-王心凌
霍元甲-周杰伦
花田错-王力宏
吉祥三宝-布仁巴雅尔
狼爱上羊-汤潮
不得不爱-潘玮柏
发如雪-周杰伦
夜曲-周杰伦
不想长大-S.H.E
编号89757-林俊杰
To be loved-张靓颖
潘朵拉-张韶涵
To be loved-张靓颖
潘朵拉-张韶涵
网页特效(8)网页设计(29)表格(55)网页陶吧(264)
加入我的收藏
讨论本文
相关文章
相关厂商
相关产品
相关商家
复制链接
相关关键字
网页特效(8)网页设计(29)表格(55)网页陶吧(264)
',1)">
·聚焦勤哲Excel服务器
·4K/月就业协议 Linux高级公开课 报名中
·直播电视＋激情电影,高速!清晰!
·参加挑战100e 天天免费学英语
此文章的读者还阅读了以下文章
初试WAP之wml＋ASP查询WML教程：文本框控件（Input）WML Script标准函数库WMLScript脚本程序设计WML Script语法基础WML的简单例子及编辑、测试方法入门：WML的基本情况概述ASP生成WML文件源代码样本历史文章-922历史文章-3477历史文章-3477历史文章-34773919CSeek产品列表 - 775页CSeek产品列表 - 776页CSeek产品列表 - 777页CSeek产品列表 - 778页
',2)">
每日文章点击排行榜
QQ上面100%获得别人IP的办法Windows XP系统崩溃后简单的急救方法Gmail的又一新功能：Reply by Chat2006年德国世界杯海报设计精选故障分析 Windows无法开机的两个普遍原因图片合成制作“空中灌篮”超酷动画Photoshop滤镜创意设计：异形樱桃Windows XP系统下磁盘格式转换高招[视频]Photoshop照片抠图：抽出工具Windows XP巧妙关闭USB错误提示的方法
特别推荐
2006超级女声精彩图片集锦最新电影预告片抢先欣赏微软Office 2007专区英特尔推出英保通2.0网吧平台解决方案顶级多媒体终端 诺基亚N91上市发布会大话无Wi-Fi影像生活!如何玩转无线DC?Word公式编辑器简明使用手册激发创新力量 放飞Power梦想LG影音之王KG928 时尚白领设计大赛我描我绘 LG影音之王KG928拍照游戏
欢迎订阅天极网RSS聚合资讯：http://www.yesky.com/index.xml
更多精彩资讯尽在天极IT搜索
天极Chinabyte:新闻评论通信互联网CB博客企业博客信息化企业软件解决方案商用系统服务器数据调查
天极Yesky:产品库经销商商情手机数码笔记本台式机硬件外设网络数字家庭评测E时代软件游戏下载
IT专家网:数据库移动计算网络安全存储Web服务CIO中小企业ITIT专家库白皮书IT专家网论坛IT专家网社区
欢迎投稿 |天极服务 |关于我们 |网站律师 |电子杂志 |RSS订阅 |友情合作 |加入我们 |网站地图
设定天极为首页
Copyright (C) 1999-2006 Chinabyte.com, All Rights Reserved 版权所有 天极网络渝ICP证B2-20030003号
商务联系、网站内容、合作建议：010-82657868详细联系方式在线提交意见反馈 Powered by 天极内容管理平台CMS4i
作者：未知出处：天极网责任编辑： 龙犊 [ 2006-03-31 16:17 ]
简单实用的网页表格特效_这里主要是将第一个表格居左，第二个表格居右，第三个表格居中。这样当你随意调整里面三个表格大小的时候，他们的间距将保持不变，非常方便。
一、彩色虚线表格
虚 线
表 格
＜style type="text/css"＞
＜!--
.tab1 {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #00CC66;
border-right-color: #0099CC;
border-bottom-color: #FF0000;
border-left-color: #6699FF;
}
--＞
＜/style＞
＜table width="200" border="0" cellpadding="2" cellspacing="2" class="tab1"＞
＜tr＞
＜td＞＜div align="center"＞虚＜/div＞＜/td＞
＜td＞＜div align="center"＞线＜/div＞＜/td＞
＜/tr＞
＜tr＞
＜td＞＜div align="center"＞表＜/div＞＜/td＞
＜td＞＜div align="center"＞格＜/div＞＜/td＞
＜/tr＞
＜/table＞
二、鼠标指向单元格变色
onmouseout="this.style.backgroundColor=’’" 鼠标离开效果onmouseover="this.style.backgroundColor=’#FFcccc’"鼠标放上去的效果，
可以修改#FFcccc的值来改变颜色
＜table width="200" border="1" cellspacing="0" cellpadding="0"＞
＜tr＞
＜td onmouseout="this.style.backgroundColor=’’" onmouseover="this.style.backgroundColor=’#FFcccc’"＞ ＜/td＞
＜/tr＞
＜tr＞
＜td onmouseout="this.style.backgroundColor=’’" onmouseover="this.style.backgroundColor=’#FFccaa’"＞ ＜/td＞
＜/tr＞
＜/table＞
三、立体表格
立体 表格
＜table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"＞
＜tr align="center"＞
＜td width="86"
bordercolorlight="#000000" bordercolordark="#eeeeee" bgcolor="#B7B7B7" ＞立体＜/td＞
＜td width="108"
bordercolorlight="#000000" bordercolordark="#eeeeee" bgcolor="#B7B7B7" ＞表格＜/td＞
＜/tr＞
＜/table＞
四、表格嵌套
1、利用表格的间距来做嵌套
＜table width="200" border="1" cellspacing="4" cellpadding="0"＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
主要是用到间距 cellspacing="4"
2、充分利用根据表格对齐的方式
这里主要是将第一个表格居左，第二个表格居右，第三个表格居中。这样当你随意调整里面三个表格大小的时候，他们的间距将保持不变，非常方便。
＜table width="200" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000"＞
＜tr＞
＜td＞＜table width="60" border="1" align="left" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜table width="60" border="1" align="right" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜table width="80" border="1" align="center" cellpadding="0" cellspacing="0"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞＜/td＞
＜/tr＞
＜/table＞
五、半透明表格
半 透明
表 格
这里主要是用到了CSS滤镜filter: Alpha(Opacity=20)。
＜style type="text/css"＞
＜!--
.bg {
background-color: #66CCFF;
filter: Alpha(Opacity=20);
}
--＞
＜table width="200" border="0" cellpadding="0" cellspacing="0" class="bg"＞
＜tr＞
＜td＞＜div align="center"＞半＜/div＞＜/td＞
＜td＞＜div align="center"＞透明＜/div＞＜/td＞
＜/tr＞
＜tr＞
＜td＞＜div align="center"＞表＜/div＞＜/td＞
＜td＞＜div align="center"＞格＜/div＞＜/td＞
＜/tr＞
＜/table＞
六、阴影表格
111 222 333
这里主要用到了CSS滤镜style="filter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10"
＜div style="filter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10"＞
＜table width=300 border=1 bgcolor=#EAEAEA＞
＜tr＞＜td width="93"＞111＜/td＞＜td width="91"＞222＜/td＞＜td width="94"＞333＜/td＞＜/tr＞
＜/table＞
＜/div＞
附：插入CSS样式的方法（我们这里用半透明表格来做说明)
第一种方法是定义一个CSS名称。
比如
＜style type="text/css"＞
＜!--
.bg {
background-color: #66CCFF;
filter: Alpha(Opacity=20);
}
--＞
元素需要用到CSS的时候，比如表格，定义一个CLASS就可以了，如
＜table width="200" border="0" cellpadding="0" cellspacing="0" class="bg"＞
第二种是直接在你需要用到CSS元素的地方插入相关代码，style=""如：
＜table width="201" border="1" style="filter: Alpha(Opacity=20);background-color: #66CCFF;"＞
Google提供的广告
上海本本之星笔记本论坛IBM港行快修，上海深圳合肥等全国销售强大渠道，完善售后，港行7天正规快修www.nbstar.net北京圣钰佳泰科技有限公司中关村高新企业,与ibm hp sun sisco合作,为您提供更优秀的产品及贴心服务www.aixserver.comIBM笔记本 港行机专卖IBM笔记本港行机专卖论坛专营IBM港行机型 境外机型www.91bjb.com/
发表评论：(Html：禁止，UBB：允许) 【查看关于网页设计 所有评论】
笔名
【收藏到天极网摘】请您注意：遵守国家有关法律、法规，尊重网上道德，承担一切因您的行为而直接或间接引起的法律责任。 天极网拥有管理笔名和留言的一切权利。
·联动天下域名20元抢购中 ·猫仔队 互动娱乐先锋 ·戴尔网站 大礼不断
·上网买戴尔，超值不超支! ·免费试用 让协同办公更美好 ·电子政务进入快车道
·网络安全的重要性及现实意义 ·上网买戴尔，得免费升级大礼 ·Excel服务器学习下载
相关文章
最新更新
编辑新作
热点文章
介绍符合WEB标准的导航菜单(2006-03-30 08:53)从GMail认识的W3C网页标准和Ajax(2006-03-30 08:58)网页设计高级布局40例参考(2006-03-30 09:06)透露北京网站数量居全国第一(2006-03-30 16:46)业余人士也专业 个人建站流程全接触(2006-03-30 16:52)图例分析outerHTML的用法(2006-04-03 08:49)使用xmlhttp为网站增加域名查询功能(2006-04-03 08:57)十条优秀的网站设计经验(2006-04-03 09:03)“爱看”广告 Xplus推出新广告盈利模式(2006-04-03 09:11)
WML教程：文本框控件（Input）初试WAP之wml＋ASP查询WML Script标准函数库WMLScript脚本程序设计WML Script语法基础历史文章-3214历史文章-1990历史文章-1990历史文章-19907617CSeek产品列表 - 1413页CSeek产品列表 - 1414页CSeek产品列表 - 1415页CSeek产品列表 - 1416页
WML Script标准函数库WMLScript脚本程序设计WML Script语法基础WML的简单例子及编辑、测试方法入门：WML的基本情况概述历史文章-1303历史文章-1791历史文章-1791历史文章-17918370CSeek产品列表 - 762页CSeek产品列表 - 763页CSeek产品列表 - 764页CSeek产品列表 - 765页
网站制作简易流程介绍什么是web 2.0全面解读WEB 2.0很多人问的问题：怎样设计网页ASP视频教程第三章-ASP基本语法历史文章-3585历史文章-1900历史文章-1900历史文章-19006915CSeek产品列表 - 636页CSeek产品列表 - 637页CSeek产品列表 - 638页CSeek产品列表 - 639页
最新热图
世界杯各国足球宝贝大比拼
奢华性感睡衣垂涎你的美色
贝克汉姆06世界杯新发型
杭州十强超女唐笑图片
2006AC米兰球员写真集
笔记本模特靓图欣赏
高性价比液晶电视导购
闪龙赛扬各具优势 教你装低端电脑
近代相机NF-EOS接环试用
热门降价手机“英雄”
天极无线
经典名曲华语流行欧美风情人声音效原声大碟死了都要爱-信乐团枫-周杰伦光芒-飞儿乐团桃花朵朵开-阿牛天鹅-周笔畅我会好好的-王心凌香水百合-张韶涵隐形的翅膀-张韶涵最佳损友-陈奕迅QQ爱-S.W.ing睫毛弯弯-王心凌霍元甲-周杰伦花田错-王力宏吉祥三宝-布仁巴雅尔狼爱上羊-汤潮不得不爱-潘玮柏发如雪-周杰伦夜曲-周杰伦不想长大-S.H.E编号89757-林俊杰To be loved-张靓颖潘朵拉-张韶涵To be loved-张靓颖潘朵拉-张韶涵网页特效(8)网页设计(29)表格(55)网页陶吧(264)
加入我的收藏
讨论本文
相关文章
相关厂商
相关产品
相关商家
复制链接
相关关键字
网页特效(8)网页设计(29)表格(55)网页陶吧(264)
',1)">
·聚焦勤哲Excel服务器
·4K/月就业协议 Linux高级公开课 报名中
·直播电视＋激情电影,高速!清晰!
·参加挑战100e 天天免费学英语
此文章的读者还阅读了以下文章初试WAP之wml＋ASP查询WML教程：文本框控件（Input）WML Script标准函数库WMLScript脚本程序设计WML Script语法基础WML的简单例子及编辑、测试方法入门：WML的基本情况概述ASP生成WML文件源代码样本历史文章-922历史文章-3477历史文章-3477历史文章-34773919CSeek产品列表 - 775页CSeek产品列表 - 776页CSeek产品列表 - 777页CSeek产品列表 - 778页
',2)">每日文章点击排行榜
QQ上面100%获得别人IP的办法Windows XP系统崩溃后简单的急救方法Gmail的又一新功能：Reply by Chat2006年德国世界杯海报设计精选故障分析 Windows无法开机的两个普遍原因图片合成制作“空中灌篮”超酷动画Photoshop滤镜创意设计：异形樱桃Windows XP系统下磁盘格式转换高招[视频]Photoshop照片抠图：抽出工具Windows XP巧妙关闭USB错误提示的方法
特别推荐
2006超级女声精彩图片集锦最新电影预告片抢先欣赏微软Office 2007专区英特尔推出英保通2.0网吧平台解决方案顶级多媒体终端 诺基亚N91上市发布会大话无Wi-Fi影像生活!如何玩转无线DC?Word公式编辑器简明使用手册激发创新力量 放飞Power梦想LG影音之王KG928 时尚白领设计大赛我描我绘 LG影音之王KG928拍照游戏
欢迎订阅天极网RSS聚合资讯：http://www.yesky.com/index.xml
更多精彩资讯尽在天极IT搜索
天极Chinabyte:新闻评论通信互联网CB博客企业博客信息化企业软件解决方案商用系统服务器数据调查
天极Yesky:产品库经销商商情手机数码笔记本台式机硬件外设网络数字家庭评测E时代软件游戏下载
IT专家网:数据库移动计算网络安全存储Web服务CIO中小企业ITIT专家库白皮书IT专家网论坛IT专家网社区
欢迎投稿 |天极服务 |关于我们 |网站律师 |电子杂志 |RSS订阅 |友情合作 |加入我们 |网站地图
设定天极为首页
Copyright (C) 1999-2006 Chinabyte.com, All Rights Reserved 版权所有 天极网络渝ICP证B2-20030003号
商务联系、网站内容、合作建议：010-82657868详细联系方式在线提交意见反馈 Powered by 天极内容管理平台CMS4i