网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

作者： 北京网站建设   日期：2008-03-27 06:03:34  来源： http://www.qitongnet.com

我们制作主页的过程中，用到表格的地方非常多，灵活运用表格技巧可以为我们的网页增色不少，这里我就详细介绍几中特效表格的制作方法。北京网站设计
北京网页设计
　　一、彩色虚线表格北京网站建设
北京网站制作
<style type="text/CSS">企通互联
<!--网页设计
.tab1 {网站建设
border-top-width: thin;北京网站制作
border-right-width: thin;网页设计
border-bottom-width: thin;北京网站建设
border-left-width: thin;北京网站建设
border-top-style: dotted;北京网站建设
border-right-style: dotted;北京网站建设
border-bottom-style: dotted;网页设计
border-left-style: dotted;北京网站建设
border-top-color: #00CC66;北京网站制作
border-right-color: #0099CC;网站建设
border-bottom-color: #FF0000;网站建设
border-left-color: #6699FF;网站制作
}网站制作
-->北京网站制作
</style>北京网站设计
<table width="200" border="0" cellpadding="2" cellspacing="2" class="tab1">网站制作
<tr> 北京网站制作
<td><div align="center">虚</div></td>北京网站制作
<td><div align="center">线</div></td>网站制作
</tr>北京网站建设
<tr> 北京网页设计
<td><div align="center">表</div></td>网站建设
<td><div align="center">格</div></td>企通互联
</tr>网站设计
</table>网站设计
网站建设
　　 网站建设二、鼠标指向单元格变色北京网站制作
onmouseout="this.style.backgroundColor=''" 鼠标离开效果onmouseover="this.style.backgroundColor='#FFcccc'"鼠标放上去的效果，可以修改#FFcccc的值来改变颜色北京网站建设
<table width="200" border="1" cellspacing="0" cellpadding="0">北京网站设计
<tr> 北京网站建设
<td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'"> </td>北京网页设计
</tr>企通互联
<tr> 北京网页设计
<td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFccaa'"> </td>北京网站设计
</tr>北京网站制作
</table>网页设计
网页设计
　　三、立体表格企通互联
网页设计
<table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0">网站制作
<tr align="center"> www.qitongnet.com北京网站设计
<td width="86" 企通互联
bordercolorlight="#000000" bordercolordark="#eeeeee" bgcolor="#B7B7B7" >立体</td>企通互联
<td width="108" 网站设计
bordercolorlight="#000000" bordercolordark="#eeeeee" bgcolor="#B7B7B7" >表格</td>北京网页设计
</tr>北京网站制作
</table>北京网站制作
网站建设
　　四、表格嵌套北京网页设计
　　1、利用表格的间距来做嵌套北京网站设计
<table width="200" border="1" cellspacing="4" cellpadding="0">企通互联
<tr>网站设计
<td> </td>企通互联
<td> </td>北京网站建设
<td> </td>北京网站建设
</tr>网页设计
</table>企通互联
　　主要是用到间距 cellspacing="4"北京网站建设
北京网站建设
　　2、充分利用根据表格对齐的方式北京网站建设
　　这里主要是将第一个表格居左，第二个表格居右，第三个表格居中。这样当你随意调整里面三个表格大小的时候，他们的间距将保持不变，非常方便。 北京网页设计北京网站建设
北京网站制作
<table width="200" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">网站设计
<tr>北京网页设计
<td><table width="60" border="1" align="left" cellpadding="0" cellspacing="0">网站设计
<tr>企通互联
<td> </td>网站建设
</tr>北京网站建设
</table>网站建设
<table width="60" border="1" align="right" cellpadding="0" cellspacing="0">企通互联
<tr>企通互联
<td> </td>北京网页设计
</tr>网页设计
</table>北京网站制作
<table width="80" border="1" align="center" cellpadding="0" cellspacing="0">北京网页设计
<tr>网页设计
<td> </td>北京网站设计
</tr>北京网站设计
</table></td>网站建设
</tr>企通互联
</table>网页设计
网页设计
　　五、半透明表格网站制作
北京网站设计
　　这里主要是用到了CSS滤镜filter: Alpha(Opacity=20)。北京网站制作
<style type="text/css"> 网站设计北京网站设计
<!--北京网站建设
.bg {网站制作 网站制作
background-color: #66CCFF;网页设计
filter: Alpha(Opacity=20); 企通互联北京网站设计
}网页设计
--> 网页设计
<table width="200" border="0" cellpadding="0" cellspacing="0" class="bg">北京网站制作
<tr> 网站设计
<td><div align="center">半</div></td>网页设计
<td><div align="center">透明</div></td>北京网站制作
</tr>北京网站建设
<tr> 企通互联
<td><div align="center">表</div></td> 北京网站建设北京网页设计
<td><div align="center">格</div></td>网页设计
</tr>网页设计
</table>北京网页设计
北京网站建设
　　六、阴影表格北京网站设计
网站建设
　　这里主要用到了CSS滤镜style="filter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10"网页设计
<div style="filter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10"> 网站制作
<table width=300 border=1 bgcolor=#EAEAEA>企通互联
<tr><td width="93">111</td><td width="91">222</td><td width="94">333</td></tr>网站设计
</table>北京网站设计
</div>北京网站设计
北京网站制作
　　附：插入CSS样式的方法（我们这里用半透明表格来做说明) 网页设计企通互联
　　第一种方法是定义一个CSS名称。网页设计
　　比如北京网页设计
<style type="text/css">北京网页设计
<!--企通互联
.bg {企通互联
background-color: #66CCFF;北京网站建设
filter: Alpha(Opacity=20);北京网站建设
}网站设计
--> 企通互联
　　元素需要用到CSS的时候，比如表格，定义一个CLASS就可以了，如北京网站建设
<table width="200" border="0" cellpadding="0" cellspacing="0" class="bg">北京网站制作
　　第二种是直接在你需要用到CSS元素的地方插入相关代码，style=""如：北京网站制作
<table width="201" border="1" style="filter: Alpha(Opacity=20);background-color: #66CCFF;">