用Hotmail的时候注意下,就是这个效果,代码如下:
<style type="text/css">
<!--
.row {BACKGROUND-COLOR: expression(rowIndex%2==1?'':'#F5F5F5')}
Body {FONT-SIZE: 12px; FONT-FAMILY: Arial,Verdana,sans-serif;LINE-HEIGHT: 150%;}
Td {FONT-SIZE: 12px; FONT-FAMILY: Arial,Verdana,sans-serif;LINE-HEIGHT: 150%;}
.tb {border-collapse: collapse}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
//复选
function selectAll(chk)
{
var chk = document.form1.chkAll.checked;
for (i=0;i<document.all.length;i++) {
if (document.all[i].name=="id[]") {
document.all[i].checked=chk;
chkRow(document.all[i]);
}}}
//复选后单元格变色
function chkRow(obj){
var r = obj.parentElement.parentElement;
if(obj.checked){ r.style.backgroundColor="#E6E9F2";}
else {if(r.rowIndex%2==1)r.style.backgroundColor="";else r.style.backgroundColor="#F5F5F5";}
}
</script>
<table width="50%" border="1" cellpadding="3" cellspacing="0" bordercolor="#333333" class="tb">
<form name="form1" method="post" action="">
<tr class="row">
<td width="5%"> </td>
<td width="33%" align="center"><strong>论坛名称</strong></td>
<td width="62%" align="center"><strong>网 址</strong></td>
</tr>
<tr class="row">
<td align="center"><input type="checkbox" name="id[]" value="1" οnclick="javascript:chkRow(this);"></td>
<td align="center">织梦乱弹</td>
<td align="center"><a href="http://www.it365cn.com/bbs" target="_blank">http://www.it365cn.com/bbs</a></td>
</tr>
<tr class="row">
<td align="center"><input type="checkbox" name="id[]" value="1" οnclick="javascript:chkRow(this);"></td>
<td align="center">经典论坛</td>
<td align="center"><a href="http://www.blueidea.com/bbs" target="_blank">http://www.blueidea.com/bbs</a></td>
</tr>
<tr class="row">
<td align="center"><input type="checkbox" name="id[]" value="1" οnclick="javascript:chkRow(this);"></td>
<td align="center">点燃灵感</td>
<td align="center"><a href="http://www.fwcn.com/bbs" target="_blank">http://www.fwcn.com/bbs</a></td>
</tr>
<tr class="row">
<td colspan="3"><input type="checkbox" name="chkAll" title="全选/取消" οnclick="selectAll()"> <strong>全选/取消</strong></td>
</tr>
</form>
</table>
其中,关于点击行,行颜色改变,这里还有个例子,代码如下:
<style type="text/css">
<!--
Td {FONT-SIZE: 12px; FONT-FAMILY: Arial,Verdana,sans-serif;LINE-HEIGHT: 150%;}
-->
</style>
<script>
function bgChange(obj){
obj.bgColor=obj.bgColor==""?"#ffffff":"";
}
</script>
<table width="100%" border="0" cellspacing="1" bgcolor=#66ccee>
<tr οnclick="bgChange(this)" bgcolor=#ffffff>
<td>http://www.cnbruce.com</td>
</tr>
<tr οnclick="bgChange(this)" bgcolor=#ffffff>
<td>http://www.cnbruce.com</td>
</tr>
<tr οnclick="bgChange(this)" bgcolor=#ffffff>
<td>http://www.cnbruce.com</td>
</tr>
</table>
立体表格,代码如下:
<table border=1 cellspacing=0 width=100% bordercolorlight=#333333 bordercolordark=#efefef>
<tr bgcolor=#cccccc>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</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
三种细线表格做法 代码如下:
<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>
<table style="border-collapse:collapse;" border="1">
<tr>
<td bgcolor="#FFFFFF">style="border-collapse:collapse;" </td>
</tr>
</table>
表格的边框不断在闪 代码如下:
<table border="0" width="280" id="myexample" style="border:1px solid red">
<tr>
<td>cnbruce cnbruce cnbruce cnbruce cnbruce cnbruce</td>
</tr>
</table>
<script language="JavaScript1.2">
<!--
function flashit(){
if (!document.all)
return
if (myexample.style.borderColor=="blue")
myexample.style.borderColor="red"
else
myexample.style.borderColor="blue"
}
setInterval("flashit()", 500)
//-->
</script>
不用嵌套制作同一行放两个表格:
<table border=1 align=left>
<tr>
<td>-1</td>
</tr>
</table>
<table border=1 align="right">
<tr>
<td>1</td>
</tr>
</table>
<br><br><br>
<table border=1 align=left>
<tr>
<td>-1</td>
</tr>
</table>
<table border=1 align="center">
<tr>
<td>1</td>
</tr>
</table>
<br><br><br>
<table border="1" align="left" width="50%" height="100px">
<tr>
<td>hhh</td>
</tr>
</table>
<table border="1" align="right" width="50%">
<tr>
<td>nnn</td>
</tr>
</table>
<br><br><br><br><br><br>
<table border=1 align=left>
<tr>
<td>-1</td>
</tr>
</table>
<table border=1>
<td>1</td>
</tr>
</table>
另类圆角表格制作
原图:
<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>
虚线边框表格:
<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.cnbruce.com</td>
</tr>
</table>
<p>
虚线直线1
<hr size=1 style="border:1px dotted #001403;">
虚线直线2
<p size=1 style="border:1px dotted #001403;">
分类型表格:
<fieldset>
<legend>item</legend>
content
</fieldset>
变色的单元格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="#">CNBruce
<TD><a href="#">.com
<TR>
<TD><a href="#">CNBruce
<TD><a href="#">.com
变色的单元格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 οnmοuseοver="this.className='aa'" οnmοuseοut="this.className='bb'" class="bb"><center><b>cnbruce</td>
</tr>
</table>
变色的单元格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">cnbruce</div></td>
</tr>
<tr>
<td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">cnbruce</td>
</tr>
</table>
透明表格
<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0>
<tr><td><center>cnbruce</td></tr>
</table>
表格边框显示外阴影
<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>
限制表格的大小。
style="table-layout:fixed;word-break:break-all"
无论大图还是文字,一律限制。
<table align=center width=200 height=100 bgcolor=#f3f3f3 style="filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5)" style="table-layout:fixed;word-break:break-all" >
<tr>
<td><center><img src="http://www.cnbruce.com/images/cnrose/mi.jpg"></td>
</tr>
<tr>
<td>
cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce
</td></tr>
</table>
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="cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce" />
<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>
表格行换色
a,效果达到了,但应用不大。
<table width=500>
<script>
for(i=0;i<10;i++){
i%2==1?document.write('<tr><td align=center bgcolor=#cccccc>'+i+'</td></tr>'):document.write('<tr><td align=center bgcolor=#efefef>'+i+'</td></tr>');
}
</script>
</table>
b,利用脚本来控制
<SCRIPT LANGUAGE="JavaScript">
window.onload = function() {
doubleBgColor(document.getElementById("table1"),"#cecece","#ececec")
}
function doubleBgColor(Table,Bg1,Bg2) {
for (var i=0;i<Table.rows.length;i++) Table.rows[i].bgColor=i%2?Bg2:Bg1;
}
</SCRIPT>
<TABLE border=0 cellpadding=1 cellspacing=1 id="table1" width="500">
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
</TABLE>
c,表格和控制分开,只需要指定表格 id 即可
<script defer>
for(i=0;i<oTable.rows.length;i++){
if(i%2==0){
oTable.rows[i].bgColor="#cccccc";
}else{
oTable.rows[i].bgColor="#efefef";
}
}
</script>
<table width=100 height=100 ID="oTable">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
d,做成了样式表
<style>
#oTable tr {alternateColor:expression(bgColor=rowIndex%2==0?'#cccccc':'#efefef')}
</style>
<table width=500 height=100 border=1 ID="oTable">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
根据单元格内容加亮
<table border="1" cellspacing="0" width="400" cellpadding="0" id="table1">
<tr>
<td width="80">12</td>
<td width="80">34</td>
<td width="80">56</td>
<td width="80">78</td>
<td width="80">90</td>
</tr>
<tr>
<td width="80">abc</td>
<td width="80">def</td>
<td width="80">ghj</td>
<td width="80">lop</td>
<td width="80">dry</td>
</tr>
<tr>
<td width="80">!@#</td>
<td width="80">_(*</td>
<td width="80">#$%</td>
<td width="80">^$#</td>
<td width="80">WWW</td>
</tr>
</table>
<SCRIPT>
var ids;
var idstext;
function hightlight_td(){
var text=txt.value;
TDs=document.all.table1.all.tags("TD")
//使用iframe时:
//TDs=iframe的name.document.all.table1.all.tags("TD")
if (text!="")
{
for (var i = 0; i < TDs.length; i++)
{
obj=TDs[i];
idstext=obj.innerText;
idnum=idstext.indexOf(text);
if (idnum!=-1)
{
obj.style.background="red";
}
else
{
obj.style.background="#FFFFFF";
}
}
}
else
{
alert("没有输入");
}
}
</SCRIPT>
<p align="center"><input type="text" name="txt" value=""><input type="button" value="请输入要查的字符串." onClick="hightlight_td();"></p>
单击表格换色
<script>
function bgChange(obj){
obj.bgColor=obj.bgColor==""?"#0099ff":"";
}
</script>
<table width="80%" border="1">
<tr οnclick="bgChange(this)"><td>a</td><td>a</td></tr>
<tr οnclick="bgChange(this)"><td>a</td><td>a</td></tr>
<tr οnclick="bgChange(this)"><td>a</td><td>a</td></tr>
</table>
转自: http://www.cnbruce.com/blog/showlog.asp?cat_id=5&log_id=267