加入收藏
联系我们
关于我们
 您现在的位置: 亿聪 >> 网络学院 >> 网站设计 >> HTML/CSS >> 正文  
  表格特效代码全集中         
表格特效代码全集中
[ 作者:未知    转贴自:blueidea    点击数:8904    更新时间:2004/7/27    文章录入:亿聪 ]
1. 两种细线表格做法


  源码如下:

<table width="100%" border="1" bordercolor="#000000">
  <tr bordercolor="#FFFFFF">
    <td>表格边线为1,线色为黑,行线色为白。</td>
  </tr>
</table>
<p>
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
  <tr>
    <td bgcolor="#FFFFFF">表格边线为0,间距为1,背景色为黑,行背景色为白。</td>
  </tr>
</table>

  2. 立体表格



  源码如下:

<table  border=1 cellspacing=0  width=100% bordercolorlight=#333333 bordercolordark=#efefef>
  <tr bgcolor=#cccccc>
    <td>it365cn</td>
    <td>it365cn</td>
    <td>it365cn</td>
    <td>it365cn</td>
  </tr>
  <tr bgcolor=#cccccc>
    <td>cnbruce</td>
    <td>cnbruce</td>
    <td>cnbruce</td>
    <td>cnbruce</td>
  </tr>
</table>
<center>表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccccc

3. 另类圆角表格制作


  源码如下:

原图:
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
  <tr height=1>
    <td rowspan=4 width=1></td>
    <td rowspan=3 width=1></td>
    <td rowspan=2 width=1></td>
    <td width=2></td>
    <td bgcolor=#43B5C9></td>
    <td width=2></td>
    <td rowspan=2 width=1></td>
    <td rowspan=3 width=1></td>
    <td rowspan=4 width=1></td>
  </tr>
  <tr height=1>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=1>
    <td bgcolor=#43B5C9></td>
    <td colspan=3 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=2>
    <td bgcolor=#43B5C9></td>
    <td colspan=5 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
</table>
<p>放大
<table cellpadding=0 cellspacing=0 border=1 width=282 align=center>
  <tr height=10>
    <td rowspan=4 width=10></td>
    <td rowspan=3 width=10></td>
    <td rowspan=2 width=10></td>
    <td width=20></td>
    <td bgcolor=#43B5C9></td>
    <td width=20></td>
    <td rowspan=2 width=10></td>
    <td rowspan=3 width=10></td>
    <td rowspan=4 width=10></td>
  </tr>
  <tr height=10>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=10>
    <td bgcolor=#43B5C9></td>
    <td colspan=3 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=20>
    <td bgcolor=#43B5C9></td>
    <td colspan=5 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
</table>
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:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
  <tr>
    <td><center>www.cnbruce.com</td>
  </tr>
</table>

11. VML代码实现的圆角表格
(1).

  源码如下:

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
   <v:RoundRect style="position:relative;width:150;height:240px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
    <v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
    </v:RoundRect>
</body>
</html>

(2).

  源码如下:

<html  xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
      <v:RoundRect  style="position:relative;width:150;height:240px">
<v:path  textpathok="true"  />
      <v:textpath  on="true"  string="cnbrucecnbrucecnbrucecnbrucecnbruc
ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce"  />
        <v:shadow  on="T"  type="single"  color="#b3b3b3"  offset="3px,3px"/>
        <v:TextBox  style="font-size:10.2pt;">VML</v:TextBox>
        </v:RoundRect> 
</body>
</html>

(3).


  源码如下:

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
   <v:RoundRect style="position:relative;width:150;height:240px" arcsize=0.5>
    <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
    <v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
    </v:RoundRect>
</body>
</html>


 

  • 上一篇文章: HTML中小meta的大作用

  • 下一篇文章: 用 iframe 解决下拉框与层之冲突
  • 发表评论】【告诉好友】【打印此文】【关闭窗口
     最新5篇热点文章
  • Knoppix 4.0.2 免硬盘免安…[15813]

  • 通过ASP记录进行分页[20035]

  • ASP开发准则[11960]

  • ASP组件指南[11969]

  • ASP指南[11998]

  •  
     最新5篇推荐文章
  • Knoppix 4.0.2 免硬盘免安…[15813]

  • 如何让Win 2003系统更加安…[13339]

  • Nero超刻简明教程[34156]

  • PS商业实战-来杯茶,行吗?…[7269]

  • ASP深度揭密(下)[12589]

  •  
     相 关 文 章
    没有相关文章

      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
        没有任何评论
    设为首页 | 加入收藏 | 关于我们 | 联系我们 | 友情链接 | 版权声明 | 管理登录
    Copyright © 2000-2022 Yicong.com.All Rights Reserved.
    亿聪 版权所有 E-mail: