1. 两种细线表格做法
源码如下：
<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>
2. 立体表格
源码如下：
<table border=1 cellspacing=0 width=100% bordercolorlight=#333333 bordercolordark=#efefef>
<tr bgcolor=#cccccc>
<td>it365cn</td>
<td>it365cn</td>
<td>it365cn</td>
<td>it365cn</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
3. 另类圆角表格制作
源码如下：
原图：
<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>
4. 虚线边框表格
源码如下：
<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.blueidea.com</td>
</tr>
</table>
<p>
虚线直线1
<hr size=1 style=border:1px dotted #001403;>
虚线直线2
<p size=1 style=border:1px dotted #001403;>
5. 分类型表格
源码如下：
<fieldset>
<legend>item</legend>
content
</fieldset>
6. 变色的单元格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=#>Blueidea
<TD><a href=#>.com
<TR>
<TD><a href=#>CNBruce
<TD><a href=#>.com
</TABLE>
7. 变色的单元格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>cnbruce</td>
</tr>
</table>
8. 变色的单元格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>
Blueidea</div></td>
</tr>
<tr>
<td
onMouseOut=this.bgColor='#efefef';this.borderColor='#efefef'; onMouseOver=this.bgColor='#cccccc'; this.borderColor='#000033'>
cnbruce</td>
</tr>
</table>
9. 透明表格
<table bgcolor=#ececec style=filter:alpha(opacity=50) width=200 height=100 border=0>
<tr><td><center>cnbruce</td></tr>
</table>
10. 表格边框显示外阴影
源码如下：
<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.cnbruce.com</td>
</tr>
</table>
11. VML代码实现的圆角表格
(1).
源码如下：
<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>
(2).
源码如下：
<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=cnbrucecnbrucecnbrucecnbrucecnbruc
ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce />
<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>
(3).
源码如下：
<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>
|
