ೡLink navigazione :.


ೡ Table sfondo...

Le table sono trasparenti, ciò significa che prenderanno il colore o lo sfondo su cui son state postate,
ma se occorre possiamo personalizzarlo con un colore o un'immagine (background)

- Iniziamo con i colori ^_^

<table style="border:1px solid #ae97eb; margin-left: auto; margin-right: auto;" bgcolor="#f2e9fb" cellpadding="4" cellspacing="4" width="400">
<tr>
<td>&nbsp;</td>
</tr>
</table>
Ed ecco la table con lo sfondo colorato

 

Il parametro da inserire è: bgcolor=" "
Possiamo inserirlo sia per tutta la table che nella/e cella/e
per ottenere effetti particolari tipo questo:

<table style="border:1px solid #ae97eb; margin-left:auto;margin-right:auto;" cellpadding="8" cellspacing="8" width="400">
<tr>
<td style="border:1px dotted #ae97eb" bgcolor="#f2e9fb">&nbsp;</td>
</tr>
</table>
Qui ho inserito il parametro nella cella

 

- Ovviamente possiamo inserire il parametro sia nell'intera table che nelle celle e agendo
sui parametri cellpadding="..." cellspacing="..." potremmo realizzare delle belle cornici

<table style="border:1px solid #ae97eb; margin-left:auto;margin-right:auto;" bgcolor="#f2e9fb" cellpadding="4" cellspacing="10" width="400">
<tr>
<td class="center" style="border:1px solid #ae97eb" bgcolor="#fcfafe">&nbsp;</td>
</tr>
</table>
Risultato...

In questa table cellspacing è di 10 px

⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

- Vediamo ora come inserire lo sfondo utilizzando un'immagine


<table style="background-image:url('images/bg-b8.gif'); border:1px solid #ae97eb;margin-left: auto; margin-right: auto;" cellpadding="4" cellspacing="4" width="400">
<tr>
<td>&nbsp;</td>
</tr>
</table>

Ecco la table con uno sfondo-background

 

In questo caso dobbiamo inserire il parametro: background-image:url('url pagina immagine');
ovviamente avremo bisogno di un'immagine hostata... trovate la guida qui: Immagini

- Anche in questo caso possiamo aggiungere il parametro sia nella table che nelle celle
e realizzare gli effetti che vi ho illustrato sopra, ma possiamo fare anche questo...

<table style="background-image:url('images/lightpink%20hotpink4.gif'); border:1px solid #8c3163; margin-left: auto; margin-right: auto;" cellpadding="4" cellspacing="4" width="400">
<tr>
<td style="background-image:url('images/baby001.jpg');text-align: left; font-family:Tahoma; font-size: 12px; color: #ffffff; border:1px solid #8c3163" height="90">
Spero vi sia utile questa guida ^_^
in caso affermativo lincate il telaio^^
Grazie</td>
</tr>
</table>

Table con un'immagine sfondo nella quale si può scrivere

Spero vi sia utile questa guida ^_^
in caso affermativo lincate il telaio...
Grazie^^
(Approfitto delle circostanze^^)

In questo caso dovremo fare attenzione alle misure dell'immagine
altrimenti verrà ripetuta e l'effetto non sarà piacevole

La mia immagine misura 400px per 90px e qui ho messo nella cella 130px...

 

⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝
Per comodità, specie se la table ci serve in più occasioni,
tipo dei menu, possiamo inserire i parametri nei css (Foglio di style) della pagina

STYLE TABLE SFONDO COLORATO

<style type="text/css">
table.box {
font-family: Tahoma;
font-size:12px;
color:#938461;
text-align:center;
border:1px solid #ae97eb
background-color: #f2e9fb;
margin-left:auto;
margin-right:auto;
}
</style>
STYLE TABLE BACKGROUND-IMAGE

<style type="text/css">
table.box {
font-family: Tahoma;
font-size:12px;
color:#938461;
text-align:center;
border:1px solid #ae97eb
background-image: url('http://url immagine');
width:***px;
height:***px;
margin-left:auto;
margin-right:auto;
}
</style>

Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


ೡ Dai un giudizio a questa guida... Grazie ^_^


86%
Voti totali: 7
Rating... 4.29


Un clik dai!
Se il telaio ti piace e pensi che sia utile votalo nelle top 100... :: Clicca qui! :: Clicca!


e... condividi questa pagina ^_^



Se hai problemi con la guida scrivimi qui...

mulberry handbags sale
20/05/2013 11:03:22
Home Page
Best wishes!Your blog is very good
ೡ Commento scritto dalla pagina '/tutorial/script_pagina/cursore_scrittina.php'
Sabry
01/05/2013 15:25:02
Home Page
Ciao Penelope, sei proprio brava ... ... provo una sana invidia ... hehehe .... Posso chiederti una cosa?Per farmi mandare un messaggio sulla mia posta elettronica come devo fare? Vorrei mettere una sorta di bannerino tipo "mail me" nel mio bloggino ...:-) grazie per la pazienza
ೡ Commento scritto dalla pagina '/tutorial/index_basi.php'
star
24/04/2013 15:07:32
***
scusa su un sito ho visto una che ha creato un certo tag dell'umore a quanto pare lo ha preso da qui, posso sapere come averlo?? ti prego è urgenteeeeeeeeeeeeeeeeeeeeeeeeeeeee*_*
ೡ Commento scritto dalla pagina '/tutorial/script_pagina/link_effetto_arcobaleno.php'
Saray
24/03/2013 18:48:16
Home Page
Ciao cara Penelope oggi sono stata qui quasi due orette a guardare la tua bellissima grafica. Ho preso un tuo vestitino per la mia Cbox. E' venuta molto bene e ti ringrazio moltissimo. Baci
ೡ Commento scritto dalla pagina '/tutorial/index.php'
Ylenia
12/03/2013 11:11:43
***
Brava, sito molto carino, utile e ben fatto. Continua così!..: Ylenia :..
ೡ Commento scritto dalla pagina '/tutorial/html/link.php'

⇜ ↭ ↭ ↭ ⇝

  Nickname
 
  Home Page
 
[ ^_^ ] [ =^_^= ] [ O_O ] [ *_* ] [ ♥ ]






- Pagina visitata da 341 utenti
 

ೡ Menu html



Penelope guide web

More banner





ೡ Mini anteprime articoli...





ೡ News dal telaio...



ೡ Altre sezioni utili...

- Fare un sito...
Guida completa alla realizzazione
e gestione di un sito web
- Un sito su AlterVista
Guida completa alla realizzazione
e gestione di un sito su AlterVista
- Tenplate Webset and Blog
Basi complete per siti web
e kit per i blog Blogger
- Gif... more gif!
Tutte le gif che vuoi!



38 Twitter follower
PenelopeLive




 
Torna indietro Torna su