Homepage :: Linguaggi :: Html :: Trucchi :: Leggi # 14


Creare tabelle con i bordi curvi
Autore: Luca Ruggiero

Le tabelle Html, per loro natura, hanno un aspetto poco aggraziato, anche la loro stilizzazione con l'ausilio dei fogli di stile Css non è delle più semplici, bisogna selezionare cella per cella il bordo, il suo spessore ed il suo colore, complicando non poco la vita dello sviluppatore.

Una soluzione per altro molto sfruttata in molti siti è quella di utilizzare una tabella colorata con delle immagini create ad hoc, possibilmente dello stesso colore della tabella, per simulare l'effetto "bordi curvi", classico effetto che si utilizza per piccoli moduli con funzionalità tipo area di accesso privato, o di login.

Si avvii il proprio programma di grafica e si crei un'immagine lunga quanto la tabella in questione (ad esempio 150 X 25 pixel), con le estremità curve su di un lato, come questa:

Si sfruttino le utility del programma e si capovolga l'immagine, ottenendo questo effetto (oppure la si crei nuova):

Si crei a questo punto, nel caso di un'area di login, una tabella dal seguente aspetto divisa in celle:


Popoliamo queste celle per dar vita alla nostra area di login: 
<table width="150" cellpadding="0" cellspacing="0">
 <tr>
   <td colspan="2"><img src="bordo_superiore.gif"></td>
 </tr>
 <tr bgcolor="#003366">
   <td><font color="#FFFFFF">Username</font></td>
   <td><input type="text" size="10"></td>
 </tr>
 <tr bgcolor="#003366">
   <td><font color="#FFFFFF">Password</font></td>
   <td><input type="password" size="10"></td>
 </tr>
 <tr>
   <td colspan="2" bgcolor="#003366" align="right"><input type="submit" value="Login"></td>
 </tr>
 <tr>
   <td colspan="2"><img src="bordo_inferiore.gif"></td>
 </tr>
</table>

ed ecco il risultato:

 
Username  
Password  
 
 

Nota: questo è un esempio basilare di come utilizzare questo metodo di stilizzazione delle tabelle, non sono infatti stati utilizzati attributi particolari agli elementi interni alla tabella, come i campi di input, ne i Tag <form> e </form> che consiglio si inserire in questo modo: 

<table width="150" cellpadding="0" cellspacing="0">
 <form ...>
  <tr>
    ...

    ...
  </tr>
 </form>
</table>

Buon divertimento :-) 

--------------------------------------------------------------------------------


Segnala questa lezione a un Amico


Tuo nome

Tua email

Nome del tuo amico

Email del tuo amico


 


Aggiungi questa lezione ai tuoi Preferiti


Scopri adesso come Aumentare del 300% l'efficacia delle tue attivita' Promozionali e di Marketing su Internet
 
Disclaimer • Supportaci • Collabora • Contatti 
 
A cura di Luca Ruggiero, Napoli 2001/2003 - Ci sono 7 utenti online, il massimo numero registrato è 632 - Hosted by AspCode.it