一、彩色虚线表格
<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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/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>