How To Transform A Table Into A Navigational Bar With HTML
Question
I recently created a table for my website. Using HTML, how could I click on one of the pieces of table data, so that it would re-direct me to another tab on the website. For HTML the coding for just the table looks like this:
<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>
For CSS, the table coding looks like this:
<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>
I was wondering if anyone could help me transform this table into a navigation bar.
1 answers
solution1
0 2014-08-09 06:31:51
Using table is not the good approach in html for designing, - Use <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;
}
- If you are using Html5, then use nav sample nav tag
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.