Pagina aggiornata... Giovedì 01 Gennaio 1970 * Tempo di caricamento 0.81 secondi
Link navigazione : Home telaioHome ~ Tutorial ~ Html » CSS o foglio di style - Table

..:: CSS o foglio di style - Table ::..

Prima di leggere questa guida, se non lo avete già fatto, iniziate con -> CSS - basi

Le table sono dei contenitori molto versatili con le quali realizzare semplici accessori e gadget
come l'intera struttura del nostro sito web, utilizzando il numero di colonne e di righe che
ci occorrono per i vari progetti, personalizzando la visualizzazione di ogni aspetto.

Scrivere i vari parametri una sola volta nei css di tutte le table che useremo nelle nostre pagine,
ci farà risparmiare molto tempo ed il codice ovviamente, sarà pulito e ordinato

- Facciamo un esempio pratico, questo è il codice di una table con bordo
nella quale i vari parametri sono scritti in linea

<table style="border:3px solid #826748; margin-left:auto; margin-right:auto; text-align: center; font-family:Tahoma; font-size: 12px; color: #826748" cellpadding="2" cellspacing="2" width="400">
<tr>
<td>&nbsp;</td>
</tr>
</table>

Un bel po' di roba... potremmo aver bisogno di table con molti più parametri, oltre
che doverne aggiungere anche per la cella e postare la stessa table su più punti della pagina,
semplifichiamoci il lavoro scrivendo nei nostri css una classe apposita.

Di seguito ai parametri già scritti per il body, i link e i titoli aggiungiamo:

[...]

<style type="text/css">

[...]

table.bordo_solid{
border:3px solid #826748;
text-align:center;
font-family : "Tahoma";
color : #826748;
font-size : 12px;
margin-left:auto;
margin-right:auto;
}
</style>

Per richiamarla nella pagina scriveremo:

<body>

<table class="bordo_solid" cellpadding="2" cellspacing="2" width="400">
<tr>
<td>&nbsp;</td>
</tr>
</table>

</body>

- Il nome per la classe sceglietelo come vi rimane più semplice, io qui ho usato bordo_solid
ma si può scrivere qualunque cosa purché poi sia riportato uguale nel richiamo.

Inseriamo nella table il nome della classe che abbiamo stabilito e aggiungiamo gli altri
parametri che ci occorrono, nel menu trovi una guida completa alle varie personalizzazioni delle table.

Lo stesso discorso vale per le celle delle table ovvero potremmo inserire classi di tutti
i tipi, solo che al posto di table.nome_classe scriveremo td.nome_classe
e toglieremo i parametri margin-left:auto; margin-right:auto; necessari nella table

- Quindi per una cella con bordo scriveremo:

[...]

<style type="text/css">

[...]

td.bordo_solid{
border:3px solid #826748;
text-align:center;
font-family : "Tahoma";
color : #826748;
font-size : 12px;
}

</style>

Per richiamarla nella pagina scriveremo:

<body>

<table class="bordo_solid" cellpadding="4" cellspacing="4" width="300">
<tr>
<td class="bordo_solid">&nbsp;</td>
</tr>
</table>

</body>

Possiamo scrivere tutte le classi per table e celle che vogliamo e richiamare le stesse su più
punti della pagina, con bordi totali, parziali o invisibili, realizzare dei box con uno sfondo/immagine
per accessori o menu oltre che all'intera struttura del sito sia direttamente con le table
che come contenitori per postare una base grafica.

E' possibile richiamare una classe per una table e per una o più celle della stessa,
un piccolo esempio, scriviamo una classe per una table che abbia un bordo e uno sfondo colorato,
e scriviamo anche classi per due celle con bordi diversi e parziali...

[...]

<style type="text/css">

[...]

/* Table con bordo e sfondo/colore */

table.box{
border:3px solid #826748;
background-color :#f9ebec;
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
margin-left:auto;
margin-right:auto;
}

/* Cella con bordo dotted */

td.box1{
border:1px dotted #826748;
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
}

/* Cella con bordo inferiore */

td.box2{
border-bottom:1px dotted #826748;
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
}

</style>

Per richiamarla nella pagina scriveremo:

<body>

<table class="box" cellpadding="8" cellspacing="8" width="500">
<tr>
<td class="box1">&nbsp;</td>
</tr>
<tr>
<td class="box2" height="50">&nbsp;</td>
</tr>
</table>

</body>

- Il risultato...

- Table con css
Immagina quanto codice hai risparmiato di scrivere...

Spero di esser stata chiara fin qui, nel menu trovate la guida per scrivere i parametri per table
con le quali realizzare un sito, sia direttamente in table che come contenitori per la grafica

Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


ೡ Dai un giudizio a questa guida... Grazie ^_^



100%
Voti totali: 2
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 5351 utenti


 H: 
Buon Autunno e ...buon weekend!





* 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
con l'hosting free più famoso...



Gif  & co... Penelope ♥


Pagina Facebook
del telaio...




 

I vostri messaggi...

Penelope
27/09/2023 17:12:31
Ciao Calcifer grazie infinite anche io sono felice di essere tornata
ೡ Scritto in... 'https' Hyper Text Transfer Protocol Secure
 
Calcifer
27/09/2023 15:08:42
AAh, che bello vederti di nuovo attiva! :) Aspettavo da anni il tuo ritorno ♥
ೡ Scritto in... 'https' Hyper Text Transfer Protocol Secure
 
Cleo
25/09/2023 17:58:11
ho fatto un giretto e' tutto ancora piu' bello un abbraccio e grazie per il banner inserito un abbraccio
ೡ Scritto in... *Amici del telaio...*
 
Gabriella
25/09/2023 12:21:45
Bentornata Penelope , ho prelevato un tuo bellissimo bottone. Grazie di cuore !
ೡ Scritto in... Bottoni top pagina
 
Grazia
24/09/2023 19:16:50
Ciao Penny cara, nel messaggio precedente ho omesso di scrivere quella che sembra una ovvietà, ma la scrivo lo stesso: il tuo sito è fantastico, come sempre, la maestra dei codici è tornata 😄😄😄😄 Un abbraccio e serena domenica sera di cuore ❤️
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
21/09/2023 10:24:25
Carissima Penelope, è una gioia immensa leggerti di nuovo! Sono felicissima tu sia tornata online, hai fatto benissimo, gli hobby aiutano tantissimo a risollevare l'animo ...brava! Oltre al mio piccolo blogghino per esempio io mi sto dedicando ai disegni fatti a mano e mi rilassano tantissimo! Ti cerco su Fb così ci sentiamo, se ti fa piacere, più spesso...ti abbraccio immensamente cara amica, a presto!
ೡ ...commentario
 
Cleo
20/09/2023 16:39:32
Ciao tesoro i miei banner sono qui [Link]
ೡ Scritto in... Il telaio di Penelope...
 
Cleo
20/09/2023 12:48:48
Bentornata e' bellissimo rivedere il tuo Sito on line
ೡ ...commentario
 
Cleo
20/09/2023 11:37:11
prendo il tuo link sul mio sito c'è gia lo metto sul portale del forum passa a trovarmi ciccia
ೡ Scritto in... Banner link del telaio ^_^
 
mari-ele
20/09/2023 08:47:54
Ciao Penelope, sono felicissima del tuo ritorno, ci sei mancata tantissimo, un grosso in bocca al lupo per tutto! Un abbraccio!
ೡ Scritto in... *Amici del telaio...*
 

Referer...