您现在的位置:首页 >> 建站经验 >> 内容

HTML表格特效代码大全,表格代码大全(2)

时间:2009/9/14 11:45:18 点击:3968

  核心提示:1. 两种细线表格做法源码如下:table width=100% border=1 bordercolor=#000000 tr bordercolor=#FFFFFF td表格边线为1,线色为黑,行线色为白。/td /tr/tableptable width=100% border=0 cells...

4. 虚线边框表格

源码如下:

<style type="text/css">
.tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT:
#000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td class="tb"><center>www.blueidea.com</td>
   </tr>
</table>
<p>
虚线直线1
<hr size=1 style="border:1px dotted #001403;">
虚线直线2
<p size=1 style="border:1px dotted #001403;">

5. 分类型表格

源码如下:

<fieldset>
<legend>item</legend>
content
</fieldset>

6. 变色的单元格1,通过a:hover做

源码如下:

<style>
a:link,a:visited,a:hover
{width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}
a:hover{background:#0099ff;color:black}
td{background:#3366cc;color:white;padding:0px}
</style>

<TABLE width=100% cellspacing=1 bgcolor=black >
   <TR>
     <TD><a href="#">Blueidea
     <TD><a href="#">.com
   <TR>
     <TD><a href="#">CNBruce
     <TD><a href="#">.com
</TABLE>

7. 变色的单元格2,已经做成了CSS,注意还有透明效果

源码如下:

<style type="text/css">
.aa
{ background-color:#0000ff; color:#ff0000;filter: alpha(opacity=50)}
.bb
{ background-color:#3366cc; color:#ffffff}
</style>


<table   width="100%">
   <tr>
     <td   onmouseover="this.className='aa'" onmouseout="this.className='bb'"
class="bb"><center><b>cnbruce</td>
    </tr>
</table>

8. 变色的单元格3,通过mouse事件做.有点微软的味道

源码如下:
<table width="100%" border="1" cellpadding="3" cellspacing="0"
bordercolor="#efefef" bgcolor="#efefef">
   <tr>
     <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";
onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><div align="left">
Blueidea</div></td>
   </tr>
   <tr>
     <td
onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">
cnbruce</td>
   </tr>
</table>

9. 透明表格

<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0>
   <tr><td><center>cnbruce</td></tr>
</table>

10. 表格边框显示外阴影

源码如下:

<table   align=center   width=200   height=100   bgcolor=#f3f3f3
style="filter:progidXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
   <tr>
     <td><center>www.tao536.com</td>
   </tr>
</table>

作者:冷月湖 录入:冷月湖 来源:原创
相关评论
发表我的评论
  • 大名:
  • 内容:
  • 亿万站网址导航-站长之家(www.yiwanzhan.cn) © 2006-2024 版权所有 All Rights Reserved.
  • Email:xiegr71@163.com 站长QQ:329700870 京ICP备07500142号