1、表格式导航制作如下代码，利用 table ：
Html代码
复制代码 代码示例:
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
2.<html>
3.<head>
4.<title>table方式实现tab</title>
5.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6.</head>
7.<body>
8.<table width=”800” height=”24” border=”0 ” cellpadding=”0” cellspacing=”0” bgcolor=”#FFFFFF”>
9. <tr align=”center”>
10. <td bgcolor=“#ececec”><a href=“#”>首 页</a></td>
11. <td bgcolor=“#ececec”><a href=“#”>新 闻</a></td>
12. <td bgcolor=“#ececec”><a href=“#”>参 考</a></td>
13. <td bgcolor=“#ececec”><a href=“#”>Blog </a></td>
14. <td bgcolor=“#ececec”><a href=“#”>论 坛</a></td>
15. <td bgcolor=“#ececec”><a href=“#”>其 它</a></td>
16.</tr>
17.</table>
18.</body>
19.</html>
注意：把边框和边距都设为 0 ，隐藏表格线；设定每个单元格中的文本居中对齐。实现了一个简单的横向导航。（ table 方法的要点是：先设计导航数据表，再将导航内容装入每个单元格中。）
2、利用 CSS 来设计它， CSS 就是为了实现表现与内容的分离。
在 html 文件中编写如下代码（上下省略）：
复制代码 代码示例:
1.<div id=”nav”>
2.<ul >
3.<li><a href=”#” id="current">首 页</a></li>
4.<li><a href=”#”>新 闻</a></li>
5.<li><a href=”#”>参 考</a></li>
6.<li><a href=”#”>Blog</a></li>
7.<li><a href=”#”>论 坛</a></li>
8.<li><a href=”#”>其 它</a></li>
9.</ul> </nav>
在 CSS 文件中代码如下（为了方便测验， CSS 代码放到 html 的 head 中即可，详情如下）：
Html代码
复制代码 代码示例:
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
2.
3.<html>
4.<head>
5.<title>CSS方式实现tab</title>
6.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7.
8.<style type="text/css">
9.<!--
10.#nav li {
11. float:left;
12. display:inline;
13.
14.}
15.#nav li a{
16. color:#000000;
17. text-decoration:none;
18. paddding-top:4px;
19. display:block;//使a 变为块状对象，下面就可以对它设定高宽等
20. width:97px;
21. height:22px;
22. text-align:center;
23. background-color:#ececec;
24. margin-left:2px;
25.}
26.#nav li a:hover{
27. background-color:#bbbbbb;//鼠标移到频道上出现响应
28. color:#ffffff;
29.}
30.#nav li a #current{
31. background-color:#2788da;
32. color:#ffffff;
33.}
34.#nav{
35.
36. height:26px;
37. border-bottom:2px solid #2788da;
38.}
39.
40.-->
41.</style>
42.
43.</head>
44.<body>
45.<div id="nav">
46.<ul>
47.<li><a href=”#” id="current">首 页</a></li>
48.<li><a href=”#”>新 闻</a></li>
49.<li><a href=”#”>参 考</a></li>
50.<li><a href=”#”>Blog</a></li>
51.<li><a href=”#”>论 坛</a></li>
52.<li><a href=”#”>其 它</a></li>
53.</ul>
54.</div>
55.</body>
56.</html>
当鼠标放到导航上时，背景色会变色发生响应。
3、相比较 table 和 css 的实现， CSS 优势十分明显，代码简洁灵魂，可重用，利于维护。
