表格艺术经典回顾

您现在的位置：圆点视线 >> 教程 >> 网页设计 >> Dreamweaver教程 >> 文章正文

[图文]表格艺术经典回顾

★★★

表格艺术经典回顾

作者：蓝色理想　文章来源：蓝色理想　点击数：　更新时间：2007-9-18 12:31:16　

　页面功能：【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

【字体：小大】

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

运行代码框
<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=1 else document.all.glowtext[which].filters[0].strength=2 } function glowit2(which){ if (document.all.glowtext.filters[0].strength==2) document.all.glowtext.filters[0].strength=1 else document.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="../pics/200648124819808.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="../pics/200648124819731.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=1 else document.all.glowtext[which].filters[0].strength=4 } function glowit2(which){ if (document.all.glowtext.filters[0].strength==4) document.all.glowtext.filters[0].strength=1 else document.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 全部选择提示：你可先修改部分代码，再按运行]

　【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】　文章录入：Rainsion 责任编辑：Rainsion 　【字体：小大】

上一篇文章：模仿IE自动完成功能

下一篇文章： CSS布局中最小高度的妙用