HTML 表格特效整理

两种细线表格做法<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> [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"><!-- function flashit(){ if (!document.all) return if (myexample.style.bordercolor=="blue") myexample.style.bordercolor="red" else myexample.style.bordercolor="blue" } setinterval("flashit()", 500) //--> </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> <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> [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{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 [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><b>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="/article/uploadpic/200671913479341.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();"></p> [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 十足采用 提醒：你可先窜改局部代码，再按运转] 结果，还请关心另篇《表格边框恶魔教程》（根源：蓝色理念）