注册
登录
标签
在线时间兑换积分
帮助
精品酷站论坛
»
JS,UI框架开发
» 表格整理。。。
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
表格整理。。。
junstudio
管理员
个人空间
发短消息
加为好友
当前离线
1
#
大
中
小
发表于 2007-6-18 16:38
只看该作者
表格整理。。。
三种细线表格做法
<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> <table style="border-collapse:collapse;" border="1"> <tr> <td bgcolor="#FFFFFF">style="border-collapse:collapse;" </td> </tr> </table>
提示：您可以先修改部分代码再运行
立体表格
<table border=1 cellspacing=0 width=100% bordercolorlight=#333333 bordercolordark=#efefef> <tr bgcolor=#cccccc> <td>pickbar</td> <td>pickbar</td> <td>pickbar</td> <td>pickbar</td> </tr> <tr bgcolor=#cccccc> <td>pickbar</td> <td>pickbar</td> <td>pickbar</td> <td>pickbar</td> </tr> </table> <center>表格边线为1，间隔为0，左上为#333333，右下为#efefef,行背景色为#cccccc
提示：您可以先修改部分代码再运行
表格的边框不断在闪
<table border="0" width="280" id="myexample" style="border:1px solid red"> <tr> <td>pickbar pickbar pickbar pickbar pickbar pickbar</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>
提示：您可以先修改部分代码再运行
不用嵌套制作同一行放两个表格
<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>
提示：您可以先修改部分代码再运行
另类圆角表格制作
原图： <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>
提示：您可以先修改部分代码再运行
虚线边框表格
<style type="text/<span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>"> .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.pickbar.com</td> </tr> </table> <p> 虚线直线1 <hr size=1 style="border:1px dotted #001403;"> 虚线直线2 <p size=1 style="border:1px dotted #001403;">
提示：您可以先修改部分代码再运行
分类型表格
<fieldset> <legend>item</legend> content </fieldset>
提示：您可以先修改部分代码再运行
变色的单元格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="#">pickbar <TD><a href="#">.com <TR> <TD><a href="#">pickbar <TD><a href="#">.com
提示：您可以先修改部分代码再运行
变色的单元格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>pickbar</td> </tr> </table>
提示：您可以先修改部分代码再运行
变色的单元格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">pickbar</div></td> </tr> <tr> <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">pickbar</td> </tr> </table>
提示：您可以先修改部分代码再运行
透明表格
<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0> <tr><td><center>pickbar</td></tr> </table>
提示：您可以先修改部分代码再运行
表格边框显示外阴影
<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.pickbar.com</td> </tr> </table>
提示：您可以先修改部分代码再运行
限制表格的大小。
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="http://www.pickbar.com/images/cnrose/mi.jpg"></td> </tr> <tr> <td> pickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbar </td></tr> </table>
提示：您可以先修改部分代码再运行
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>
提示：您可以先修改部分代码再运行
<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="pickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbarpickbar" /> <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>
提示：您可以先修改部分代码再运行
<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>
提示：您可以先修改部分代码再运行
表格行换色
a，效果达到了，但应用不大。
<table width=500> <script> for(i=0;i<10;i++){ i%2==1?document.write('<tr><td align=center bgcolor=#cccccc>'+i+'</td></tr>'):document.write('<tr><td align=center bgcolor=#efefef>'+i+'</td></tr>'); } </script> </table>
提示：您可以先修改部分代码再运行
b,利用脚本来控制
<SCRIPT LANGUAGE="JavaScript"> window.onload = function() { doubleBgColor(document.getElementById("table1"),"#cecece","#ececec") } function doubleBgColor(Table,Bg1,Bg2) { for (var i=0;i<Table.rows.length;i++) Table.rows[i].bgColor=i%2?Bg2:Bg1; } </SCRIPT> <TABLE border=0 cellpadding=1 cellspacing=1 id="table1" width="500"> <TR><TD> </TD></TR> <TR><TD> </TD></TR> <TR><TD> </TD></TR> <TR><TD> </TD></TR> <TR><TD> </TD></TR> <TR><TD> </TD></TR> <TR><TD> </TD></TR> <TR><TD> </TD></TR> <TR><TD> </TD></TR> <TR><TD> </TD></TR> <TR><TD> </TD></TR> <TR><TD> </TD></TR> </TABLE>
提示：您可以先修改部分代码再运行
c，表格和控制分开，只需要指定表格 id 即可
<script defer> for(i=0;i<oTable.rows.length;i++){ if(i%2==0){ oTable.rows[i].bgColor="#cccccc"; }else{ oTable.rows[i].bgColor="#efefef"; } } </script> <table width=100 height=100 ID="oTable"> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table>
提示：您可以先修改部分代码再运行
d，做成了样式表
<style> #oTable tr {alternateColor:expression(bgColor=rowIndex%2==0?'#cccccc':'#efefef')} </style> <table width=500 height=100 border=1 ID="oTable"> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table>
提示：您可以先修改部分代码再运行
根据单元格内容加亮
<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("没有<span href="tag.php?name=%E8%BE%93%E5%85%A5" onclick="tagshow(event)" class="t_tag">输入</span>"); } } </SCRIPT> <p align="center"><input type="text" name="txt" value=""><input type="button" value="请<span href="tag.php?name=%E8%BE%93%E5%85%A5" onclick="tagshow(event)" class="t_tag">输入</span>要查的字符串." onClick="hightlight_td();"></p>
提示：您可以先修改部分代码再运行
单击表格换色
<script> function bgChange(obj){ obj.bgColor=obj.bgColor==""?"#0099ff":""; } </script> <table width="80%" border="1"> <tr onclick="bgChange(this)"><td>a</td><td>a</td></tr> <tr onclick="bgChange(this)"><td>a</td><td>a</td></tr> <tr onclick="bgChange(this)"><td>a</td><td>a</td></tr> </table>
提示：您可以先修改部分代码再运行
UID
27
帖子
861
精华
17
积分
3719
阅读权限
200
在线时间
233 小时
注册时间
2007-5-29
最后登录
2008-10-14
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
设计人
插画
网页设计
摄影图片
平面设计
设计师加油
站务区
站务管理
娱乐其他
智力游戏
投资理财
娱乐时尚
IT风向标
社会新闻
灌水专区
娱乐八卦
资源共享区
酷站资源
提交酷站
PS笔刷/样式/滤镜&插件
开源软件
免费资源区
实用软件/手册
代码交流区
WEB2.0 / AJAX
ASP,PHP,JSP...
JS,UI框架开发
JQuery
mootools
ProtoType
DHTML eXtensions
CSS代码交流
控制面板首页
编辑个人资料
积分记录
公众用户组
个人空间管理
基本概况
版块排行
主题排行
发帖排行
积分排行
交易排行
在线时间
管理团队
393张高清晰web2.0站点截图
425款精品毛笔墨迹+38款墨迹底纹..
10位Master级别的Photoshop高手
绝对漂亮的笔刷
Soul 近期新作品欣赏..
熟女养成日志—长草
魔幻抽象/吸血鬼传说！！
photoshop仿CG滤镜
新手必看：积分、资源币、人民币、用户级别、发贴教程
设计QQ群:31195683
