3
- E ora personalizziamo questo codice base
Inseriamo i parametri base delle table, aggiungiamo quelli per per il bordo esterno
e il font, quindi nei tag delle celle i parametri per il bordo e lo sfondo
<table style="border:3px dotted #9bc5f1; text-align: center; font-family:Tahoma; font-size: 12px; color: #72aae6;margin-left:auto; margin-right:auto;" cellpadding="2" cellspacing="2" width="400">
<tr>
<td style="border:1px solid #9bc5f1;" bgcolor="#eef5fc">Testo</td>
</tr>
<tr>
<td style="border:1px solid #9bc5f1;" bgcolor="#eef5fc" height="70"> Testo</td>
</tr>
<tr>
<td style="border:1px solid #9bc5f1;" bgcolor="#eef5fc">Testo</td>
</tr>
</table> |
- Il risultato...
|
Pensieri... |
E qui possiamo scrivere una poesia... una frase a cui siamo
affezionati... una frase scorrevole con il marquee o uno script |
|
Penelope ♥ |
⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝
diamo uno style al bordo e coloriamo un po' la nostra table...
<table style="background-image:url('images/002.gif'); border:1px solid #ffb7dd; text-align: center; font-family:Tahoma; font-size: 12px; color: #fa96cf; margin-left:auto;margin-right:auto;" cellpadding="84" cellspacing="8" width="400">
<tr>
<td colspan="2" style="border:1px solid #ffb7dd" bgcolor="#fff0f8">Testo</td>
</tr>
<tr>
<td style="border:1px solid #ffb7dd" bgcolor="#fff0f8" width="100">Testo</td>
<td style="border:1px solid #ffb7dd" bgcolor="#fff0f8" width="265">Testo</td>
</tr>
</table> |
- Ecco qui...
|
Titolo box |
|
Spazio gif |
..News! |
- Ora possiamo inserire una giffetta nella cella piccolina e scrivere le nostre news,
- Ecco come trasformeremo il codice
<table style="background-image:url('images/002.gif'); border:1px solid #ffb7dd; text-align: center; font-family:Tahoma; font-size: 12px; color: #fa96cf; margin-left:auto;margin-right:auto;" cellpadding="8" cellspacing="8" width="400">
<tr>
<td colspan="2" style="border:1px solid #ffb7dd" bgcolor="#fff0f8"><strong>:: News e aggiornamenti ::..</strong></td>
</tr>
<tr>
<td style="border:1px solid #ffb7dd" bgcolor="#fff0f8" width="100"><img border="0" src="images/1228oa6.gif" width="60" height="141" alt="Spero ti sia utile questa guida^^"></td>
<td style="border:1px solid #ffb7dd" bgcolor="#fff0f8" width="265">
<div style="width:265px; height:140px; overflow-y: scroll">
TESTO NEWS
</div></td>
</tr>
</table> |
* La nostra table news bella pronta da mettere al lavoro!
- Non ho colorato lo scroll tanto sarebbe visibile solo con IE -
|
:: News e aggiornamenti ::.. |
 |
Ecco qui una bella table news per....
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere...
|
⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝
Possiamo realizzare dei box molto elaborati utilizzando più table, una dentro un'altra...
|
|
 |
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
|
|
Penelope ♥ |
- Ecco il box visto con tutti i bordi delle table colorati
|
|
|
|
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla
|
|
Penelope ♥ |
- Ecco come realizzarne il codice
<table style="border:2px solid #ffb3ca; margin-left:auto;margin-right:auto; text-align:center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="320">
<tr>
<td style="background-image:url('url immagine')" height="50"> </td>
</tr>
<tr>
<td><table style="border:0px; margin-left:auto;margin-right:auto; text-align:center" cellpadding="0" cellspacing="0" width="80%">
<tr>
<td width="52"> <img border="0" src="images/th_can111.gif" width="52" height="103"></td>
<td style="text-align:center; font-family:Palatino Linotype; font-size: 10pt; color: #ffb3ca">
<div style="width:200px; height:110px; overflow-y: scroll;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#ffb3ca;
scrollbar-darkshadow-color :#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffb3ca;
scrollbar-shadow-color:#ffb3ca;
scrollbar-track-color:#ffffff">
TESTO QUI</div></td>
</tr>
</table></td>
</tr>
<tr>
<td style="text-align:center; font-family:Palatino Linotype; font-size: 8pt; color: #ffb3ca"><img border="0" src="images/325.gif" width="290" height="7" alt=""><br><br>Tuo nik</td>
</tr>
</table> |
TABLE
|
⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝
Un uso molto diffuso delle table sono sicuramente i menu, molto comodi per agevolare
la navigazione in uno spazio web, oltre che renderne l'aspetto elegante e ordinato^^
- Qualche esempio molto semplice da realizzare
Box menu 1
|
Box menu 2
|
Box menu 3
|
# Clicca qui per vedere e prelevare i codici utilizzati
CODICE BOX MENU 1
<table style="border:1px solid #960a10; margin-left:auto;margin-right:auto;" cellpadding="0" cellspacing="3" width="140">
<tr>
<td style="border:1px solid #960a10" align="center">:: Link ::</td>
</tr>
<tr>
<td style="border:1px solid #960a10" align="center">:: Link ::</td>
</tr>
<tr>
<td style="border:1px solid #960a10" align="center">:: Link ::</td>
</tr>
<tr>
<td style="border:1px solid #960a10" align="center">:: Link ::</td>
</tr>
</table> |
Preleva il codice qui se può farti comodo
|
CODICE BOX MENU 2
<table style="border:3px dotted #6b770f; margin-left:auto;margin-right:auto;" cellpadding="3" cellspacing="3" width="140">
<tr>
<td style="border:1px solid #6b770f" width="140" align="center">
:: Link ::<br>
:: Link ::<br>
:: Link ::<br>
:: Link ::</td>
</tr>
</table> |
Preleva il codice qui se può farti comodo
|
CODICE BOX MENU 3
<table style="border:0px; margin-left:auto;margin-right:auto; text-align:center; font-family:Palatino Linotype; font-size: 10pt; color: #c578e0" cellpadding="3" cellspacing="3" width="140">
<tr>
<td style="border:0px" bgcolor="#f3e0fa">Menu</td>
</tr>
<tr>
<td style="border:1px dotted #c578e0; border-top:0px">
:: Link ::<br>
:: Link ::<br>
:: Link ::<br>
:: Link ::</td>
</tr>
</table> |
Preleva il codice qui se può farti comodo
|
Largo alla fantasia amici, ci sono un mare di script da utilizzare e realizzare dei bellissimi lavori ^_^
AJÁNLOM AZ OLDALT
Súgó
Archívum
ARCHÍVUM
