logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

经典表格

 子豪001 2010-09-10
一、彩色虚线表格
 
<style type="text/css">
<!--
.tab1 {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #00CC66;
border-right-color: #0099CC;
border-bottom-color: #FF0000;
border-left-color: #6699FF;
}
-->
</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><iv align="center">格</div></td>
</tr>
</table>
 
二、鼠标指向单元格变色
 
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td onmouseout="this.style.backgroundColor='#99ccff'" onmouseover="this.style.backgroundColor='#FFcccc'">洛阳瑞塔</td>
</tr>
<tr>
<td onmouseout="this.style.backgroundColor='#99ccff'" onmouseover="this.style.backgroundColor='#FFccaa'">橡胶公司</td>
</tr>
</table>
三、立体表格
 
<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>
 
四、表格嵌套
 
1、利用表格的间距来做嵌套
<table width="200" border="1" cellspacing="4" cellpadding="0">
<tr>
<td>洛阳</td>
<td>瑞塔</td>
<td>橡胶</td>
</tr>
</table>
主要是用到间距 cellspacing="4"

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>
五、半透明表格
 
六.表格边框循环发光的JS特效
<html>
<head>
<title>一个很不错的表格边框循环发光的JS特效丨芯晴网页特效丨CsrCode.Cn</title>
</head><BODY>
<script language="javascript">
  var line=new Array();
  var w=35;    
var left=50;
var top=10;
var width=4;
var height=3;
  Bg="red";
  line[0]="ff"+Number(25).toString(16)+Number(25).toString(16);
  line[1]="ff"+Number(50).toString(16)+Number(50).toString(16);
  line[2]="ff"+Number(75).toString(16)+Number(75).toString(16);
  line[3]="ff"+Number(100).toString(16)+Number(100).toString(16);
  line[4]="ff"+Number(125).toString(16)+Number(125).toString(16);
  line[5]="ff"+Number(150).toString(16)+Number(150).toString(16);
  line[6]="ff"+Number(175).toString(16)+Number(175).toString(16);
  line[7]="ff"+Number(200).toString(16)+Number(200).toString(16);
  line[8]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[9]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[10]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[11]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[12]="ff"+Number(200).toString(16)+Number(200).toString(16);
  line[13]="ff"+Number(175).toString(16)+Number(175).toString(16);
  line[14]="ff"+Number(150).toString(16)+Number(150).toString(16);
  line[15]="ff"+Number(125).toString(16)+Number(125).toString(16);
  line[16]="ff"+Number(100).toString(16)+Number(100).toString(16);
  line[17]="ff"+Number(75).toString(16)+Number(75).toString(16);
  line[18]="ff"+Number(50).toString(16)+Number(50).toString(16);
  line[19]="ff"+Number(25).toString(16)+Number(25).toString(16);
  function writes(num)
  {
    var temp;
    var s;
    var tl,tt;
    var tw,th;
    temp=num+1;
    if(num==0)
    {
      tl = left;
      tt = top;
      tw = w*width;
      th = height;
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'><tr>";
      for(r=0;r<w;r++)
      {
        temp=r+w*num;
        s+="<td id=tab"+temp+" bgcolor=red></td>";
      }
      s+="</tr></table>";
    }
    if(num==1)
    {
      tl = left+w*width;
      tt = top;
      tw = height;
      th = w*width;
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'>";
      for(r=0;r<w;r++)
      {
        temp=r+w*num;
        s+="<tr><td id=tab"+temp+" bgcolor=red></td></tr>";
      }
      s+="</table>";
    }
    if(num==2)
    {
      tl = left+height;
      tt = top+w*width;
      tw = w*width;
      th = height;
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'><tr>";
      for(r=w;r>0;r--)
      {
        temp=r-1+w*num;
        s+="<td id=tab"+temp+" bgcolor="+Bg+"></td>";
      }
      s+="</tr></table>";
    }
    if(num==3)
    {
      tl = left;
      tt = top+height;
      tw = height;
      th = w*width;
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'>";
      for(r=w;r>0;r--)
      {
        temp=r-1+w*num;
        s+="<tr><td id=tab"+temp+" bgcolor="+Bg+"></td></tr>";
      }
      s+="</table>";
    }
    return s;
  }
  function count()
  {
    var i;
    var temp;
    var total;
    total = w*4;
    for(i=0; i<line.length; i++)
    {
      temp=pos+i-line.length/2;
      temp=temp<0?(total+temp):temp;
      temp=temp>(total-1)?(temp-total):temp;
      document.all["tab"+temp].style.backgroundColor=line[line.length-i];
    }
    pos=(pos+1)>total?0:(pos+1);
  }
  for(i=0;i<=3;i++)
  {
    document.write(writes(i));
  }
  var pos=0;
  setInterval("count()", 1);
</script>
</body></html>
 七. CSS+JS 隔行换色，且表格行选中变色
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS+JS表格行选中变色并储存的效果代码丨芯晴网页特效丨CsrCode.Cn</title>
<style type="text/css">
<!--
#ejiaA1 {
width: 550px;
border-top: #E3E3E3 1px solid;
border-left: #E3E3E3 1px solid;
}
#ejiaA1 td,#ejiaA1 th {
padding: 5px;border-right: #E3E3E3 1px solid;
border-bottom: #E3E3E3 1px solid;
font-size:12px;
height:16px; line-height:16px;
}
#ejiaA1 tr td span {color: #686868}
#ejiaA1 tr td span.st1 {color: #ff0000}
--></style>
<script language="javascript"><!--
function ejiaA1(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
--></script>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="ejiaA1">
<tr>
<td colspan="4"><span class="st1"><span><a href="http://www.CsrCode.cn/" target="_blank">芯晴网页特效</a></span>　　当前页：<span>第1页 共2页 </span>　　总次数：<span>66</span>　　总时长：<span>284小时36分27秒</span></span></td>
</tr>
<tr>
<th>接入方式</th><th>上网时间</th><th>下网时间</th><th>上网时长</th>
</tr>
<tr>
<td>ASP</td>
<td>2008-4-23　12:40:18</td>
<td>2008-4-23　14:50:28</td>
<td>2小时10分10秒</td>
</tr>
<tr>
<td>PHP</td>
<td>2008-4-23　12:40:18</td>
<td>2008-4-23　14:50:28</td>
<td>2小时10分10秒</td>
</tr>
<tr>
<td>JSP</td>
<td>2008-4-23　12:40:18</td>
<td>2008-4-23　14:50:28</td>
<td>2小时10分10秒</td>
</tr>
</table>
<script language="javascript"><!--
//ejiaA1("名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
ejiaA1("ejiaA1","#fff","#F5F5F5","#FFFFCC","#DDDDDD");
--></script>
</body>
</html>
 

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 子豪001 > 《我的图书馆》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多