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 :

codice:
righa 1 | colonna 1 | colonna 2 | colonna 3 |
righa 2 |....................................
righa 3 |....................................
In una tabella si creano prima le righe poi le colonne :
Le righe si creano con :

codice:
<table width="100%">
 <tr>
    .....
 </tr>
</table>
Mentre le colonne così :
codice:
<table width="100%">
 <tr>
 <td>
    .....
 </td>
 </tr>
</table>
Naturalmente width="100%" sta a significare la larghezza della tabella che può essere assegnata in percentuale o in misura fissa in pixel .
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 :

codice:
<table width="100%">
  <tr>
    <td width="100%">Tabella con una cella e una riga </td>
  </tr>
</table>
Ad una tabella si possono modificare molte parti e "opzioni" senza l'ausiglio dei CSS :

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ì:
codice:
<table border="1" width="100%" bordercolor="#00FF00" cellspacing="0" cellpadding="0">
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 .

2. se abbiamo una tabella così:
codice:
<table border="1" width="100%" bordercolor="#00FF00" cellpadding="0" cellspacing="2">
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 .

Da ricordarsi che di default una tabella senza specificare cellspacing e cellpadding , questi due attributi sono impostati a :
codice:
cellpadding="1"
cellspacing="2"
Da ricordari !

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 :

codice:
table {table-lyout : xxx; }
dove si possono assegnare questi attributi :
- 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 :

codice:
table { border-collpse: xxx ; }
Dove possiamo assegnare questi valori :
- 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 :

codice:
table {border-spacing: xxx ; }
Questo attributo assegna la spaziatura tra celle come cellspacing="x" e gli si assegna un valore numerico in px .

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 :

codice:
table { empty-cells: xxx ; }
Dove possiamo assegnare questi valori :
- 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 :

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 
}
Per la formattazione del bordo mi soffermo e specifico i vari tipi di bordi che possono essere applicati :

- 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 :
codice:
tr {
color :#000000;
background-color: #008000;
}
oppure ad una righa :
codice:
td {
color :#006600;
background-color: #ffffff;
}
I CSS alla tabella possono essere applicati sia nello <style> che viene messo nell'head oppure in linea alla tabella , ovvero così:

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>
e otteremo lo stesso rislutato che con i css sopra secificati !

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ì:

codice:
table.1 {
border: 1 solid #000000;
}
table.2 {
border: 1 solid #ffffff;
}
e le tabelle così :
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>
Stesso discorso per celle e righe .

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 :
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>
Non è molto difficile ma può essere molto utile usarla !

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 !