软件开发培训班 >> 编程开发 >> JavaScript

简单实用的网页表格特效

　　本文标签：简单实用的网页表格特效

<BODY>
一、彩色虚线表格
<style type="text/css">

</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>
<p></P>
二、鼠标指向单元格变色
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr> 
<td <I>onmouse</I>out="this.style.backgroundColor=" <I>onmouse</I>over="this.style.backgroundColor=#FFcccc">单元格变色</td>
</tr>
<tr> 
<td <I>onmouse</I>out="this.style.backgroundColor=" <I>onmouse</I>over="this.style.backgroundColor=#FFccaa">单元格变色</td>
</tr>
</table>
<p></P>
三、立体表格
<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>
<p></P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/software/news/2021/7m83500.html"  target=_blank > 不符合Win11硬件标准？教你如何照样升级Win11 </a></td><td><a href="http://www.zhujiangroad.com/net/news/2022/2a17587.html"  target=_blank > 还不懂路由器组网？看完这篇文章你就明白 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/edu/soft/76321.html"  target=_blank > 如何关闭win7的开机启动画面来加快系统启动的速度 </a></td><td><a href="http://www.zhujiangroad.com/dc/news/2013/12a16764.html"  target=_blank > 简单实用 10条摄影技巧教你精通变焦特效 </a></td></tr></table></div>
四、表格嵌套
1、利用表格的间距来做嵌套 
<P></P>
<P><table width="200" border="1" cellspacing="4" cellpadding="0">
<tr>
<td>嵌套</td>
<td>嵌套</td>
<td>嵌套</td>
</tr>
</table>
<p></P>
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>
<p></P>
五、半透明表格
<style type="text/css">
 
</style>
<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>
<p></P>
六、
暗影表格
<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>
</BODY>
</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/hardware/news/2022/2a17583.html"  target=_blank > 太占CPU电脑太卡？教你关闭Win11内存压缩 </a></td><td><a href="http://www.zhujiangroad.com/web/news/2023/10m88495.html"  target=_blank > TikTok Shop折戟印尼，能否成为下一个抖音电商？ </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2021/8m83655.html"  target=_blank > 数字人民币能走多远？能取代线上支付方式么？ </a></td><td><a href="http://www.zhujiangroad.com/net/html/69772.html"  target=_blank > seo成功必先解决的三个大忌 </a></td></tr></table></div>

技术文章快速查找

Mootools 1.2教程设置和获取样式表属性

Javascript - 全面理解 caller，callee，call，apply

将json当数据库一样操作的javascript lib

HTML页面滚动时获取离页面顶部的距离2种实现方法

Js文字背景行如流水特效

DIV菜单层实现代码

javascript 解析url的search方法

javascript dom代码应用简单的相册[firefox only]

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建