Le tabelle (tables) sono uno degli strumenti più
importanti del codice HTML; anzi credo di non esagerare dicendo che
negli anni precedenti la fine del millennio furono le colonne
portanti di buona parte dei più famosi siti Web
istituzionali.
Le tabelle HTML non servono solo per sistemare
graficamente delle informazioni in una tabella ma costituiscono la
base per ila progettazione grafica (layaut) delle
pagine Web.
Le pagine HTML che sono state mostrate fin'ora (Sito 0.0) erano tutte caratterizzate da una struttura "lineare", ricordavano in qualche modo un papiro o una pergamena lunga e stretta, che deve essere srotolata un poco alla volta per essere consultata.
Con l'introduzione delle tabelle cambia tutto, come vedremo
dalla
prossima lezione quando passeremo al Sito 1.0
In questa sesta
lezione vedremo come si possono usare le Tabelle per creare delle
tabelle per organizzare l'informazione di un normale testo. Nella
prossima lezione applicheremo questi nuovi strumenti in modo creativo
per creare degli effetti grafici altrimenti irrealizzabili.
Le tabelle
Le tabelle possono essere create introducendo una coppia di TAG <table> </table>
Chiaramente l'introduzione dei suddetti TAG da sola non produce nessun effetto perché definisce una tabella vuota senza righe e senza colonne e senza formattazione.
Per ottenere un effetto dobbiamo cominciare a riempire lo
spazio introducendo delle righe, delimitate da coppie di TAG
<tr></tr>,
e per ciascuna riga delle colonne, delimitate da coppie di TAG
<td></td>. La struttura risultante dovrà
essere racchiusa da una coppia di TAG
<tbody></tbody>.
Tuttavia ciò non è ancora sufficiente per ottenere l'effetto grafico desiderato. Il codice
<table>1) rosso |
2) verde |
3) blu |
1) rosso |
2) verde |
3) blu |
L'utilizzo delle tabelle è notevolmente più complicato di
quello
degli altri TAG visti in precedenza.
Scrivere una pagina HTML
contenente delle tabelle senza strumenti automatici può comportare
una fatica non indifferente.
KompoZer e le tabelle
Fortunatamente KompoZer offre una serie di procedure facilitate per
la creazione
e la modifica delle tabelle, a cominciare dall'icona Teble nella
barra degli strumenti. Cliccando su quest'ultima, si apre una finestra
che ci offre di creare una nuova tabella, "disegnando" con il
mouse la tabella.
Nel caso volessimo creare una tabella più grande di 6x6 (il massimo consentito dalla maschera "Quickly", basta cliccare sulla linguetta "Precisely" e specificare il numero di colonne (columns) e righe (rows) desiderate.
Ad esempio volendo disegnare la tavola pitagorica specificheremo 11 x 11.
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | |
1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
2 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 |
3 | 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 | 30 |
4 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 |
5 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 |
6 | 6 | 12 | 18 | 24 | 30 | 36 | 42 | 48 | 56 | 60 |
7 | 7 | 14 | 21 | 28 | 35 | 42 | 49 | 56 | 63 | 70 |
8 | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 |
9 | 9 | 18 | 27 | 36 | 45 | 54 | 63 | 72 | 81 | 90 |
10 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
Creata la tabella è possibile modificare le sue caratteristiche interattivamente aggiungendo o cancellando intere righe o colonne o variandone l'ampiezza. All'occorrenza KompoZer consente anche di fondere insieme un gruppo di celle. Chiaramente gli stessi risultati si potrebbero ottenere intervenendo direttamente sul codice HTML; tuttavia, si tratta di modifiche delicate, per cui è facile sbagliare (dimenticando ad esempio di chiudere un TAG) . Si consiglia pertanto di utilizzare se è possibile gli strumenti automatici (come KompoZer) intervenendo manualmente solo quando è indispensabile.
Ricordatevi che le modifiche al codice HTML richiedono la massima attenzione poiché è facile sbagliare perdendo la formattazione; nel qual caso si potrebbe essere costretti a riscrivere la pagina da capo.
Mettiamo tutto insieme: il Sito 1.0