Sezione del telaio dedicata alla realizzazione e |
||||
..:: CSS table html ::.. Le table sono dei contenitori molto versatili con le quali realizzare cose semplici, ad esempio dei boxper accessori e gadget o più elaborate come il layout di un sito web, si possono creare con righe, colonne o entrambe insieme e personalizzare l'aspetto con svariati parametri di style in linea e nei css In "Table base e style" potrete vedere e leggere quanto sono semplici da "scrivere" e quanti parametri si possono utilizzare per personalizzarle completamente, con lo style in linea però ci sarà parecchio testo/codice che potrebbe creare confusione, inoltre spesso si utilizzano table con gli stessi parametri in più punti di una pagina per cui scrivere delle classi css è sempre l'opzione migliore * Esempio table con bordo personalizzato da style in linea
* Esempio classe css
- Richiamo della classe nella table
Il nome della classe è a gusto personale, si può scrivere qualsiasi parola, purché poi sia riportato uguale nel richiamo * Piccolo consiglio, se si scrivono più classi per le table meglio evitare parole tipo box, box1, ecc, più comodi nomi con indicazioni minime dei parametri inseriti, come nell'esempio "bordo_solid", per una table uguale ma con il testo allineato a sinistra si può scrivere "bordo_solid_left", per un'altra table con bordo solido ma con un colore differente potrebbe essere "bordo_solid_brown", e così via, sarà più pratico utilizzarle nella pagina anche in caso di aggiornamenti e/o modifiche Classe css per la/e cella/e della table Per le celle delle table useremo la classe td.nome_classeescludendo i parametri "margin-left:auto; margin-right:auto;" necessari nella table * Classe per una cella con bordino dotted
- Richiamo della classe nella cella della table
Non c'è un limite alle classi per table e celle che si possono scrivere nei css di una pagina o nel foglio di style esterno per poterle utilizzare in tutte le pagine del sito e ovviamente non c'è limite ai parametri che si possono inserire nelle classi, sia per le table che per le celle Nelle celle di una table si possono richiamare classi differenti e realizzare qualsiasi tipo di contenitore occorre in base al progetto che si vuole sviluppare Ecco un esempio, classe per una table con bordo e sfondo colorato da utilizzare come box news, non ci sono i parametri per il testo (font, colore e misura) perché sono inseriti nelle classi delle celle. I nomi delle classi sono specifici per un box che userei una sola volta nella pagina, ma le classi delle celle si potrebbero richiamare anche in altre table, ovviamente se i parametri e i colori inseriti sono abbinati agli altri utilizzati nel sito, quindi un nome che le descriva un minimo sarebbe più indicato e comodo * In una classe per le celle ho impostato un bordo dotted su tutti i lati e nell'altra solo nella parte inferiore border-bottom
* Codice della table nella pagina
Scrivere i css per lo style di table e celle è molto comodo per gestire al meglio le pagine di un sito web i parametri che si possono inserire sono tantissimi e alcuni si possono utilizzare solo tramite i css Inoltre con html5 le table hanno tag nella struttura che le rende ancora più funzionali, con css3 e le sue classi e pseudo classi diventano anche responsive, ci vorrebbero mille esempi ma sarebbe sempre limitativo perché dipende da cosa si vuole realizzare Quando si lavora ad un progetto web la cosa migliore è consultare i siti di guide ufficiali, ad esempio www.w3schools.com/css/ e cercare il parametro o il tag specifico 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 ^_^
~ Pagina visitata da 5891 utenti |
Segui il telaio su Facebook * Info sezione...Mi farebbe molto piacere la condivisionedei 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 Materiale grafico Gif, mini gif, pixel, immagini, png... |
I vostri messaggi...
|
|
|