Navigációs táblázatok
Függőleges navigációs villogó táblázat
A következő részek átmásolhatók
Megjelenése weboldalon, azaz monitoron
Teszteléshez a táblázat szövege fölé húzzuk az egeret.
Megírása XHTML lapon
<div id="navdtabla">
<table width="110" border="4" cellpadding="2" class="navdtabla">
<tr><td> <a href="html fájl_001.html"> Téma 1 </a> </td></tr>
<tr><td> <a href="html fájl_002.html"> Téma 2 </a> </td></tr>
<tr><td> <a href="html fájl_003.html"> Téma 3 </a> </td></tr>
<tr><td> <a href="html fájl_004.html"> Téma 4 </a> </td></tr>
<tr><td> <a href="html fájl_005.html"> Téma 5 </a> </td></tr>
<tr><td> <a href="html fájl_006.html"> Téma 6 </a> </td></tr>
<tr><td> <a href="html fájl_007.html"> Téma 7 </a> </td></tr>
<tr><td> <a href="html fájl_008.html"> Téma 8 </a> </td></tr>
<tr><td> <a href="html fájl_009.html"> Téma 9 </a> </td></tr>
</table>
</div>
Megírása CSS lapon
#navdtabla { width: 140px; background-color: black; margin-left: 30px;}
.navdtabla {margin: 15px;}
.navdtabla td {text-align: center; font-size: 12px; font-weight: bold; background-color: red;}
.navdtabla a {color: #fff; text-decoration: none;}
.navdtabla a:hover {color: black; background-color: #fc0; padding: 0px 8px 0px 8px;}
Vízszintes navigációs villogó táblázat
Megjelenése weblapon
Teszteléshez, szöveg fölé húzzuk az egeret.
| Téma 1 | Téma 2 | Téma 3 | Téma 4 | Téma 5 | Téma 6 | Téma 7 |
Megegírása XHTML lapon
<table width="90%" border="4" cellpadding="2" class="navviztabla">
<tr>
<td> <a href="#"> Téma 1</a> </td>
<td> <a href="#"> Téma 2</a> </td>
<td> <a href="#"> Téma 3</a> </td>
<td> <a href="#"> Téma 4</a> </td>
<td> <a href="#"> Téma 5</a> </td>
<td> <a href="#"> Téma 6</a> </td>
<td> <a href="#"> Téma 7</a> </td>
<tr>
</table>
Meghatározások megírása CSS lapon
.navviztabla {width: 90%; background-color: black;}
.navviztabla td {text-align: center; font-size: 12px; font-weight: bold; background-color: red;}
.navviztabla a {color: #fff; text-decoration: none; padding: 0px 8px 0px 8px;}
.navviztabla a:hover {color: black; background-color: #fc0; padding: 0px 8px 0px 8px;}