Pagina aggiornata... Giovedì, 02 maggio 2024 * Tempo di caricamento 0.78 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » CSS - Table struttura sito

..:: CSS table struttura sito ::..

Realizzare un sito web con le table è molto semplice, le personalizzazioni che si possono fare
sono illimitate per cui scrivere i css diventa indispensabile altrimenti il codice nella/e pagina/e
diventerebbe confuso e pesante, inoltre alcuni parametri si possono inserire solo nei css

Si possono creare layout solo con le table o utilizzarle come contenitori invisibili per basi grafiche,
se si sceglie una struttura più semplice sfruttando le tante proprietà delle table si può realizzare
un sito ottimizzato per i vari dispositivi, con basi grafiche che determinano gli spazi sarà sicuramente
più rifinito nei particolari ma più complicato da rendere responsive

Esempio sito con layout in table
Un sito molto semplice, realizzato solo con le table, una dentro l'altra per creare una cornice
e un effetto leggermente fluo per suddividere gli spazi dei contenuti, come ho scritto nell'anteprima,
con uno spazio realizzato in questo modo se si fa attenzione alla scrittura del testo e alle immagini che
si vanno ad inserire sarà anche ottimizzato per i vari dispositivi senza troppi problemi

Scrivere i parametri delle varie table e celle sarà ovviamente più comodo e pratico utilizzare i css,
anche se si preferisce realizzare una struttura con una sola table, ci saranno le varie celle per i contenuti,
ogni classe che si aggiunge potrà essere usata man mano dove occorre non solo per la struttura

Queste sono le classi che ho scritto per le table del sito esempio


[...]
/* Table */
table.cornice_esterna{
border:3px solid #b6c272;
background-color:#f8fae4;
text-align:center;
margin-left:auto;
margin-right:auto
}
td.cornice_contenitore{
border:1px solid #b6c272;
background-color:#e7efb1;
text-align:center;
padding: 15px;
}
table.cornice_interna{
background-color:#e7efb1;
text-align:center;
margin-left:auto;
margin-right:auto
}
td.cornice_flwo{
border:1px solid #b6c272;
background-color:#f8fae4;
text-align:center;
padding: 15px;
}
td.bordino{
border:1px solid #b6c272;
background-color:#f3f8d3;
text-align:center;
}
table.invisibile{
border:0px;
text-align:center;
margin-left:auto;
margin-right:auto
}
td.barra_link{
border-right:1px dotted #b6c272;
text-align:center;
}
td.corpo{
font-family: Garamond;
font-size: 16px;
color : #757f31;
text-align: center;
}
td.colonna{
border-left:1px dotted #b6c272;
font-family: Garamond;
font-size: 16px;
color : #757f31;
text-align: center;
width:"30%"
}

Vi consigli di utilizzare nomi per le classi semplici ma specifici,
il lavoro è ampiamente agevolato quando si scrive il codice nella pagina

Basterà scrivere:

<table class="cornice_esterna" cellpadding="2" cellspacing="15" width="80%">
<tr>
<td>[...]</td>
</tr>
</table>

Al posto di:
(Qui i parametri sono su due linee ma ovviamente va scritto tutto su una)

<table style="border:3px solid #b6c272; background-color:#f8fae4; margin-left:auto; margin-right:auto; text-align: center" cellpadding="2" cellspacing="15" width="80%">
<tr>
<td>[...]</td>
</tr>
</table>

Questo è solo un piccolo esempio, le righe di codice in una pagina che permettono di visualizzare
la home di un sito sono tante, oltre alla struttura ci saranno i vari contenuti, testo, link, immagini,
script per i gadget, ecc. ecc... si potrebbe fare parecchia confusione per cui scrivere i css è un ottima
soluzione per avere il codice pulito, pagine più leggere e semplificare eventuali aggiornamenti

css per struttura sito con base grafica e table

Come per i div è ovviamente possibile utilizzare le table per visualizzare una base grafica
le table saranno contenitori invisibili per le parti di grafica che compongono il layout

Questa è una vecchia base grafica di questa sezione e realizzata in questo modo deve essere tagliata
in tre parti ed è un po' difficile da gestire perché la parte che ospita la colonna si suddivide nei vari pezzi
quindi oltre alle table che conterranno le basi grafiche di header, body, footer e quelle da posizionare
negli spazi per i contenuti, serviranno delle table con misure fisse


Se proprio volete realizzare delle basi grafiche semplificate il lavoro il più possibile
realizzando la parte per header e footer ed utilizzare table visibili per il resto


Esempio sito con layout in grafica e table
Come avete visto nell'esempio con due semplici basi grafiche si può realizzare una bella pagina,
uno spazio leggero, funzionale e semplice da gestire inoltre se si presta attenzione ai contenuti,
testo, immagini e varie che si andranno ad inserire sarà navigabile anche con i tablet

Per realizzare il layout ho scritto nei css i parametri per una table contenitore con bordo
una per la cella dell'header e una per il footer inserendo il background-image affinché si visualizzino
le basi grafiche, per la cella del corpo/colonna ho semplicemente impostato il colore di sfondo

Classi per le table contenitori


[...]
/* Table */
table.layout{
border:10px solid #725d0a;
text-align:center;
margin-left:auto;
margin-right:auto
}
td.header {
border:0 none;
background-image: url(url immagine);
text-align:center;
margin-left:auto;
margin-right:auto;
width: ***px;
height:***px
}
td.body {
border: 0px none;
background-color:#f2ead7;
text-align:center;
margin-left:auto;
margin-right:auto;
}
td.footer {
border: 0px none;
background-image: url(url immagine);
text-align:center;
margin-left:auto;
margin-right:auto;
width: ***px;
height:***px
}

Ho evidenziato nel codice le misure in larghezza e altezza delle basi grafiche affinché
si visualizzino correttamente devono essere precise

Di seguito a queste classi si inseriscono quelle necessarie per gli spazi dei contenuti
un piccolo esempio

table.invisibile{
border:0px;
text-align:center;
margin-left:auto;
margin-right:auto
}
td.corpo{
font-family: Garamond;
font-size: 16px;
color: #725d0a;
text-align: center;
}
td.colonna{
border-left:1px dotted #725d0a;
font-family: Garamond;
font-size: 16px;
color: #725d0a;
text-align: center;
width:"30%"
}

Le celle impostate per la struttura faranno da contenitore ad una table invisibile
con righe e celle necessarie in base alle esigenze, il codice nella pagina sarà più o meno così:

<body>
<table class="layout" cellpadding="0" cellspacing="0">
<tr>
<td class="header"> // Contenitore base header
<table class="invisibile" width="100%">
<tr>
<td width="344">&nbsp;</td>
<td width="527">Testo logo/titolo</td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td class="body"> // Contenitore corpo/colonna
<table class="invisibile" width="100%">
<tr>
<td class="corpo" valign="top">Spazio corpo</td>
<td class="colonna" valign="top">Spazio colonna</td>
</tr>
</table></td>
</tr>
<tr>
<td class="footer"> // Contenitore base footer
<table class="invisibile" width="100%">
<tr>
<td>Spazio footer</td>
</tr>
</table></td>
</tr>
</table>
</body>

Le celle dello spazio corpo e colonna cresceranno man mano che si inseriscono
i contenuti, avranno quindi sempre la stessa misura in altezza, sia che si scriva nello spazio corpo
che nella colonna, ovviamente si possono aggiungere altre table con una o più righe e tutte
le celle necessarie per personalizzare come si preferisce il proprio spazio

Realizzate basi grafiche semplici e leggere, che siano in formato .jpg altrimenti
impiegheranno molto tempo per visualizzarsi completamente e l'effetto non sarebbe piacevole

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 ^_^
100%
Voti totali: 1
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 2275 utenti


 H: 
Felice Estate e ...buon sabato!





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...

Miryam
07/06/2024 15:32:30
Ciao Penelope, sono venuta a sbirciare il tuo sito dopo aver visto un tuo commento sul blog di Arwen. Penso proprio che userò qualcuna delle tue fatine per uno dei miei siti prossimamente... Ti terrò informata! Torno a trovarti... Buon weekend!
ೡ Scritto in... Home
 
Sabry
27/05/2024 09:09:32
Grazie per tutto, ti seguo da anni ormai e ammiro molto il tuo lavoro ... ho preso con piacere dei tuoi gadget ♥
ೡ ...commentario
 
Lu
23/05/2024 20:47:56
Grazie mille per il suggerimento, cara Penelope! Ci proverò finché non ci riuscirò. Quando sarà pronto te lo mostrerò.
ೡ Scritto in... Home
 
ೡ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... Home
 
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
 





Gestisci le opzioni di privacy