html5_HTML 表格特效整理

2017-08-10 软件评测阅读：

两种细线表格做法

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

立体表格

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

表格的边框不断在闪

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

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

-1 1 　 -1 1 hhh nnn 　 -1 1 
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

另类圆角表格制作

原图： 　　 　　　　 　　　　 　　　　 　　　　 　　　　 　　　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　 放大 　　 　　　　 　　　　 　　　　 　　　　 　　　　 　　　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　 
[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> 　　 　　　　<center>www.cnbruce.com 　　 虚线直线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> CNBruce .com CNBruce .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> 　　 　　　　<center>cnbruce 　　　 
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

 　　　 　　　　cnbruce 　　 　　　 　　　　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://www.cnbruce.com/images/cnrose/mi.jpg"> 　 cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce 
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

根据单元格内容加亮

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

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

html5_HTML 表格特效整理

http://m.hzclsc.cn/ruanjianzixun/1083.html

推荐访问:html格式化 html教程

html5_HTML 表格特效整理

软件评测推荐文章

推荐内容