Pagina aggiornata... Lunedì, 08 Dicembre 2025 * Tempo di caricamento 0.92 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 ^_^
0%
Voti totali: 0
Rating... 1





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


 H: 
Buon Autunno !





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

Natale menu
..Natale menu..

ೡ Istruzioni per prelevare e postare
nel proprio spazio accessori e gadget del telaio

Sito o forum
Blogger-Blogspot

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

filod'arianna
14/12/2025 09:32:05
Ciao Penelope, ho preso un countdown Grazie mille per averli messi a disposizione, sono deliziosi! Ne userò più d'uno sicuramente:-)
ೡ Scritto in... Countdown stagioni e feste
 
Elise
13/12/2025 18:12:05
Ciao carissima Penelope, quante meravigliose creazioni di Natale che hai realizzato, ne hopresa una, il caminetto con le calze, STUPENDO!!!!!Grazie tesoro un abbraccio grande e Buone Feste a te e tutta la tua famiglia.Elise
ೡ Scritto in... Decori pagine Natale
 
Grazia
06/12/2025 16:01:26
Ciao carissima Penelope💓 Wow bellissime le tue novità natalizie! A me tutto ok, ti ringrazio di essere passata nel Taccuino 🥰 Lascio un fortissimo abbraccio a te e ai ragazzi. A presto carissima 💖
ೡ Scritto in... Home
 
ೡPenelope ♥
04/12/2025 02:20:20
Cara filod'arianna sistemato il link un abbraccio
ೡ Scritto in... *Amici del telaio...*
 
filod'arianna
03/12/2025 11:57:26
Ti devo chiedere una gentilezza Penelope ^_^ ho modificato il dominio, potresti correggere il link del mio banner da librandosi.forumfree.it - a librandositralepagine.forumfree.it ? 🙏
ೡ Scritto in... *Amici del telaio...*
 
filod'arianna
03/12/2025 10:40:55
Ciao carissima , ho preso un decoro per l'home natalizia ♥
ೡ Scritto in... Decori pagine Natale
 
ೡPenelope ♥
29/11/2025 18:34:13
Grazie a te carissima Marilinc
ೡ Scritto in... Settimanelli natalizi
 
ೡPenelope ♥
29/11/2025 18:30:37
Merci beaucoup chère Maleah, vous trouverez ici des modèles prêts à l'emploi pour Blogspot [Link] e ne peux pas réaliser de travaux sur commande, désolé
ೡ Scritto in... html e script Tutorial...
 
MARILINC
29/11/2025 08:59:51
Grazie infinite meravigliosi c'è solo l'imbarazzo della scelta!
ೡ Scritto in... Settimanelli natalizi
 
Maleah
26/11/2025 13:58:21
Bonjour de France,Je viens de découvrir ton superbe blog et suis très admirative pour l'excellent travail que tu fais.Je ne sais pas si tu acceptes de modifier des blogspots et tente ma demande d'aide :Je suis une créatrice depuis des années déjà mais j'avoue je suis NULLE quant à la mise en place " design" de mon blog.Accepterais-tu de me réaliser un design pour Noël ?Cela me comblerait de joie, mais si tu ne peux pas je comprendrais parfaitement ta décision.Merci de ta réponse & encore UN IMMENSE BRAVO pour tes diverses créations.Amitié virtuelle.Maleah-Sunsunmaleah@gmail.com
ೡ Scritto in... html e script Tutorial...