统计在线人数...

HTML 表格特效整理

[ 来源:ASP教程 | 作者:Admin | 时间:2004-6-17 9:58:43 | 浏览:统计中... ]


两种细线表格做法

<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>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]立体表格

<table border=1 cellspacing=0 width=100% bordercolorlight=#333333 bordercolordark=#efefef><tr bgcolor=#cccccc><td>cnbruce</td><td>cnbruce</td><td>cnbruce</td><td>cnbruce</td></tr><tr bgcolor=#cccccc><td>cnbruce</td><td>cnbruce</td><td>cnbruce</td><td>cnbruce</td></tr></table><center>表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccccc
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]表格的边框不断在闪

<table border="0" width="280" id="myexample" style="border:1px solid red"> <tr> <td>cnbruce cnbruce cnbruce cnbruce cnbruce cnbruce</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>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]不用嵌套制作同一行放两个表格<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>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]另类圆角表格制作

原图:<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>
[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><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="tb"><center>www.cnbruce.com</td> </tr></table><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><TABLE width=100% cellspacing=1 bgcolor=black ><TR><TD><a href="#">CNBruce<TD><a href="#">.com<TR><TD><a href="#">CNBruce<TD><a href="#">.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><table width="100%"> <tr> <td class="bb"><center><b>cnbruce</td> </tr></table>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]变色的单元格3,通过mouse事件

[1] [2]  下一页

共有0人参与评价,平均得分:0分
评论内容只代表网友观点,与本站立场无关! 查看完整内容
   

当前在线人数
QQ:748838 MSN:allen_xia#msn.com E-mail:allenxia666#126.com QQ群:28200145