Ciao a tutti !
Negli ultimi giorni ho notato che ci sono state più discussione aperte su problmei con tabelle annidate, personalizzazione bordi e sfondi, applicazione dei CSS e cose varie .
Siccome ho una attimo di tempo, sono andato a leggere qualche articolo su come personalizzare e rendere più utili e "malleabili" le tabelle .
Inizierò con una breve introduzizone su come si creano e le proprietà principale, poi passerò ad un pò di esempi di annidamento, cambiamento colori e font ed infine l'applicazione dei CSS e classi alle tabelle .
CREARE TABELLE
Spegerò in modo generale su come si creano delle semplici tabelle prima di passare ad esempi più complicati ( si fa per dire complicati ).
I tag che delimitano una tabella sono <table> e quello di chiusura naturalmente </table>.
Una tabella è composta da righe ( le celle orrizontali ) e le colonne ( celle verticali ) , con un disegno :
In una tabella si creano prima le righe poi le colonne :codice:righa 1 | colonna 1 | colonna 2 | colonna 3 | righa 2 |.................................... righa 3 |....................................
Le righe si creano con :
Mentre le colonne così :codice:<table width="100%"> <tr> ..... </tr> </table>Naturalmente width="100%" sta a significare la larghezza della tabella che può essere assegnata in percentuale o in misura fissa in pixel .codice:<table width="100%"> <tr> <td> ..... </td> </tr> </table>
Naturalmente le misure in percentuale fanno si che la tabella si adatti alla larghezza del browser dell'utente.
Il contenuto della cella si inserisce tra <td> e </td> , in un esempio :
Ad una tabella si possono modificare molte parti e "opzioni" senza l'ausiglio dei CSS :codice:<table width="100%"> <tr> <td width="100%">Tabella con una cella e una riga </td> </tr> </table>
border="x" = determina le dimensioni del bordo, dimensioni che sono in pixel e se si impostano a 0 non si vedranno
cellspacing="x" = detremina lo spazio che intercorre tra una cella e l'altra di una tabella. Se impostata a 0 idem come prima.
cellpadding="x" = detremina lo spazio interno di una cella , ovvero la spaziatura interna di una cella
bordercolor="#xxxxxx" = imposta il colore del bordo della tabella. Bsogna però specificare un fatto strano che acade con questo attributo:
1. se abbiamo una tabella così:
con la spaziatura tra celle uguale a 0 il bordo sarà singolo di bordo 1 e tutte le celle avranno bordo 1 e del colore impostato .codice:<table border="1" width="100%" bordercolor="#00FF00" cellspacing="0" cellpadding="0">
2. se abbiamo una tabella così:
con la spaziatura tra celle uguale a 2 , allora avremmo un bordo doppio : uno che fa da "controno" alla tabella , un'altro che fa da bordo ad ogni cella .codice:<table border="1" width="100%" bordercolor="#00FF00" cellpadding="0" cellspacing="2">
Da ricordarsi che di default una tabella senza specificare cellspacing e cellpadding , questi due attributi sono impostati a :
Da ricordari !codice:cellpadding="1" cellspacing="2"
FORMATTARE TABELLE CON I CSS
Ora spigo come formattare le tabelle con l'uso dei CSS o style per ottenetere ottimi effetti per i propri siti
Per modificare la larghezza della tabelle possimao nei css fare :
dove si possono assegnare questi attributi :codice:table {table-lyout : xxx; }
- auto: il layout della tabella viene definito automaticamente dal browser.
- fixed : le regole di presentazione sono quelle impostate nei CSS
Per stabilire come trattare i bordi si usa :
Dove possiamo assegnare questi valori :codice:table { border-collpse: xxx ; }
- collapse: Se viene impostato un bordo, le celle della tabella lo condividono.
- separate: Se viene impostato un bordo, ogni cella ha il suo, separato dalle altre. Lo spazio tra le celle e tra i bordi si imposta con la proprietà border-spacing.
Per impostare con i CSS la spaziatura tra celle :
Questo attributo assegna la spaziatura tra celle come cellspacing="x" e gli si assegna un valore numerico in px .codice:table {border-spacing: xxx ; }
Una cosa utile è quella nel caso in cui avremmo una tabella con una cella vuot, per evitare problemi con l'impaginazione . Per evitare sorprese utilizziamo :
Dove possiamo assegnare questi valori :codice:table { empty-cells: xxx ; }
- show: Mostra i bordi della cella.
- hide: I bordi non vengono mostrati e apparirà solo uno spazio vuoto.
Possimao inserire in una cella pure "" che fa la funzione di una spazio e serve per non lasciare la tabella vuota e inconvenienti scomodi !
Ora passiamo alla formattazione con i colori dei bordi e font :
Per la formattazione del bordo mi soffermo e specifico i vari tipi di bordi che possono essere applicati :codice:table { color : #ffffff; // colore del font della tabella font-family: Arial; // il tipo di carattere della cella font-size: 10 px; // la grandezza della font font-style: italic; // lo style del carattere che puà essere italic, bold, normal background-color: #008000; // il colore di sfondo della tabella border: 1 solid #000000; // il tipo di bordo della tabella }
- ridge : in rilievo
- dotted : punteggiato
- dashed : tratteggiato
- groove : incassato
- inset : interno
- outset : esterno
- double : doppio
I valori che applicate , se nei CSS li applicate a table, saranno impostati alla tabella, se al tr alle colonne , se ai td alle righe :
ovvero si può modificare il tipo di una righa o di una tabella con :
oppure ad una righa :codice:tr { color :#000000; background-color: #008000; }
I CSS alla tabella possono essere applicati sia nello <style> che viene messo nell'head oppure in linea alla tabella , ovvero così:codice:td { color :#006600; background-color: #ffffff; }
e otteremo lo stesso rislutato che con i css sopra secificati !codice:<table border="1" width="100%" style="color: #ffffff; font-family: Arial; font-size: 10 px; font-style: italic; background-color: #008000; border: 1 solid #000000"> <tr> <td width="100%">..</td> </tr> </table>
Se usiamo i CSS nel head tutte le tabelle saranno con i style che sono specificati nel css principale; mentre se vogliamo una tabella di un tipo e una di un'altro useremo le classi così:
e le tabelle così :codice:table.1 { border: 1 solid #000000; } table.2 { border: 1 solid #ffffff; }
Stesso discorso per celle e righe .codice:<table border="1" width="100%" class="1"> <tr> <td width="100%"></td> </tr> </table> <table border="1" width="100%"> <tr> <td width="100%" class="2"></td> </tr> </table>
ANNIDAMENTO TABELLE
L'annidamento di tabelle può essere molto utile per centrare una tabella nella pagina oppure per tipi di paginazioni particolari .
L'annidamento consiste nel inserire una tabella in un'altre:
una tablella principale fa la funzione di contenitore alla seconda che sarà quella con il contenuto.
Il codice :
Non è molto difficile ma può essere molto utile usarla !codice:<table border="1" width="100%"> <tr> <td width="33%">tabella contenitore</td> <td width="33%"> <table border="1" width="100%"> <tr> <td width="100%">tabella contenuta</td> </tr> <tr> <td width="100%">tabella contenuta</td> </tr> <tr> <td width="100%">tabella contenuta</td> </tr> </table> </td> <td width="34%">tabella contenitore</td> </tr> </table>
Credo di aver terminato, se avete problmei o non capite avvertite che provvederò a cercare di chiarirvi le idee .
Per commenti e suggerimenti su eventuali errori sono ben accetti.
Chiedo scusa per evneutali errori di battitura , non prendetemi a randellate!
Ciao e alla prossima !
Rispondi quotando
PIERCHI 
