表格导航的制作及代码

采用表格方式制作博客导航，具有多种样式，这里主要介绍几种常用的表格导航制作方法及代码。

代码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：

效果图：

线表

条格

说明：

此表格加上了漂亮的线条；主要是通过cellspacing1像素间隙，使表格与单元格背景实现变化。

代码3：

效果图：

立表

体格

说明：

此表格为立体感效果，是通过简单的亮暗边框设置来实现的。

代码4：

<TABLE style="BACKGROUND-IMAGE: url(http://zmbn.com/eWebEditor/sysimage/bg/snow.gif)" borderColor=#0000ff cellSpacing=2 cellPadding=3 width="80%" bgColor=#dddddd border=1

heihgt="90%">

<TBODY>

<TR>

<TR>

<TR>

<TR>

<TR>

效果图：

表格代码详解：

1、http://zmbn.com/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></TR> 为表格横向的5个单元格，可增减。

在掌握了表格导航代码原理后，还可创意出各种形式表格导航。欣赏下款应用实例。

应用实例图：

证券视频

中金在线股市在线新浪财经北京首放

国盛证券华夏财经第一财经央视证券

交易日顶点财经在线财经和讯宽频

应该说，表格导航的制作手法及样式多种多样，在掌握基本代码和原理后，重要的是创意。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。