Corso di HTML

Le tabelle III

 

Concludiamo, in questo articolo, la trattazione delle tabelle ed esaminiamo i tag che rimangono dalle scorse puntate.

  1. Definizione di una cella di titolo tramite il tag logico <TH> ( Table Header ).
  2. La sintassi di <TH> è la seguente:

    <TABLE>

    <TR> <TH attributi> Titolo della cella </TH>

    </TABLE>

    Come già detto <TH> è un tag logico e quindi la sua implementazione effettiva può variare da browser a browser, l'effetto comunque è quello di mettere in rilievo il testo racchiuso tra i tag di apertura e chiusura.

    Solitamente ciò viene realizzato ponendo il testo al centro ed enfatizzandolo con un carattere in grassetto.

    Si noti che il tag di chiusura non è obbligatorio, anche se è consigliabile utilizzarlo per aumentare la leggibilità del codice ( non al browser, ma ai comuni mortali che lo dovranno leggere e correggere !! ).

    Non sto qui a descriverne gli attributi perché sono i medesimi del tag seguente: <TD>

    1. Definizione del contenuto di una cella <TD>

    La sintassi di <TD> è la seguente:

    <TABLE>

    <TR> <TD attributi> Contenuto della cella </TD>

    </TABLE>

    Anche per <TD> come per <TH> non è necessario il tag di chiusura, ma come al solito lo consiglio per maggiore chiarezza. Qui 'Contenuto della cella' è l'effettivo contenuto della cella che il browser visualizzerà nella tabella.

    Esso può essere praticamente tutto il possibile ed immaginabile: testo, link, immagini, applet, script, e perfino altre tabelle. Tutto ciò a dimostrazione che le tabelle sono degli strumenti potentissimi, sia per a creare confusione nel codice, purtroppo, che per visualizzare a video le informazioni nel modo più consono alle varie circostanze.

    Analizziamo approfonditamente i vari attributi:

    Qui pixel indica la larghezza della cella in unità di riferimento assolute, mentre se si utilizza percentuale questa indica la percentuale della larghezza massima della tabella da assegnare alla cella.

    Nel caso in cui la somma dei pixel delle singole celle ecceda la larghezza totale della tabella, lo spazio viene ripartito in proporzione alle larghezze assegnate alle celle.

    Ad esempio se alla tabella è assegnata una larghezza di 300 pixel e alle tre celle che la contengono sono assegnate 100,200 e 300 pixel, lo spazio finale effettivo sarà di 50, 100 e 150 pixel.

    Di default la larghezza di una cella è atta a contenere il suo contenuto nella riga presente o nelle altre righe; si tenga infatti presente che in una tabella le celle sono tutte incolonnate e non possono andare per i fatti loro !.

    Con questo attributo pixel indica l'altezza della cella.

    Di default l'altezza è impostata in modo che la cella riesca a contenere il testo più esteso della riga che si sta definendo ( anche su più righe quindi ). In ogni caso ogni riga della tabella avrà l'altezza della cella più alta.

    Con gli attributi rowspan e colspan è possibile fondere più celle in un'unica cella; rispettivamente le fondono su riga o su colonna.

    Ad esempio in una tabella 4x4 se nel definire la cella in posizione 2,2 chiediamo di fondere assieme la cella corrente con quella a destra e con quella in basso scriviamo: <TD rowspan=2 colspan=2> Contenuto Cella </TD>.

    Se utilizzate il metodo che utilizzo io e cioè definite una cella per ogni riga di codice, il calcolo della posizione x,y di una cella diventa molto semplice e si fa cosi:

    #riga = ( (y-1) * #ColonnePerRiga ) + x

    La sottrazione dell'unità da y è necessaria perché tale metodo normalmente funziona con numerazione in base 0, cioè l'indice della prima riga non è 1, ma 0; nel nostro caso #riga=( (2-1) * 4 ) + 2 = 6 ed è infatti proprio nella sesta riga della tabella che abbiamo effettuato l'accorpamento delle 4 celle ( 2 in orizzontale e 2 in verticale ).

    Provate come esempio il codice seguente:

    <HTML>
    <HEAD>
    <TITLE> Prova Tabella </TITLE>
    </HEAD>
    <BODY>

    <TABLE BORDER="1">
    <TR>
    <TD>a</TD>
    <TD>b</TD>
    <TD>c</TD>
    <TD>d</TD>
    </TR>
    <TR>
    <TD>e</TD>
    <TD rowspan=2 colspan=2>f</TD>
    <TD>g</TD>
    <TD>h</TD>
    </TR>
    <TR>
    <TD>i</TD>
    <TD>j</TD>
    <TD>k</TD>
    <TD>l</TD>
    </TR>
    <TR>
    <TD>m</TD>
    <TD>n</TD>
    <TD>o</TD>
    <TD>p</TD>
    </TR>
    </TABLE>

    </BODY>
    </HTML>

    Un effetto singolare che vedrete è che questa operazione ha fatto si che la lettera 'h' esce fuori dalla tabella alla seconda riga, così come le lettere 'k' e 'l' dalla terza.

    Ciò è dovuto al fatto che abbiamo richiesto dello spazio aggiuntivo per una cella e tale spazio, precedentemente sottratto ad altre celle, viene nuovamente recuperato effettuando una traslazione a destra dei contenuti di queste ultime.

    Questo è un effetto spesso indesiderato ( perlomeno antiestetico ) ed una soluzione è eliminare le(celle che verrebbero traslate.

    Gli ultimi attributi di cella sono:

    Gli attributi align e valign hanno lo stesso significato di quelli utilizzati in <TR> e controllano quindi l'allineamento orizzontale e verticale. ( <TR> è stato trattato nella nona puntata ).

    L'attributo interessante, con cui bisognerebbe fare qualche esperimento, è nowrap. Tale attributo fa si che il testo non vada automaticamente a capo, ma cerca di restare sulla riga corrente. Il comportamento di nowrap varia a seconda delle impostazioni della tabella ( larghezza in pixel o percentuale pagina ) ed è equivalente all'utilizzo degli spazi unificatori &nbsp.

    Dalla prossima puntata inizieremo a parlare dei collegamenti ipertestuali.

     

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