Pagina aggiornata... Venerdì, 12 gennaio 2024 * Tempo di caricamento 0.80 secondi
Link navigazione : Home telaioHome ~ Tutorial ~ Html » Table lavori...

..:: Table lavori... ::..

Alcuni esempi su come utilizzare le table per realizzare dei "box/accessori" in cui scrivere testi,
menu o news da utilizzare nel proprio spazio web, se non lo avete già fatto, leggete
gli altri tutorial sulle table, per le basi e le varie personalizzazioni che si possono fare nel codice

* Iniziamo con una piccola table per scrivere dei pensieri, una poesia o una frase particolare

Useremo una table con tre righe ognuna con una sola cella

<table border="1" width="100%">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

 
 
 


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="500">
<tr>
<td style="border:1px solid #9bc5f1;" bgcolor="#eef5fc">Titolo</td>
</tr>
<tr>
<td style="border:1px solid #9bc5f1;" bgcolor="#eef5fc" height="100"> Testo frase/poesia/ecc.</td>
</tr>
<tr>
<td style="border:1px solid #9bc5f1;" bgcolor="#eef5fc">Firma/logo</td>
</tr>
</table>

Ecco come si visualizzerà la table, nella cella centrale, riservata al testo
per la frase/poesia/ecc. ho impostato l'altezza height="100" non è indispensabile,
la table "crescerà" in base al contenuto che si scriverà all'interno ma diventa necessario se si vuole
occupare un determinato spazio, bisognerà poi regolarsi su quanto testo si potrà scrivere

Pensieri...
E qui possiamo scrivere una poesia... una frase a cui siamo
affezionati... una frase scorrevole con il marquee o uno script
Penelope ♥


Vediamo come realizzare una box news fantasiosa per il nostro spazio
Ci servirà una table con due righe e tre celle

<table border="1" width="100%">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

 
   


Aggiungiamo i parametri per uno sfondo/table, il colore dei per i bordi,
il colore per lo sfondo delle celle, posizione testo e ovviamente per il font

<table style="background-image:url('url_pagina_img.gif'); border:1px solid #acac68; text-align: center; font-family:Tahoma; font-size: 12px; color: #9e9d52; margin-left:auto;margin-right:auto;" cellpadding="8" cellspacing="8" width="500">
<tr>
<td colspan="2" style="border:1px solid #ffb7dd" bgcolor="#acac68">Titolo</td>
</tr>
<tr>
<td style="border:1px solid #ffb7dd" bgcolor="#acac68" width="100">Gif</td>
<td style="border:1px solid #ffb7dd" bgcolor="#acac68" width="265">Testo</td>
</tr>
</table>

* Ed ecco il risultato

Titolo box
Spazio img Testo news

Per rendere più o meno visibile l'effetto dello sfondo table modifichiamo la misura
dello spazio table/celle in cellpadding="8" cellspacing="8", possiamo inserire uno sfondo
immagine anche in una delle celle, attenzione però alle misure, il parametro background-image
tiene conto delle misure dell'immagine e si ripete in base allo spazio in cui viene inserito cioè
in base a cosa raffigura lo sfondo scelto si potrebbe visualizzare un'immagine intera e una a metà

* Anche i parametri per bordi possono essere differenti fra loro sia per tipo che per colore

Se serve si può aggiungere lo scroll, semplice o colorato, nella cella per il testo,
potete leggere il tutorial qui -> Table scroll

<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="https://url immagine" width="xx" height="xx" alt="></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>

Ecco cosa si visualizzerà, qui lo scroll è semplice ma se volete vedere l'effetto
qui l'ho colorato Table box news scroll colorato

Titolo box
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...
scrivere... scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere... scrivere...
scrivere... scrivere... scrivere... scrivere... scrivere...

Se occorre possiamo utilizzare più table, mettendone una dentro l'altra
Un esempio con una table di tre righe/celle e nella cella centrale un'altra table di una riga e due celle

<table border="1" width="100%">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><table border="1" width="90%">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

 
   
 


Un piccolo esempio di cosa si potrebbe realizzare

In questa cella si può scrivere tutto il testo che serve, inserire
immagini e/o degli script...

...anche un messaggio che scorre!
Anche in questa cella si può scrivere,
inserire immagini e/o degli script e ovviamente lo scroll

...Testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
testo testo testo testo testo testo testo
E qui c'è un'altra cella in cui inserire testo, immagini e/o script

Ecco cosa ho aggiunto al codice iniziale,
ho colorato il testo per evidenziare inizio e fine delle table, delle celle e degli accessori
* Scrivendo lo style dei vari parametri per table e celle nei css/foglio di style,
il codice ovviamente risulterà più "leggero" e ordinato

<table style="border:2px solid #91a3a5; margin-left:auto;margin-right:auto; text-align:center;" bgcolor="#ebefef" cellpadding="4" cellspacing="4" width="500">
<tr>
<td style="text-align:center;font-family:Georgia; font-size: 12px; color: #788b8c">
In questa cella si può scrivere tutto il testo che serve, inserire<br >
immagini e/o degli script...
<br ><br >
<marquee style="text-align:center; font-family:Georgia; font-size: 12px; color: #5f7071" direction="left" scrollAmount="3" scrolldelay="2" height="25" width="80%">
...anche un messaggio che scorre!</marquee><br ></td>
</tr>
<tr>
<td align="center">
<table style="border:1px dotted #91a3a5; margin-left:auto;margin-right:auto; text-align:center;" bgcolor="#ebefef" cellpadding="2" cellspacing="2" width="90%">
<tr>
<td width="156"><img border="0" src="images/flor_vint.png" width="156" height="156" alt=""></td>
<td style="text-align:center;font-family:Georgia; font-size: 12px; color: #788b8c" valign="top">
<div style="width:100%; height:150px; overflow-y: scroll">
Anche in questa cella si può scrivere,<br >
inserire immagini e/o degli script e ovviamente lo scroll<br ><br >
...Testo testo testo testo testo<br >
testo testo testo testo testo testo testo<br >
[...]</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align:center;font-family:Georgia; font-size: 12px; color: #788b8c" height="50">E qui c'è un'altra cella in cui inserire testo, immagini e/o script</td>
</tr>
</table>



E per finire qualche esempio per dei box menu e/o link

Se ne possono realizzare di ogni tipo e necessità, arricchiti anche con degli script, tipo,
data e ora, una frase/immagine al giorno, un saluto ecc. ecc. Lo style dei link sarà quello impostato
per la pagina, a meno che non venga scritta una classe apposita nei css/foglio di style

* Un box in stile vintage, una table divisa in tre celle per poter inserire
un'immagine laterale, il titolo e il menu dotato di scroll

:: Menu..

   
 


# Il codice

<table style="border:2px solid #7d5510; text-align:center; margin-left:auto; margin-right:auto" bgcolor="#f1e7d3" cellpadding="4" cellspacing="4" width="220">
<tr>
<td width="72" rowspan="2">
<img class="images" src="https://url immagine" width="72" height="272" alt="" /></td>
<td style="font-family:Verdana; font-size: 14px; color: #4f360f">:: Menu..</td>
</tr>
<tr>
<td height="238"><div style="width:100%; height:220px; overflow-y: scroll">
<a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a><br>
[...]
</div></td>
</tr>
</table>

* Un box menu più semplice ma con i link separati ognuno in una cella

:: Nome Link ::
:: Nome Link ::
:: Nome Link ::
:: Nome Link ::
 
 
 
 
 
 

# Il codice

<table style="border:1px dotted #acac68; text-align:center; margin-left:auto; margin-right:auto" bgcolor="#f9f3eb" cellpadding="4" cellspacing="4" width="177" alt="">
<tr>
<td>
<img border="0" src="http://url immagine" width="177" height="47" alt="" /></td>
</tr>
<tr>
<td style="border-bottom:1px dotted #acac68"><a href="#">:: Nome Link ::</a></td>
</tr>
<tr>
<td style="border-bottom:1px dotted #acac68"><a href="#">:: Nome Link ::</a></td>
</tr>
<tr>
<td style="border-bottom:1px dotted #acac68"><a href="#">:: Nome Link ::</a></td>
</tr>
<tr>
<td style="border-bottom:1px dotted #acac68"><a href="#">:: Nome Link ::</a></td>
</tr>
<tr>
<td height="7" bgcolor="#acac68"></td>
</tr>
</table>

Box menu "puccioso"  realizzato in una table con una riga e due celle e
un'altra table nella cella per il menu

:: Nome Link ::
:: Nome Link ::
:: Nome Link ::
:: Nome Link ::
:: Nome Link ::
:: Nome Link ::
 
 

# Il codice

<table style="background-image:url('http://url immagine'); border:1px solid #82bdd6; text-align: center; margin-left:auto; margin-right:auto" cellpadding="4" cellspacing="4" width="250">
<tr>
<td><table style="margin-left:auto; margin-right:auto;" border="0" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td style="border:1px dotted #82bdd6; text-align:center;" bgcolor="#e8f2f2"><a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a><br></td>
<td width="100"><img border="0" src="https://url immgine" width="100" height="120" alt=""></td>
</tr>
</table></td>
</tr>
</table>

* Un box menu così si può ovviamente realizzare anche con una sola table
ma per avere lo stesso effetto sfondo/box menu, la misura in larghezza sarà più grande
quindi dipende da quanto spazio abbiamo a disposizione

:: Nome Link ::
:: Nome Link ::
:: Nome Link ::
:: Nome Link ::
:: Nome Link ::
:: Nome Link ::
   

# Il codice sarà così, ho evidenziato i parametri che modificati
permettono di ottenere lo stesso effetto del box sopra

<table style="background-image:url('https://url immagine'); border:1px solid #82bdd6; text-align: center; margin-left:auto; margin-right:auto" cellpadding="4" cellspacing="10" width="270">
<tr>
<td style="border:1px dotted #82bdd6; text-align:center;" bgcolor="#e8f2f2" width="50%">
<a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a><br>
<a href="#">:: Nome Link ::</a></td>
<td width="50%"><img border="0" src="https://url immagine" width="xx" height="xx" alt="" ></td>
</tr>
</table>

Per quanto riguarda link e menu, vi invito a leggere i vari tutorial nella sezione Script page

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 questo tutorial... Grazie ^_^




93.33%
Voti totali: 6
Rating... 5





Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* Gif...

  


~ Pagina visitata da 4394 utenti


 H: 
Buona Primavera !





Segui il telaio su Facebook

* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥

..:: Basi ::..



..:: html ::..







..:: Script page ::..



..:: Script gadget ::..



Accessori e gadget del telaio...


Spazio web...

Realizzare e gestire un sito web
nell'hosting free più famoso...

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

ೡPenelope ♥
23/05/2024 19:53:31
Ciao Lu puoi utilizzare una table o un div a cui inserire la tua immagine come sfondo, qui c'è il tutorial per le table [Link] si procede nello stesso modo nei div con background-image, e poi inserisci il codice del calendario, nella cella della table o all'interno del div
ೡ Scritto in... Calendario perpetuo
 
Lu
23/05/2024 18:59:24
Buon pomeriggio Penelope. Per favore, come faccio a inserire questo calendario in un tag, in modo che abbia un'immagine di sfondo?
ೡ Scritto in... Calendario perpetuo
 
Lu
22/05/2024 18:07:10
Ciao cara Penelope!Ho appena portato uno dei tuoi banner sul mio blog. Un abbraccio, buon pomeriggio!
ೡ Scritto in... Banner link del telaio ^_^
 
Rakel
21/05/2024 18:24:29
Ciao Penelope ho curiosato sul tuo blog ed ho trovato molte cose carine.Ho prelevato un Almanacco.Grazie
ೡ Scritto in... Almanacco trasparente
 
Cleo
21/05/2024 15:22:46
Buon compleanno tesoro[Link]
ೡ Scritto in... Il telaio di Penelope...
 
Lu
20/05/2024 22:37:37
Che bello, ho trovato un pulsante che corrisponde al mio blog, l'ho già installato e sembra perfetto! Grazie mille per gli ottimi tutorial, amica Penelope!!
ೡ Scritto in... Bottoni top pagina
 
Lu
18/05/2024 17:03:22
Ciao cara Penelope! Che carini e delicati questi cursori, adoro quando porti cose che possono essere usate anche su Blogger ♥
ೡ Scritto in... Mini cursori
 
Lu
15/05/2024 19:08:01
Buon pomeriggio amica Penelope! Grazie mille per aver consigliato il tutorial, proverò a metterlo sul mio blog. Ho visto che stai aggiungendo altri tutorial per Blogger e sono molto , perché capisco Blogger lol.
ೡ Scritto in... Il telaio di Penelope...
 
ೡPenelope ♥
09/05/2024 16:40:16
Cara Lu ancora grazie mille mi fa piacere che il telaio ti piaccia e ti sia utile imposta i commenti sotto i post del tuo blog, Blogspot ha un box per i commenti molto carino, il mio "commentario" ha un codice particolare scritto appositamente per un sito web, ma se vuoi un boxino per dei salutini veloci puoi prelevare una Cbox, codice da inserire in "Aggiungi html/javascript" ed è gratuita, ecco il link del mio tutorial [Link] Un abbraccio ♥
ೡ Scritto in... Il telaio di Penelope...
 
Lu
09/05/2024 01:20:37
Grazie mille per il tuo aiuto, amica Penelope! Se possibile, mi piacerebbe anche aggiungere un campo per i commenti sulla pagina principale del blog, poiché sei stato costretto a farlo in questo momento in te, potremmo fornirci il codice?? Mi procurerò tutti i tuoi tutorial e non li incontrerai. Il tuo blog ha un'ispirazione per me, perché è felice, colorato, ricco di dettagli, molto grato mais una volta!
ೡ Scritto in... Il telaio di Penelope...
 





Gestisci le opzioni di privacy