HTML 表格特效整理_[Html教程]_Programming skills(编程技巧)

Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/3/30 5:18:07
HTML 表格特效整理_[Html教程]

HTML 表格特效整理_[Html教程]

两种细线表格做法

表格边线为1，线色为黑，行线色为白。 <p> 表格边线为0，间距为1，背景色为黑，行背景色为白。
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

立体表格

cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce<center>表格边线为1，间隔为0，左上为#333333，右下为#efefef,行背景色为#cccccc
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

表格的边框不断在闪

cnbruce cnbruce cnbruce cnbruce cnbruce cnbruce <script language="javascript1.2"> </script>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

-11 <br/> <br/> <br/>-11 <br/> <br/> <br/>hhhnnn <br/> <br/> <br/> <br/> <br/> <br/>-11
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

另类圆角表格制作

原图： <p>放大
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

虚线边框表格

<center>www.cnbruce.com <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> <a href="#">CNBruce <a href="#">.com <a href="#">CNBruce <a href="#">.com
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

变色的单元格2，已经做成了CSS，注意还有透明效果。

<center><b>cnbruce
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

<div align="left">cnbruce</div> cnbruce
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

透明表格

<center>cnbruce
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

表格边框显示外阴影

<center>www.cnbruce.com
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

限制表格的大小。
style="table-layout:fixed;word-break:break-all"
无论大图还是文字，一律限制。

<center><img src="http://127.0.0.1/Files/BeyondPic/2006-6/13/0661313162295549.jpg"> cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

根据单元格内容加亮

12 34 56 78 90 abc def ghj lop dry !@# _(* #$% ^$# WWW <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 全部选择提示：你可先修改部分代码，再按运行]

最后，还请关注蓝色理想的另篇《表格边框魔鬼教程》

http://www.blueidea.com/tech/web/2003/302.asp

If you have any requirements, please contact webmaster。(如果有什么要求，请联系站长)

QQ:154298438
QQ:417480759