HTML园地·HTML 表格特效 -- 追寻梦想＞编程乐园

今天在蓝色理想网站看到这篇文件，非常好，希望同学们看后有收获。

【两种细线表格做法】

<table width="500px" border="1px" bordercolor="#000000"> <tr bordercolor="#FFFFFF"> <td>表格边线为1，线色为黑，行线色为白。</td> </tr> </table> <p> <table width="500px" border="0" cellspacing="1" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF">表格边线为0，间距为1，背景色为黑，行背景色为白。</td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【立体表格】

<table border=1 cellspacing=0 width=500 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
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【表格的边框不断在闪】

<table border="0" width="280px" id="myexample" style="border:1px solid red"> <tr> <td>cnbruce cnbruce cnbruce cnbruce cnbruce cnbruce</td> </tr> </table> <script language="JavaScript1.2">  </script>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【不用嵌套制作同一行放两个表格】

<table border=1 align=left> <tr> <td>Left</td> </tr> </table> <table border=1 align="right"> <tr> <td>right</td> </tr> </table> <br><br> <table border=1 align=left> <tr> <td>左</td> </tr> </table> <table border=1 align="center"> <tr> <td>中</td> </tr> </table> <br><br><br> <table border="1px" align="left" width="50%" height="100px"> <tr> <td>LLL</td> </tr> </table> <table border="1px" align="right" width="50%"> <tr> <td>RRR</td> </tr> </table> <br><br><br><br><br><br> <table border=1 align=left> <tr> <td>LL</td> </tr> </table> <table border=1> <tr> <td>未指定</td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【另类圆角表格制作】

原图： <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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【虚线边框表格】

<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;">
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【分类型表格】

<fieldset> <legend>item</legend> content </fieldset>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

<style> a:link{} a:visited{} a:hover { background-color:#FFFF00;color:red } td { background-color:#aaFFEE } </style> <TABLE width=600 align=center cellspacing=1 > <TR> <TD><a href="#">CNBruce <TD><a href="#">.com <TR> <TD><a href="#">CNBruce <TD><a href="#">.com
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【变色的单元格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=600 align=center > <tr> <td onmouseover="this.className='aa'" onmouseout="this.className='bb'" class="bb"><center><b>cnbruce</td> </tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

<table width="100%" border="1px" cellpadding="3px" 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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【透明表格】

<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0> <tr><td><center>cnbruce</td></tr> </table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【表格边框显示外阴影】

<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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【限制表格的大小】。
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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【根据单元格内容加亮】

<table border="1px" cellspacing="0" width="400px" cellpadding="0" id="table1"> <tr> <td width="80px">12</td> <td width="80px">34</td> <td width="80px">56</td> <td width="80px">78</td> <td width="80px">90</td> </tr> <tr> <td width="80px">abc</td> <td width="80px">def</td> <td width="80px">ghj</td> <td width="80px">lop</td> <td width="80px">dry</td> </tr> <tr> <td width="80px">!@#</td> <td width="80px">_(*</td> <td width="80px">#$%</td> <td width="80px">^$#</td> <td width="80px">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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【VML做圆脚表格】

运行代码框
<html xmlns:v> <style> v\:* </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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

运行代码框
<html xmlns:v> <style> v\:* </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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

运行代码框
<html xmlns:v> <style> v\:* </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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]