位置：首页>> 网络编程>> JavaScript>> 表格艺术经典回顾

表格艺术经典回顾

作者：marvellous　　发布时间：2013-07-14 11:11:04　

标签：

本文旨在挖掘表格在艺术创意方面的一些功能效果。

运行代码框
<script language="JavaScript"></script><style>td{border:0;align:center;vertical-align:middle;}</style><body bgcolor="#000000"><br><br><center><table style="width:456;height:111;border:10px groove red;" border="1" cellspacing="22" id="myexample" ><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=blue,endColorStr=skyblue);"> </td><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=lime,endColorStr=orange);"> </td><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=cyan,endColorStr=brown);"> </td></tr></table><table style="width:456;height:400;"><tr><td style="width:228;height:400;"><table border="0" cellspacing="22" style="width:228;height:400;table-layout:fixed;"><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=blue,endColorStr=skyblue);width:50％;"> </td><td rowspan="4" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=cyan,endColorStr=brown);width:50％;"><font face="华文行楷" size="56" color="blue"><a href="#">原</a></font></td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=lime,endColorStr=orange);"> </td><td> </td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=gray,endColorStr=yellow);"> </td><td> </td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=green,endColorStr=pink);"> </td><td> </td></tr></table></td><td style="width:228;height:400;"><table border="0" cellspacing="22" style="width:228;height:400;filter:fliph;"><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=blue,endColorStr=skyblue);width:50％;"> </td><td rowspan="4" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=cyan,endColorStr=brown);width:50％;"><font face="华文行楷" size="56" color="purple">原</font></td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=lime,endColorStr=orange);"> </td><td> </td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=gray,endColorStr=yellow);"> </td><td> </td></tr><tr><td style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=green,endColorStr=pink);"> </td><td> </td></tr></table></td></tr></table></td></tr></table><script language="JavaScript1.2"></script>
[Ctrl+A 全部选择提示：你可先修改部分代码，再运行]

运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-htm.../loose.dtd"> <HTML><HEAD><TITLE>Rounded Box Demo</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE type=text/css>BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 16px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Georgia; BACKGROUND-COLOR: #fff}DIV.rounded-box { MARGIN: 3px; WIDTH: 9em; POSITION: relative; BACKGROUND-COLOR: #e6e6e6; filter:Alpha(Opacity=50);}DIV.top-left-corner { OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff}DIV.bottom-left-corner { OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff}DIV.top-right-corner { OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff}DIV.bottom-right-corner { OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff}DIV.top-left-inside { FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative}DIV.bottom-left-inside { FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative}DIV.top-right-inside { FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative}DIV.bottom-right-inside { FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative}DIV.top-left-corner { LEFT: 0px; TOP: 0px}DIV.bottom-left-corner { LEFT: 0px; BOTTOM: 0px}DIV.top-right-corner { RIGHT: 0px; TOP: 0px}DIV.bottom-right-corner { RIGHT: 0px; BOTTOM: 0px}DIV.top-left-inside { LEFT: -8px}DIV.bottom-left-inside { LEFT: -8px; TOP: -17px}DIV.top-right-inside { LEFT: -25px}DIV.bottom-right-inside { LEFT: -25px; TOP: -17px}DIV.box-contents { PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; COLOR: #000; PADDING-TOP: 8px; POSITION: relative}</STYLE><META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD><BODY><DIV class=rounded-box><DIV class=top-left-corner><DIV class=top-left-inside>•</DIV></DIV><DIV class=bottom-left-corner><DIV class=bottom-left-inside>•</DIV></DIV><DIV class=top-right-corner><DIV class=top-right-inside>•</DIV></DIV><DIV class=bottom-right-corner><DIV class=bottom-right-inside>•</DIV></DIV><DIV class=box-contents><center><table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="1" rowspan="2"></td> <td width="1" height="1"></td> <td height="1" bgcolor="#cccccc"></td> <td width="1"></td> <td width="1" rowspan="2"></td> </tr> <tr> <td width="1" height="1" bgcolor="#cccccc"></td> <td height="1"></td> <td width="1" bgcolor="#cccccc"></td> </tr> <tr> <td width="1" bgcolor="#cccccc"></td> <td width="1" height="1"></td> <td width="120 height="0"><marquee direction="right" scrollamount="10"><table style="font-size:1px;width:50px;height:10px;"><tr><td bgcolor="#e5fee5"></td><td bgcolor="#caf7ca"></td><td bgcolor="#8feb90"></td></tr></table></marquee></td> <td width="1" height="1"></td> <td width="1" bgcolor="#cccccc"></td> </tr> <tr> <td rowspan="2"></td> <td height="1" bgcolor="#cccccc"></td> <td height="1"></td> <td bgcolor="#cccccc"></td> <td rowspan="2"></td> </tr> <tr> <td height="1"></td> <td height="1" bgcolor="#cccccc"></td> <td></td> </tr></table></DIV></DIV><br><br><style>td{color:red;font-family:华文行楷;font-size:14px;}</style><center><TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97" BGCOLOR=#FFCC33 cellspacing="10" cellpadding="10" style=" FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=yellow,endColorStr=green);"><TR><TD>良</TD><TD>天</TD></TR><TR><TD>心</TD><TD>地</TD></TR></TABLE><br><br><TABLE WIDTH="100" BORDER="0" HEIGHT="100" CELLPADDING="0" CELLSPACING="0"><TR><TD> </TD><TD style="BORDER-BOTTOM: #000000 0px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid"> </TD><TD> </TD></TR><TR><TD style="BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 0px solid; BORDER-TOP: #000000 1px solid"> </TD><TD> </TD><TD style="BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 0px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid"> </TD></TR><TR><TD> </TD><TD style="BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 0px solid"> </TD><TD> </TD></TR></TABLE></BODY></HTML>
[Ctrl+A 全部选择提示：你可先修改部分代码，再运行]

运行代码框
<style>body{background:#000000;}H3{ text-align: left; font-size: 12px; color: brown; float: left; margin-left: 2px; margin-top: 3px;font-family: "隶书";letter-spacing:3px;}p { line-height: 22px; color: yellow; font-size: 12px; text-indent: 2em; margin-top: 10px; margin-right: 10px; margin-left: 10px; font-family: "华文行楷";}</style><center><table><tr><td><table style="width:240;height:360;" cellspacing="0" cellpadding="0"><tr><td style="width:240;height:10％;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=pink);"><h3>让我内心的男主角放出光芒</h3></td></tr><tr><td style="width:240;height:90％;background-color:darkblue;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue);"><p>偶就是做手机短信的，但不是这种诈骗的行为。这样的短信随手删除就ok了。我觉得这样的短信还不算可气的。可气的是，对方给你拨电话响一声挂了。自己以为是什么重要的业务电话。随手回过去，结果是莫名其妙的：“欢迎致电台湾**公司。。。”一个*声*气的女的。立马挂断，心里面还扑通扑通，这个声讯电话扣我多少钱啊？</p></td></tr></table></td><td><table style="width:240;height:360;" cellspacing="0" cellpadding="0"><tr><td style="width:240;height:10％;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=orange,endColorStr=white);"><style></style><script language="JavaScript1.2">function glowit(which){if (document.all.glowtext[which].filters[0].strength==2)document.all.glowtext[which].filters[0].strength=1elsedocument.all.glowtext[which].filters[0].strength=2}function glowit2(which){if (document.all.glowtext.filters[0].strength==2)document.all.glowtext.filters[0].strength=1elsedocument.all.glowtext.filters[0].strength=2}function startglowing(){if (document.all.glowtext&&glowtext.length){for (i=0;i<glowtext.length;i++)eval('setInterval("glowit('+i+')",150)')}else if (glowtext)setInterval("glowit2(0)",150)}if (document.all)window.onload=startglowing</script><center><span id="glowtext"><font color="ffffff" " face="华文行楷" size="4">芙蓉花儿绽放开来粉嘟嘟儿</font></span></td></tr><tr><td style="width:240;height:90％;background-color:darkblue;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=darkblue,endColorStr=skyblue);"><center><a href="#" onFocus="if(this.blur)this.blur()"><img src="https://img.aspxhome.com/file/UploadPic/20071/200713110184605.jpg" onMouseOut=nereidFade(this,100,10,3) onMouseOver=nereidFade(this,20,10,3) style="FILTER: alpha(opacity=100)" border="0" ></a></td></tr></table></td></tr><tr><td><table style="width:240;height:360;" cellspacing="0" cellpadding="0"><tr><td style="width:240;height:10％;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=green);"><h3>让我内心的女主角放出光芒</h3></td></tr><tr><td style="width:240;height:90％;background-color:darkblue;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue);"><p>偶就是做手机短信的，但不是这种诈骗的行为。这样的短信随手删除就ok了。我觉得这样的短信还不算可气的。可气的是，对方给你拨电话响一声挂了。自己以为是什么重要的业务电话。随手回过去，结果是莫名其妙的：“欢迎致电台湾**公司。。。”一个*声*气的女的。立马挂断，心里面还扑通扑通，这个声讯电话扣我多少钱啊？</p></td></tr></table></td><td><table style="width:240;height:360;" cellspacing="0" cellpadding="0"><tr><td style="width:240;height:10％;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=deeppink,endColorStr=white);"><center><span id="glowtext"><font color="ffffff" " face="华文新魏" size="4">妹妹扎起黑漆漆的翘揪揪儿</font></span></td></tr><tr><td style="width:240;height:90％;background-color:darkblue;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=darkblue,endColorStr=skyblue);"><script language="JavaScript"> nereidFadeObjects = new Object();nereidFadeTimers = new Object();function nereidFade(object, destOp, rate, delta){if (!document.all)return if (object != "[object]"){ //do this so I can take a string too setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity > destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); }}</script><center><a href="#" onFocus="if(this.blur)this.blur()"><img src="https://img.aspxhome.com/file/UploadPic/20071/200713110185881.jpg" onMouseOut=nereidFade(this,100,10,3) onMouseOver=nereidFade(this,20,10,3) style="FILTER: alpha(opacity=100)" border="0" ></a></td></tr></table></td></tr></table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再运行]

颜色渐变在表格上的应用:

运行代码框
<style>td{text-align:center;color:white;font-family:华文新魏;font-size:14px;}table{table-layout:fixed;border:1 dashed blue;width:567;height:234;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFF00000,endcolorstr=#FFFFFF00,gradientType=0);}body{filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FF00119d,endcolorstr=#FF000000,gradientType=1);}</style><center><table border="0" cellspacing="20" cellpadding="2"><tr><td style="filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFF00000,endcolorstr=#FFFFFF00,gradientType=1)">金翅擘海</td><td style="filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FF00119f,endcolorstr=#FF09FFFF,gradientType=1)">如果说人生的离合是一场戏，那么百年的缘分更是早有安排…… </td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFFee00,endcolorstr=#FF09FF00,gradientType=1)">冬天的珊瑚想睡觉</td><td style="filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=deeppink,endcolorstr=#FF09FF00,gradientType=1)"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></td></tr></table>
[Ctrl+A 全部选择提示：你可先修改部分代码，再运行]

运行代码框
<p align="center" style="line-height: 20px"> <span id="glowtext" style="color:lime;font-size:14px;font-family:华文行楷;">&&&钻石恒久远,一颗永流传&&&</span><style>body {filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='black',endColorstr='blue');}</style><center><table cellspacing="10" cellpadding="10"><tr><td width="100" height="75" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue');"> </td><td width="100" height="75" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF');"> </td><td width="100" height="75" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF');"> </td><td width="100" height="75" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee');"> </td><td width="100" height="75" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00');"> </td><td width="100" height="75" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd');"> </td><td width="100" height="75" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88');"></td></tr></table><br><br><table frame=void border=1 bordercolor=blue cellpadding=0 cellspacing=0 width=200 style="border-collapse:collapse;table-layout:fixed;"><tr><td>心昭日月</td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td>气壮山河</td></tr></table><br><br><center>╔────────╗<br>│<font color="808080">力拔山河</font><font color="FF0000">㊣</font>│<br>╚────────╝<br><style by tesion>th { background: #CCCCCC;font-family:华文行楷;color:white;filter:progid:DXImageTransform.microsoft.gradient(startColorStr=blue,endColorStr=skyblue);font-size:14px;}td {background: #e8e8e8;font-family:隶书;text-align:center;color:lime;filter:progid:DXImageTransform.microsoft.gradient(startColorStr=skyblue,endColorStr=blue);font-size:14px;}</style><center><table height="222" width="147" cellspacing="0"><tr><th>半根の烟</th></tr><tr><td>古惑狼一</td></tr><tr><th>在线元素</th></tr><tr><td>水中月台</td></tr><tr><th>一叶孤舟</th></tr><tr><td><span id="a"></span><script language="javascript">var str="求莫名堂";var j=0;function blurStr(){out="";for(i=0;i<str.length;i++){ if(i==j)out+="<font FACE='Verdana, Arial, Helvetica, sans-serif' color='red'>"+str.charAt(i)+"</font>"; else out+=str.charAt(i);}a.innerHTML=out;(j==str.length)?j=0:j++;}setInterval("blurStr()",100);</script></td></tr></table><style></style><script language="JavaScript1.2">function glowit(which){if (document.all.glowtext[which].filters[0].strength==4)document.all.glowtext[which].filters[0].strength=1elsedocument.all.glowtext[which].filters[0].strength=4}function glowit2(which){if (document.all.glowtext.filters[0].strength==4)document.all.glowtext.filters[0].strength=1elsedocument.all.glowtext.filters[0].strength=4}function startglowing(){if (document.all.glowtext&&glowtext.length){for (i=0;i<glowtext.length;i++)eval('setInterval("glowit('+i+')",150)')}else if (glowtext)setInterval("glowit2(0)",150)}if (document.all)window.onload=startglowing</script><p align="center" style="line-height: 20px"> <span id="glowtext" style="color:lime;font-size:12px;font-family:华文行楷;">&&&生动的,鲜明的,鲜艳的,大胆的,清晰的,活泼的,逼真的&&&</span>
[Ctrl+A 全部选择提示：你可先修改部分代码，再运行]

投稿

表格艺术经典回顾

猜你喜欢