您好!欢迎您光临表格特效代码全集中_筑神山庄! 聊天室 I 论坛 I 企业建站 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>计算机网络技术>>>HTML制作教程>>>表格特效代码全集中
表格特效代码全集中
发表日期:2007/2/17 0:22:00 出处:未知 作者:未知 发布人:vqhjor 已被访问 221
源码如下:

<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>

 

双击自动滚屏 【打印本页】 【关闭窗口

上篇文章:背景音乐代码大全

下篇文章:经典FLASH歌曲

 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

筑神山庄(二站) | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ175076006 联系人:vqhjor

琼icp备09005167