如何使用HTML将表转换为导航栏

时间:2014-08-09 06:11:56

标签: html css datatable navigation

我最近为我的网站创建了一个表格。使用HTML,我如何点击其中一个表格数据,以便将其重定向到网站上的另一个标签。 对于HTML,只有表格的编码如下:

<body>
<table>
  <tbody>
  <tr>
    <td>Home</td>
    <td>Produce</td>
    <td>Contact, Location, and Hours</td>
    <td>Join The Fresh Fiesta!</td>
  </tr>
  </tbody>
</table>

对于CSS,表格编码如下所示:

<style>

    table{
       border: 8px solid #0080C0;
       border-right-width:8px solid #008c0;
       width:1090px;
       height:70px;
       background-color:#0080C0;
       text-align:center;
     } 

    td{
       width:1090px;
       height:40px;
       background-color:#4BA0BB;
       font-family:'Franklin Gothic Heavy'; font-weight: bold; font-style: italic; text-
       decoration: none; font-size: 15pt; color: #008000;
       border-radius: 5px;
       margin:auto;
       text-align:center;
     }
  </style>

我想知道是否有人可以帮助我将此表格转换为导航栏。

1 个答案:

答案 0 :(得分:0)

使用表格不是html设计的好方法,  - 使用     <ul> <li><a href="#" class="active">Home</a></li> <li<a href="#">Produce</a></li> <li<a href="#">Contact, Location, and Hours</a></li> <li<a href="#">Join The Fresh Fiesta!</a></li> </ul> CSS

ul li
{
  display:inline;
}
active 
{
  background-color:#ff9900;
}

- 如果您使用的是Html5,请使用导航    sample nav tag