Pagina aggiornata... Giovedì, 02 maggio 2024 * Tempo di caricamento 0.49 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 ^_^
60%
Voti totali: 1
Rating... 4





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


 H: 
Buon Autunno 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...

Elise
26/10/2025 19:43:22
Ciaoooo carissima Penelope,ho preso una fatina per il mio blog.Sei bravissima come sempre e ti ringrazio tanto.Un abbraccioneElise
ೡ Scritto in... Romantiche fate...
 
JamieSilverJsC
26/10/2025 19:08:12
Buon sera Amica!! Bellissima tuo sito!! Buon domenica
ೡ Scritto in... Home
 
filod'arianna
25/10/2025 07:27:02
Buongiorno! Ho adottato un pixel ❣😘
ೡ Scritto in... I love Winter...
 
Frann
24/10/2025 21:22:26
Ciao cara Penelope...come stai?Sono passata solo per farti sapere che ho aggiunto una casella messaggi al mio blog. Sentiti libera di lasciare un messaggio lì se vuoi :) Un abbraccio, cara.
ೡ Scritto in... Home
 
ೡPenelope ♥
24/10/2025 15:43:49
Grazie cara Veronica, perdonami se ti rispondo qui ma non sono registrata nel forum e non posso lasciare commenti ^_^ mi fa molto piacere ti piacciano le cosine che realizzo, un abbraccio forte
ೡ Scritto in... Home
 
Veronica
23/10/2025 14:37:12
Ciao ti o preso un datario con saluto
ೡ Scritto in... Pucciosi!
 
Veronica
23/10/2025 08:18:29
Ciao preso un tu adottino x il forum
ೡ Scritto in... Home
 
Cleo
22/10/2025 07:58:14
sempre ricco il tuo sito buona giornata tesoro un abbraccio
ೡ Scritto in... Home
 
Veronica
21/10/2025 17:37:12
Ciao preso uno x il mio Blog troppo bellini
ೡ Scritto in... I love Winter...
 
Grazia
20/10/2025 17:09:30
Dimenticavo il link ♥
ೡ Scritto in... Home