表格导航的制作及代码

表格导航的制作及代码      采用表格方式制作博客导航，具有多种样式，这里主要介绍几种常用的表格导航制作方法及代码。     代码1： <table border="1" width="200" cellpadding="0" cellspacing="0"><tr align="center"> <td>简</td><td>表</td></tr><tr align="center"> <td>单</td><td>格</td></tr></table>   效果图：    简 表 单 格   说明： 这是最为普通和简单的一种表格导航形式。   代码2： <table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" ><tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">线</td><td bgcolor="#FFFFFF">表</td></tr><tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">条</td><td bgcolor="#FFFFFF">格</td></tr></table>   效果图：   线 表 条 格   说明： 此表格加上了漂亮的线条；主要是通过cellspacing1像素间隙，使表格与单元格背景实现变化。   代码3： <table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"><tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >立</td><td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >表</td></tr><tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >体</td><td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >格</td></tr></table> 效果图： 立 表 体 格   说明： 此表格为立体感效果，是通过简单的亮暗边框设置来实现的。   代码4： <TABLE style="BACKGROUND-IMAGE: url(http:///eWebEditor/sysimage/bg/snow.gif)" borderColor=#0000ff cellSpacing=2 cellPadding=3 width="80%" bgColor=#dddddd border=1 heihgt="90%"> <TBODY> <TR> <TD> </TD><TD> </TD> <TD> </TD><TD> </TD> <TD> </TD></TR> <TR> <TD> </TD><TD> </TD> <TD> </TD><TD> </TD> <TD> </TD></TR> <TR> <TD> </TD><TD> </TD> <TD> </TD><TD> </TD> <TD> </TD></TR> <TR> <TD> </TD><TD> </TD> <TD> </TD><TD> </TD> <TD> </TD></TR> <TR> <TD> </TD><TD> </TD> <TD> </TD><TD> </TD> <TD> </TD></TR></TBODY></TABLE>   效果图：   表格代码详解： 1、http:///eWebEditor/sysimage/bg/snow.gif  表格背景图片，可调；     2、 border=1    边框的粗细参数，可调；      3、cellSpacing=2  表格单元的间距参数，可调；      4、cellPadding=3  表格单元的边距参数，可调；      5、width="80%"   表格的宽度，可调；      6、heihgt="90%"  表格的高度，可调；      7、borderColor=#0000ff 表格边框颜色，可调；      8、bgColor=#dddddd   表格背景颜色，可调；      9、<TD> </TD>  表格横向的一个单元，可增减；   10、<TR><TD> </TD><TD> </TD> <TD> </TD><TD> </TD> <TD> </TD></TR>   为表格横向的5个单元格，可增减。         在掌握了表格导航代码原理后，还可创意出各种形式表格导航。欣赏下款应用实例。  应用实例图：        证 券 视 频     中 金 在 线     股 市 在 线      新 浪 财 经     北 京 首 放     国 盛 证 券     华 夏 财 经     第 一 财 经     央 视 证 券       交 易 日     顶 点 财 经    在 线 财 经     和 讯 宽 频          应该说，表格导航的制作手法及样式多种多样，在掌握基本代码和原理后，重要的是创意。