Programmazione Web » Html » Realizzare menu eleganti utilizzando le tabelle
Realizzare menu eleganti utilizzando le tabelle
Difficoltà:
Scritto da Alessandro Alessandrini
Sito Web: http://www.sitoservice.it 
Questo tutorial è stato letto 1743 volte
Per creare menu di navigazione eleganti e funzionali, non è necessario andare alla ricerca di pulsanti o di gif, ne è necessario impazzire per cercare la soluzione grafica migliore.
Un ottimo sistema è creare una tabella con righe e colonne per creare un bellissimo menu di navigazione, elegante e molto funzionale.
Ecco allora come fare:
| Link | |
| Link | |
| Link | |
| Link |
Ho realizzato una tabella lunga 140 pixel composta da 5 righe e due colonne.
Ho poi ridimensionato le due colonne portandone una a 12 pixel e l'altra a 124 pixel, colorandole indipendentemente all'interno.
Ecco il codice utilizzato:
<table border="0" cellpadding="0" cellspacing="0" width="140">
<tr>
<td width="12"
bgcolor="#FF6600"></td>
<td width="124"
bgcolor="#FFE6D5"> Link</td>
</tr>
<tr>
<td width="12"
bgcolor="#FF6600"></td>
<td width="124"
bgcolor="#FFE6D5"> Link</td>
</tr>
<tr>
<td width="12"
bgcolor="#FF6600"></td>
<td width="124"
bgcolor="#FFE6D5"> Link</td>
</tr>
<tr>
<td width="12"
bgcolor="#FF6600"></td>
<td width="124"
bgcolor="#FFE6D5"> Link</td>
</tr>
</table>
Ho utilizzato un colore base per le celle piccole e un suo gradiente per le celle grandi.
Ora vediamo come modificare il menu, dando spazio tra le celle in modo da creare un senso di indipendenza tra i link contenuti:
| Link | |
| Link | |
| Link | |
| Link |
Ecco il codice utilizzato con l'aggiunta di 3 pixel di spaziatura tra le varie celle:
<table border="0" cellpadding="0" cellspacing="3" width="140">
<tr>
<td width="12" bgcolor="#FF6600"> </td>
<td width="116" bgcolor="#FFE6D5">Link</td>
</tr>
<tr>
<td width="12" bgcolor="#FF6600"> </td>
<td width="116" bgcolor="#FFE6D5">Link</td>
</tr>
<tr>
<td width="12" bgcolor="#FF6600"> </td>
<td width="116" bgcolor="#FFE6D5">Link</td>
</tr>
<tr>
<td width="12" bgcolor="#FF6600"> </td>
<td width="116" bgcolor="#FFE6D5">Link</td>
</tr>
</table>
Visto che non è poi così difficile realizzare un menu chiaro ed elegante?
Fate le prove modificando i colori di sfondo delle varie celle provando vari gradienti.
Aggiungi questo tutorial ai preferiti
