各种 表格 制作代码表

各种 表格 制作代码表 引用 山间溪流的各种"表格"制作代码表 各种"表格"制作代码表 下面是在网页中制作各种表格的代码，供有兴趣的朋友参考。 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 表格边线为1，线色为黑，行线色为白。 表格边线为0，间距为1，背景色为黑，行背景色为白。 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 it365cnit365cnit365cnit365cn cnbrucecnbrucecnbrucecnbruce 3.圆角表格制作的代码 代码如下: TABLE style="TABLE-LAYOUT:fixed"height=28 cellSpacing=0 cellPadding=0 width="45%"border=0 TBODY TR height=3 width="100%" TD TABLE style="TABLE-LAYOUT:fixed"height=3 cellSpacing=0 cellPadding=0 width="100%"border=0 TBODY TR height=1 TD width=1/TD TD width=1/TD TD width=1/TD TD bgColor=#908a47/TD TD width=1/TD TD width=1/TD TD width=1/TD /TR TR height=1 TD/TD TD bgColor=#908a47 colSpan=2/TD TD bgColor=#f7f8f9/TD TD bgColor=#908a47 colSpan=2/TD TD/TD /TR TR height=1 TD/TD TD bgColor=#908a47/TD TD bgColor=#f7f8f9 colSpan=3/TD TD bgColor=#908a47/TD TD/TD /TR /TBODY /TABLE/TD /TR TR TD TABLE style="TABLE-LAYOUT: fixed"height="100%"cellSpacing=0 cellPadding=0 border=0 TBODY TR TD width=1 bgColor=#908a47/TD TD id=oINNER bgColor=#f7f8f9/TD TD width=1 bgColor=#908a47/TD /TR /TBODY /TABLE/TD /TR TR height=3 width="100%" TD TABLE style="TABLE-LAYOUT:fixed"height=3 cellSpacing=0 cellPadding=0 width="100%"border=0 TBODY TR height=1 TD width=1/TD TD width=1 bgColor=#908a47/TD TD width=1 bgColor=#f7f8f9/TD TD bgColor=#f7f8f9/TD TD width=1 bgColor=#f7f8f9/TD TD width=1 bgColor=#908a47/TD TD width=1/TD /TR TR height=1 TD/TD TD bgColor=#908a47 colSpan=2/TD TD bgColor=#f7f8f9/TD TD bgColor=#908a47 colSpan=2/TD TD/TD /TR TR height=1 TD colSpan=3/TD TD bgColor=#908a47/TD TD colSpan=3/TD /TR /TBODY /TABLE/TD /TR /TBODY /TABLE 效果如下: 4.虚线边框表格 代码如下: TABLE cellSpacing=0 cellPadding=0 width="100%"border=0 TBODY TR TD/TD/TR/TBODY/TABLE P虚线直线1 HR style="BORDER-RIGHT:#001403 1px dotted;BORDER-TOP:#001403 1px dotted;BORDER-LEFT:#001403 1px dotted;BORDER-BOTTOM:#001403 1px dotted"SIZE=1 虚线直线2 Pstyle="BORDER-RIGHT:#001403 1px dotted;BORDER-TOP:#001403 1px dotted;BORDER-LEFT:#001403 1px dotted;BORDER-BOTTOM:#001403 1px dotted"size="1"实线: TABLE style="BORDER-RIGHT:blue 1pt solid;BORDER-TOP:blue 1pt solid;BORDER-LEFT:blue 1pt solid;BORDER-BOTTOM:blue 1pt solid"width=200 TBODY TR TD/TD/TR/TBODY/TABLE虚线: TABLE style="BORDER-RIGHT:blue 1pt dotted;BORDER-TOP:blue 1pt dotted;BORDER-LEFT:blue 1pt dotted;BORDER-BOTTOM:blue 1pt dotted"width=200 TBODY TR TD/TD/TR/TBODY/TABLE点横线: TABLE style="BORDER-RIGHT:blue 1px dashed;BORDER-TOP:blue 1px dashed;BORDER-LEFT:blue 1px dashed;BORDER-BOTTOM:blue 1px dashed"width=200 TBODY TR TD/TD/TR/TBODY/TABLE/P 虚线直线1 虚线直线2 实线: 虚线: 点横线: 5.分类型表格 源码如下: dset legend item/legend content fiel /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 ahref="#"Blueidea TD ahref="#".com TR TD ahref="#"CNBruce TD ahref="#".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 bcnbruce/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 progid:DXImageTransform.Microsoft.Shadow style="filter: (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). 源码如下: v style v\:*{behavior:url(#default#VML)} html xmlns: /style body v:RoundRect style="position:relative;width:150; height:240px" v:path textpathok="true"/ v:textpath on="true"string="cnbrucecnbrucecnbrucecnbrucecnbruc ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbru ce"/ 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 山间溪流日志《专版导航》 原创文章专版文学知识专版中国散文专版外国散文专版古典文学专版 原创散文专版原创诗歌专版中国诗歌专版外国诗歌专版文学参考资料 音画艺术专版配乐朗诵专版音乐欣赏专版图文艺术专版摄影照片处理 养生保健专版博客综合知识博客素材专版日志背景边框博客代码专版 在线文学阅览网络搜索技巧网页制作资料P.S.应用教程动画制作教程