一、彩色虛線(xiàn)表格
<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">線(xiàn)</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'">洛陽(yáng)瑞塔</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、利用表格的間距來(lái)做嵌套
<table width="200" border="1" cellspacing="4" cellpadding="0">
<tr>
<td>洛陽(yáng)</td>
<td>瑞塔</td>
<td>橡膠</td>
</tr>
</table>
主要是用到間距 cellspacing="4"
2、充分利用根據表格對齊的方式
這里主要是將第一個(gè)表格居左，第二個(gè)表格居右，第三個(gè)表格居中。這樣當你隨意調整里面三個(gè)表格大小的時(shí)候，他們的間距將保持不變，非常方便。
<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>洛陽(yáng)</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>
五、半透明表格
六.表格邊框循環(huán)發(fā)光的JS特效
<html>
<head>
<title>一個(gè)很不錯的表格邊框循環(huán)發(fā)光的JS特效丨芯晴網(wǎng)頁(yè)特效丨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 隔行換色，且表格行選中變色
#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>
--></script>
</body>
</html>
