Corso di HTML

Le tabelle I

 

Con le precedenti puntate abbiamo introdotto le nozioni di base per poter creare delle semplici pagine web utilizzando discrete possibilità di formattazione.

Da questa invece cominceremo ad esaminare i veri e propri strumenti del mestiere che utilizzano tutti i WebMaster: le tabelle.

Le tabelle sono in assoluto lo strumento di formattazione più usato. Esse infatti, non vengono solo utilizzate per visualizzare dati di fogli elettronici e database, ma anche per implementare testo su colonne multiple, posizionamento di oggetti in punti particolari della pagina, rientri a margine...

La difficoltà insita nel loro uso è dovuta al fatto che spesso si crea confusione con i tag HTML per descriverle; non che siano complessi, anzi, ma il problema è dovuto al fatto che utilizzando del codice disposto su righe si deve immaginare come apparirà il risultato in formato bidimensionale e con i giusti allineamenti. In queste occasioni si fanno molto apprezzare i molti editor visuali che è possibile reperire in circolazione (anche Freeware).

Vediamo subito qual è la specifica da rispettare per implementare una tabella:

<TABLE attributi>

<CAPTION align= top | bottom | > Intestazione </CAPTION>

<TR attributi> <TH> Titolo </TH> <TD> Cella1.1 </TD> <TD> Cella2.1 </TD> ... </TR>

<TR attributi> <TH> Titolo </TH> <TD> Cella1.2 </TD> <TD> Cella2.2 </TD> ... </TR>

<TR attributi> <TH> Titolo </TH> <TD> Cella1.3 </TD> <TD> Cella2.3 </TD> ... </TR>

...

</TABLE>

Con questa struttura avremmo creato una tabella di 3 righe 2 colonne, vediamo ora brevemente il significato di ogni tag:

I tag <TABLE> e </TABLE> contrassegnano l'inizio e la fine della dichiarazione della tabella.

I tag <CAPTION> e </CAPTION> contrassegnano l'intestazione della tabella.

Il tag <TR> indica l'inizio di ogni nuova riga della tabella.

I tag <TH> e </TH> contrassegnano il titolo di una cella.

I tag <TD> e </TD> designano il contenuto di una cella.

Si noti che quando si implementano le tabelle è molto importante scrivere il codice nel modo più chiaro possibile; non seguite per forza di cose il mio esempio, ma fate in modo di non perdervi nella tabella quando state scrivendo il testo della cella 7.13... o era 13.7, ma il primo numero indica la riga o... Insomma, avete capito.

Analizziamo in modo più approfondito il comportamento di tutti questi tag.

  1. Vediamo innanzitutto la sintassi di <TABLE>:

<TABLE align= left | center | right width= pixel | percent% border= dimBordo cellspacing= dimSpac cellpadding= dimPad>

Questo è il tag più importante perché vi permette di impostare le opzioni di visualizzazione della tabella all'interno della pagina.

Att! L'opzione center di align non è supportata da quasi alcun browser.

L'implementazione di default di align fa si che la tabella sia agganciata al bordo destro e che il testo sia interrotto per tutta l'altezza della tabella. Se si utilizzano left o right, il testo scorre rispettivamente a destra o sinistra della tabella.

pagina.

Per utilizzare un valore in pixel basta far seguire all'attributo width un numero intero senza segno, nel caso si voglia utilizzare una larghezza relativa in percentuale si utilizza sempre un intero senza segno, ma seguito dal simbolo di percentuale ' % '.

Con l'implementazione di default il browser fa si che la tabella sia larga a sufficienza per visualizzare il testo integrale di ogni colonna. In pratica adatta la larghezza di ogni colonna in modo che contenga il testo più esteso delle righe che la compongono; la larghezza risultante della tabella sarà quindi la somma delle larghezza di tutte le colonne così dimensionate.

Alla prossima puntata continueremo la trattazione dei tag delle tabelle ed anche un breve approfondimento sull'utilizzo del tag width.

Intanto iniziate a fare un po di esperimenti con i tag anticipati, vedrete che non sono poi così difficili, solo un po' maleducati perchè scappano sempre qua e la per lo schermo!.

 

Torna all'indice Generale del corso di Corso di HTML di Software Planet