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

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.

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.