Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.003 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 ^_^

💻 ✨ Apprezzato
20%
Voti totali: 1
Rating... 1




Commentario...

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









~ Pagina visitata da 2366 utenti





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 e utilità pagine web



html tag scrittura pagine web





Script per pagina



Script per gadget




Preleva anche tu una tag Help donna

Aiutami a diffondere il più possibile informazioni
utili alle donne vittime di abusi... Grazie!



Link del telaio...

ೡ Il telaio di Penelope
☆ Template webset e blog
☆ Un sito su AlterVista
☆ Gif & co...





I vostri messaggi...

ૡPenelope ♥ ~ 14/09/2026 22:32:30
Cara Filo d'arianna un po' di anni fa ho realizzato qualche grafica per ForumFree ed era un delirio non so se è ancora così ma la grafica si componeva con decine di piccole immagini, davvero tanto lavoro nemmeno gratificante purtroppo, per quanto riguarda i tutorial, sono una maniaca di html, php e js ma sulla gestione di un forum non saprei da dove partire Un abbraccio forte
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 14/09/2026 18:34:20
Carissima Filo d'arianna grazie alla tua segnalazione ho risolto un problema nel commentario purtroppo per evitare spam e messaggi sgradevoli avevo impostato un eccesso nei controlli, ripristinato, ora si può commentare e mettere url del proprio spazio senza problemi grazie infinite cara un abbraccio forte forte
ૡScritto in Home
filod'arianna ~ 14/09/2026 07:41:37
Ciao Penelope! Ho preso il Settimanello micioso:-DL'ho inserito all'interno della sezione "Appunti" sul mio forum, però ho visto che non si può più linkare qui nei messaggi, non riesco a farti vedere dove l'ho inserito. Ad ogni modo il forum è Librandosi tra le pagine, su forumfree. Un abbraccio a presto!
ૡScritto in Home
filod'arianna ~ 12/09/2026 06:52:57
Hai mai pensato di buttarti nel creare grafica e tutorial per ForumFree? 😂 Sto scherzando, ma solo a metà! Sarebbe fantastico. Ne approfitterei immediatamente
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 11/09/2026 16:56:26
Carissima Filod'arianna ti ringrazio tantissimo è il più bel complimento che si possa riceve! Un abbraccio forte e viva l'autunno!!!
ૡScritto in Blogger Kit Autunno
filod'arianna ~ 10/09/2026 07:03:48
Adoro il colore di Ortensie vorrei un blog su Blogger solo per i tuoi kit e i tuoi accessori:-D Grazie mille per tutto ciò che metti a disposizione carissima 😘N.B. Anch'io non vedevo l'ora che arrivasse un po' di fresco -.-'
ૡScritto in Blogger Kit Autunno
Cris ~ 02/07/2026 19:45:24
Ciao, sono passata per un salutino e per rivedere il tuo sito. Buona serata e buon fine settimana.
ૡScritto in *Amici del telaio...*
DanyGraphic ~ 30/05/2026 15:30:54
Ciao Penny , sempre belle e interessanti le tue pagine .Un abbraccio e buon fine settimana
ૡScritto in Home
Sabry ~ 26/05/2026 21:34:59
Sei unica ♥️
ૡScritto in Info box
Elise ~ 21/05/2026 17:30:40
Riciao visto com'è brava la nostra Grazia?
ૡScritto in Home