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 2522 utenti


 H: 
Buona Primavera e ...buon weekend!





Segui il telaio su Facebook

Privacy Policy Cookie Policy

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

Grazia
09/03/2025 18:13:32
Ciao Penny, sono passata a lasciarti un salutino di buona domenica ed anche a ringraziarti per aver inserito il mio bannerino. Un abbraccio forte ed alla prossima :) Ciaooo
ೡ Scritto in... Home
 
Gabriella
07/03/2025 12:04:36
Ciao Penny, visto che usufruisco spesso delle tue lezioni di codici e html ho preso i tuoi banner ;) Grazie e un abbraccio
ೡ Scritto in... Banner link del telaio ^_^
 
Mamyr
06/03/2025 13:34:06
Ciao Penelope, grazie per questo tuo sito meraviglioso e molto utile, ho prelevatoL'almanacco in table -blu- per inserirlo nel mio blog. Inserirò anche il tuo banner, grazie ancora e buona giornata.
ೡ Scritto in... Almanacco in table
 
Pinalie
03/03/2025 01:38:03
Oh sweet Penelope .. im sorry you can make no comment yet on my pageim still working to make it fit to goi hope end summer it will be done, i hope whoo!i instalt a new clock from you.. love your clocks so much thank you so much again for your lovley giftmy derest greetings ♥♥♥
ೡ Scritto in... Orsetti...
 
Grazia
26/02/2025 09:43:32
Ciao carissima Penelope, come stai? E' da tanto che non ci sentiamo. Qui è sempre tutto meraviglioso! Sono passata a prelevare un tuo banner da inserire nel mio nuovo spazio web, alla fine sono riuscita ad inaugurare quel "famoso" sito statico in cui offro piccole utilità grafico/digitali agli utenti e l'ho chiamato Dreamland...mi ci è voluto un po' ma sono partita col progetto...dai che così magari ci sentiamo più spesso. Ancora complimenti, un abbraccio e sereno proseguimento di giornata ♥
ೡ Scritto in... Home
 
ೡPenelope ♥
18/02/2025 20:27:41
Dear Pinalie thank you so much, I couldn't leave a message in your space, a big hug ♥
ೡ Scritto in... Orsetti...
 
ೡPenelope ♥
18/02/2025 20:16:52
Cara Filo d'arianna ti ringrazio tanto, fammi sapere quando avrai un tuo spazio così da poter ricambiare, una abbraccio forte ♥
ೡ Scritto in... Banner link del telaio ^_^
 
Antonella
13/02/2025 01:00:16
ciao Penelope ho prelevato uno dei tuoi almanacchi e l'ho inserito nel mio blog.Complimenti per il tuo sito sempre ricco e interessante.[Link]
ೡ Scritto in... Almanacco soft
 
Vale
02/02/2025 06:15:22
carinissimi!!♥
ೡ Scritto in... Mini cursori
 
Pinalie
19/01/2025 22:47:05
Deer Penelope i love and instal your sweet little bear Date Time on my pageThank you so much for your work
ೡ Scritto in... Orsetti...