HTML 表格特效整理 -pc6资讯

您的位置：首页 → 精文荟萃 → 软件资讯 → HTML 表格特效整理

HTML 表格特效整理 时间：2004/10/7 18:32:00来源：本站整理作者：蓝点我要评论(0)

两种细线表格做法

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

立体表格

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

表格的边框不断在闪

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

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

<table　border=1　align=left> <tr> <td>-1</td> </tr> </table> <table　border=1　align="right"> <tr> <td>1</td> </tr> </table>　 <table　border=1　align=left> <tr> <td>-1</td> </tr> </table> <table　border=1　align="center"> <tr> <td>1</td> </tr> </table> <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>　 <table　border=1　align=left> <tr> <td>-1</td> </tr> </table> <table　border=1> <td>1</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> 放大 <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> 虚线直线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 {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="#" rel="nofollow">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="100%"> 　　<tr> 　　　　<td　　onmouseover="this.className='aa'"　onmouseout="this.className='bb'"　class="bb"><center>cnbruce</td> 　　　</tr> </table> 
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

变色的单元格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> 
[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="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();"> 
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

VML做圆脚表格

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

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

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

最后，还请关注另篇《表格边框魔鬼教程》

文章评论

查看所有0条评论>>