您的位置：首页 → 网页设计 → HTML/CSS  → 表格特效代码全集中

表格特效代码全集中

时间：2004/11/7 2:43:00来源：本站整理作者：蓝点我要评论(0)

　　1. 两种细线表格做法

　　源码如下：

 
   
 

表格边线为1，线色为黑，行线色为白。

 
   
 

表格边线为0，间距为1，背景色为黑，行背景色为白。

　　2. 立体表格

　　源码如下：


 
    it365cn
    it365cn
    it365cn
    it365cn
 
 
    cnbruce
    cnbruce
    cnbruce
    cnbruce
 

表格边线为1，间隔为0，左上为#333333，右下为#efefef,行背景色为#cccccc

　　3. 另类圆角表格制作

　　源码如下：

原图：

 
   
   
   
   
   
   
   
   
   
 
 
   
   
   
 
 
   
   
   
 
 
   
   
   
 

放大

 
   
   
   
   
   
   
   
   
   
 
 
   
   
   
 
 
   
   
   
 
 
   
   
   
 

4. 虚线边框表格


　　源码如下：



 
   
 

www.blueidea.com

虚线直线1

---

虚线直线2

5. 分类型表格

　　源码如下：

item

content

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

　　源码如下：

 
   
   

Blueidea	.com
CNBruce	.com

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

　　源码如下：

 
    class="bb">

cnbruce
  



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

　　源码如下：

bordercolor="#efefef" bgcolor="#efefef">
 
   
 
 
   
 

onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"> Blueidea

onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"> cnbruce

9. 透明表格


 

cnbruce

10. 表格边框显示外阴影

　　源码如下：

style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
 
   

www.cnbruce.com
 

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

　　源码如下：




  
   
    VML
   



(2).

　　源码如下：




     

     
       
        VML
         



(3).

　　源码如下：




  
   
    VML