|
|
|
|
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TabelleIn HTML le tabelle sono degli strumenti molto utili per l'impaginazione e la formattazione dei contenuti delle pagine web, se utilizzate in modo corretto spesso sono la soluzione di molte problematiche e possono dare un aspetto grafico più gradevole al contenuto della pagina e all'organizzazione di dati, come schede prodotto, elenchi, ecc. La tabella può essere sia visibile che invisibile, fissa oppure adattarsi ad una pagina ed essere formattata in varie maniere; si tratta di un elemento molto flessibile.
Il Tag "<table>"La sintassi per creare una tabella di 2x2 celle è questa:
Il risultato nel browser è questo:
Analizziamo questo codice. I Tag per l'inizio e la fine della tabella sono "<table>...</table>", in mezzo a questi ci sono i Tag per la definizione di righe e colonne, ma vediamo gli attributi principali della tabella. L'attributo "width" ne determina la larghezza in pixel, se omesso la tabella si allargherà o restringerà a seconda del contenuto, è possibile inoltre specificare una larghezza della tabella in percentuale, se per esempio scriviamo come valore "70%" la tabella si dimensionerà automaticamente al 70% dello spazio disponibile adattandosi alla larghezza della finestra del . E' possibile anche specificare la proprietà "height" che ne specifica l'altezza, ma si consiglia di non usarla. L'attributo "border" specifica la larghezza del bordo, se come valore si da zero allora la tabella risulterà completamente trasparente però manterrà la forma e il contenuto, più si aumenta questo valore e più si otterrà un bordo ampio, come preimpostazione il bordo avrà un aspetto rialzato, ma anche i bordi possono essere colorati. Gli attributi "cellpadding" e "cellspacing" specificano rispettivamente lo spazio che c'è fra l'interno della cella e il proprio contenuto e lo spazio che c'è fra una cella e l'altra. Per speficificare un colore di sfondo globale per la tabella basta aggiungere la proprietà "bgcolor" seguito da un valore esadecimale per il colore, in questo modo: bgcolor="#0000ff", e la tabella si colorerà tutta con quel colore. Per specificare il colore del bordo chiaro bisogna aggiungere la proprietà "bordercolorlight" seguito da un valore esadecimale per il colore, la stessa cosa vale per il bordo scuro con la proprietà "bordercolordark" Vediamo un esempio di codice per tutto ciò:
Il risultato sarà:
E' possibile inoltre specificare un'immagine di sfondo, proprio come nel tag "<body>", in questo modo: background="sfondo.jpg"; un esempio pratico:
risultato:
ll Tag <tr>Il Tag "<tr>...</tr>" specifica l'inizio e la fine di una riga, ogni volta che avremo bisogno di una nuova riga bisognerà aggiungere questi due Tag fra "<table>...</table>", ma non è possibile inserire alcun contenuto in mezzo ai Tag che specificano la riga in quanto c'è comunque bisogno di specificare la colonna, anche se questa fosse unica.
Il Tag <td>Il Tag "<td>...</td> specifica una colonna ed è proprio fra questi due che vengono inseriti i contenuti, praticamente tutti gli altri Tag costituiscono solo informazioni sulla struttura globale della tabella. Il contenuto di questo tag può essere qualsiasi cosa: un testo formattato e colorato, delle immagini, paragrafi o altre tabelle. Può anche essere colorato, avere degli sfondi grafici ed essere allineato. Vediamo un esempio di tutto ciò:
Il risultato sarà:
Il contenuto del Tag "<td>" può anche essere allineato verticalmente, utilizzando la proprietà "valign" assegnando i valori "top" (sopra), "middle" (centro) e "bottom" (sotto), come nell'esempio:
Risultato:
Tabelle dentro altre tabelle E' possibile inserire tabelle dentro ad altre celle di una tabella preesistente, in modo molto semplice, basta reinserire il codice di un'intera tabella all'interno dei Tag "<td>...</td>", ad esempio:
Il risultato è:
Unione di celleLe celle di una tabella possono essere unite, sia in senso verticale che orizzontale, per creare impaginazioni particolari, questo si ottiene con gli attributi "rowspan" per unire verticalmente e con "colspan" per unire orizzontalmente. Ma vediamo un esempio pratico:
si ottiene
|
|||||||||||||||||||||||||||||||||||||||||||||
Powered by PM Digital Studio P.Iva 01467900435 |
