Il sito per imparare gratuitamente a fare pagine Web

Le Tabelle in HTML

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



Andrea Bianchi © www.web-link.it  Primi Passi in HTML con Style - Ver. 1.3.6

 

Le Tabelle.

Nelle lezioni precedenti abbiamo imparato a creare un sito, però ci accorgiamo che con le conoscenze fin qui acquisite non è per nulla semplice riuscire a posizionare testi ed elementi se questi devono essere ordinati ad una certa maniera.

Per fortuna ci sono le tabelle, contrariamente a quanto si potrebbe pensare non servono soltanto per incolonnare e tabulare dati, la struttura di una tabella potrebbe servire anche da "contenitore" per testi, immagini, elementi di moduli ed altro ancora. Lo scopo di una tabella dovrebbe essere solo ed esclusivamente quello di mostrare dati ben ordinati perchè tabulati all'interno delle sue celle, ma nessuno vieta di usarla come telaio ed impaginare il tutto.

Vediamo come si crea una semplice tabella:

<table> è l'elemento che dichiara una tabella, da solo dice poco o niente, necessita di altri elementi, almeno due: <tr> e <td> che si trovano annidati al suo interno e che servono rispettivamente per suddividere la tabella in righe e colonne. Intere tabelle possono poi essere a loro volta contenute all'interno di celle di altre tabelle, da qui il termine nidificate, un po' come succede con quelle scatole cinesi dove una è all'interno di un'altra.

Iniziamo nel modo più semplice possibile, supponendo di volere una tabella con una sola cella, questa la sua definizione:

<table border="1">
<tr>
   <td> qui andrà messo il contenuto della tabella </td>
</tr>
</table>

Questo il risultato grafico:

contenuto della tabella


Da notare che ogni elemento (o tag) che riguarda la tabella necessita del relativo elemento (o tag) di chiusura /, dove <tr> decreta l'inizio di una nuova riga, mentre <td> è la cella vera e propria. Dovendo creare una tabella con due celle affiancate, praticamente due colonne, sarà sufficiente affiancare due elementi <td> all'interno di uno stesso elemento <tr>

<table border="1">
<tr>
   <td> cella sinistra </td><td> cella destra </td>
</tr>
</table>

Questo il risultato:

cella sinistracella destra


Con la stessa logica è possibile aggiungere tutte le righe e tutte le celle che servono, quindi:

<table border="1">
<tr>
   <td> cella alta a sinistra </td><td> cella alta a destra </td>
</tr>
<tr>
   <td> cella bassa a sinistra </td><td> cella bassa a destra </td>
</tr>
</table>

Questo il risultato grafico:

cella alta a sinistracella alta a destra
cella bassa a sinistracella bassa a destra

Definirei questo meccanismo abbastanza semplice e molto logico, quindi facile da capire. Spesso però servono tabelle che non siano regolari come quella appena vista, c'è bisogno di avere colonne e/o righe irregolari.

Questo succede abbastanza spesso quando l'uso della tabelle non si limita alla semplice tabulazione dei dati ma viene adoperato come contenitore di oggetti.

Vediamo allora come creare delle tabelle particolari facendo uso di altri due attributi: rowspan e colspan che servono rispettivamente per occupare più di una sola cella in senso orizzontale (righe) e più di una sola cella in senso verticale (colonne). Dal momento che servono solo per modificare le celle i due attributi sono applicabili al solo elemento (tag) <td>.

Vediamo un esempio: supponendo di dover occupare con una sola cella più colonne di una tabella regolare, adopereremo colspan specificando il numero di colonne da occupare, nel nostro caso potrà essere al massimo 2 (ovvio la nostra tabella in questo esempio è formata da 2 sole colonne):

<table border="1">
<tr>
   <td> cella alto sinistra </td><td> cella alto destra </td>
</tr>
<tr>
   <td colspan="2"> questa cella occupa lo spazio di due celle </td>
</tr>
</table>

Questo il risultato grafico:



cella alto sinistracella alto destra
questa cella occupa lo spazio di 2 celle

Allo stesso modo volendo occupare più righe di una tabella regolare, si farà uso di rowspan specificando il numero di righe da occupare, che nel nostro caso potrà essere al massimo 2 (ovvio la nostra tabella in questo esempio è formata da 2 sole  righe):

<table border="1">
<tr>
   <td rowspan="2"> questa cella occupa 2 righe </td><td> cella alto destra </td>
</tr>
<tr>
   <td> cella basso destra </td>
</tr>
</table>

Questo il risultato grafico:

questa cella occupa 2 righecella alto destra
cella basso destra

Come abbiamo appena avuto modo di vedere combinando questi attributi è possibile ottenere una struttura ottimale, tutto dipende da come e da che cosa vogliamo impaginare.

Vediamo un altro esempio, supponendo di volere un tipo di impaginazione dati in stile giornale quotidiano: testata, colonne e piede pagina; questo il codice:

<table border="1">
<tr>
<td colspan="3" align="center">testata pagina</td>
</tr>
<tr>
<td>colonna 1 </td><td>colonna 2 </td><td>colonna 3 </td>
</tr>
<tr>
<td colspan="3" align="center">piede pagina</td>
</tr>
</table>

questo il risultato:

testata pagina
colonna 1 colonna 2 colonna 3
piede pagina

Tutto il testo inserito all'interno degli elementi <td> seguirà l'impaginazione dettata dalla struttura della tabella stessa, la tabella in questo modo risulta essere dinamica, cioè modificherà le proprie dimensioni adattandosi perfettamente alla quantità di testo inserito nelle celle:

testata pagina
colonna 1 inserimento di testo casuale al solo scopo dimostrativo, notate come questo torna a capo da solo e come allunga ed allarga la tabella stessa. colonna 2 colonna 3 con meno testo della colonna 1
piede pagina

Il bordo in alcuni casi potrebbe risultare fastidioso, oppure per qualche strano motivo lo si potrebbe preferire più vistoso, uno degli attributi dell'elemento <table> è proprio border che se impostato a zero non produce alcun bordo, viceversa è possibile specificarne lo spessore in pixel. Questo sotto un esempio con bordo a zero:

<table border="0">
testata pagina
colonna 1 testo testo testo testo testo testo testo testo testo colonna 2 testo testo testo testo testo testo testo testo testo colonna 3 testo testo testo testo testo testo testo testo testo
piede pagina

Mentre questo, lo stesso esempio, con bordo a 5:

<table border="5">
testata pagina
colonna 1 testo testo testo testo testo testo testo testo testo colonna 2 testo testo testo testo testo testo testo testo testo colonna 3 testo testo testo testo testo testo testo testo testo
piede pagina


<table style="border: outset 5px #cccccc;">
testata pagina
colonna 1 testo testo testo testo testo testo testo testo testo colonna 2 testo testo testo testo testo testo testo testo testo colonna 3 testo testo testo testo testo testo testo testo testo
piede pagina

Oltre al bordo è possibile specificare quanto spazio lasciare fra le singole celle: cellspacing ed anche quanto spazio lasciare fra il bordo e i dati contenuti all'interno della singola cella: cellpadding. Se non viene specificato alcun valore, i due attributi assumono come valore di default 2.

<table border="1" cellspacing="10" cellpadding="8">
testata pagina
colonna 1 testo testo testo testo testo testo testo testo testo colonna 2 testo testo testo testo testo testo testo testo testo colonna 3 testo testo testo testo testo testo testo testo testo
piede pagina

<table style="border: solid 1px #cccccc; margin: 10px; padding: 8px;>
testata pagina
colonna 1 testo testo testo testo testo testo testo testo testo colonna 2 testo testo testo testo testo testo testo testo testo colonna 3 testo testo testo testo testo testo testo testo testo
piede pagina

E' anche possibile avere uno sfondo colorato a tinta unita o un motivo grafico. Gli attributi da adoperare sono: bgcolor per il colore a tinta unita, o background per un'immagine grafica valida (gif, jpg, png) da usare come sfondo. Valgono praticamente le stesse regole che vedremo per l'elemento body più avanti.

Ovviamente laddove si adoperasse un colore a tinta unita non sarebbe possibile adoperare anche uno sfondo grafico e viceversa. Se inseriti all'interno dell'elemento <table> avranno effetto su tutta la tabella, ma è possibile adoperare colori o sfondi diversi per ogni singola cella, in questo caso invece di applicare gli attributi al tag <table> si applicano al tag cella <td>.

<table border="1">
<tr>
<td colspan="3" bgcolor="Red">testata pagina</td>
</tr>
<tr>
<td bgcolor="Lime">colonna 1 </td>
<td bgcolor="Silver">colonna 2 </td>
<td bgcolor="Yellow">colonna 3 </td>
</tr>
<tr>
<td colspan="3" bgcolor="Aqua">piede pagina</td>
</tr>
</table>


testata pagina
colonna 1 testo testo testo testo testo testo testo testo testo colonna testo testo testo testo testo testo testo testo testo colonna 3 testo testo testo testo testo testo testo testo testo
piede pagina


Facendo uso dei css gli attributi da adoperare sono: background-color per il colore a tinta unita, o background-image per un'immagine grafica valida (gif, jpg, png) da usare come sfondo. Valgono praticamente le stesse regole che vedremo per l'elemento body più avanti.

<table border="1">
<tr>
<td colspan="3" style="background-color: Red;">testata pagina</td>
</tr>
<tr>
<td style="background-color: Lime;">colonna 1 </td>
<td style="background-color: Silver;">colonna 2 </td>
<td style="background-color: Yellow;">colonna 3 </td>
</tr>
<tr>
<td colspan="3" style="background-color: Aqua;">piede pagina</td>
</tr>
</table>


testata pagina
colonna 1 testo testo testo testo testo testo testo testo testo colonna testo testo testo testo testo testo testo testo testo colonna 3 testo testo testo testo testo testo testo testo testo
piede pagina

Gli attributi supportati dalle tabelle e dalle sue celle sono molti altri: align con i parametri: right, left, center, justify che servono per allineare il contenuto delle celle rispettivamente a: destra, sinistra, centro, giustificato.

width con i parametri espressi in pixel o in % per fissare le dimensioni in larghezza.

Per tutti gli altri, che al momento servirebbero soltanto a confondervi, potete fare riferimento alla mia guida html.

Con questa lezione abbiamo imparato a tabulare o impaginare gli elementi di una pagina web facendo uso di tabelle.

Nella prossima lezione vedremo come inserire i metacomandi in head per dare informazioni al nostro browser e ai motori di ricerca on line.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi