7° puntata Come descrivere una tabella Le tabelle in HTML Migliorare l'aspetto della tabella
	Ritorna all'indice

Chiunque abbia giocato a battaglia navale sa che la scacchiera sulla quale si svolge la finta battaglia è una griglia formata da caselle quadrate sulle quali è possibile disporre le proprie navi; mentre i piccoli sommergibili occupano una sola casella, le navi più grandi come gli incrociatori e le portaerei possono coprire anche più posti adiacenti. Le celle. gli elementi principali delle tabelle HTML, sono come navi sulla scacchiera e possono occupare più righe e più colonne, permettendoci di creare tabelle elaborate. Prima dell'avvento dei fogli di stile e del posizionamento assoluto, le tabelle erano l'unico modo di allineare il testo in verticale e di dare una veste tipografica alla pagina. Vediamo ora come descrivere le tabelle in modo conciso e come HTML ci permette di crearle.

Come descrivere una tabella

Le tabelle in HTML sono formate da due elementi principali, le RIGHE e le CELLE in esse contenute. E le colonne? le colonne hanno un ruolo secondario per il seguente motivo.

Supponiamo di avere la seguente tabella:

Per descriverla al nostro amico telefonico dovremmo pronunciare le seguenti parole:

"prima riga: scrivi A nella prima cella, B nella seconda e C nella terza; seconda riga: scrivi D nella prima cella, E nella seconda e F nella terza; terza riga: scrivi G nella prima cella, H nella seconda e I nella terza"

Come potete vedere non abbiamo avuto bisogno di dire che la tabella ha 3 colonne, perchè è implicito, dato che ogni riga che abbiamo descritto contiene sempre 3 celle. Inoltre per maggiore chiarezza abbiamo elencato le righe e le celle specificandone l'ordine (prima, seconda e terza) anche se sono informazioni superflue; il nostro amico avrebbe avuto le stesse informazioni se gli avessimo detto: "riga: scrivi A in una cella, B in una cella, C in una cella; riga: scrivi D in una cella...

E se volessimo descrivere la seguente tabella, in cui abbiamo celle più ingombranti, come le navi ammiraglie della nostra flotta?

In questo caso dovremmo dare informazioni aggiuntive quando abbiamo a che fare con le celle più estese:

"prima riga: scrivi A nella prima cella, B nella seconda (che occupa due colonne); seconda riga: scrivi D nella prima cella, E nella seconda (che occupa due righe) e F nella terza; terza riga: scrivi G nella prima cella, I nella seconda"

Come mai nella terza riga ci sono solo due celle? Perché un posto è già occupato: infatti una cella della riga precedente occupa due righe in verticale, "invadendo" il secondo posto della terza riga; quella che descriviamo come seconda cella in realtà deve posizionarsi nel primo posto libero, ovvero il terzo.
Il vostro amico al telefono non sa in anticipo come è formata la tabella, ma la completerà disegnando una riga per volta (un po' come accade nel celebre gioco TETRIS, con l'unica differenza che i pezzi scorrono dal basso verso l'alto):

Traduciamo ora questi comandi in HTML, utilizzando gli opportuni tag.

Le tabelle in HTML

I tag principali che descivono una tabella in HTML sono tre: il tag TABLE che indica la tabella stessa, un tag TR per ciascuna riga della tabella e un tag TD per ogni cella contenuta in ciascuna riga. Quindi ogni tabella è composta necessariamente da:

• una coppia <table> </table>, che racchiude tutti gli altri elementi della tabella
• una coppia <tr> </tr> per ogni riga della tabella, al cui interno si trovano le celle
• una coppia <td> </td> per ogni cella della tabella, al cui interno si trova quello che il browser visualizzerà come contenuto

Traducendo in linguaggio HTML le istruzioni che abbiamo dato al nostro amico telefonico, scriviamo il codice HTML per disegnare le due tabelle di cui abbiamo parlato sopra. Per comunicare al browser che una cella occupa più posizioni adiacenti utilizziamo gli attributi ROWSPAN (il cui valore indica il numero di righe occupate) e COLSPAN (il cui valore indica il numero di colonne occupate).

Come abbiamo visto nelle scorse puntate il browser ignora gli spazi aggiuntivi; se avessimo scritto <table><tr><td>A</td><td..., non avremmo notato a schermo alcuna differenza, ma utilizzare gli a-capo e i rientri rende il codice HTML molto più comprensibile e gestibile, specialmente in caso di tabelle lunghe e complesse.

Vediamo ora come i nostri browser visualizzano il seguente documento HTML che contiene le due tabelle appena create, con l'unica aggiunta dell'attributo BORDER al tag TABLE, necessario per visualizzare il bordo delle celle.

<html>
<head>
  <title>HTML 4 - Tabelle</title>
</head>
<body>
  <table border>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
    <tr>
      <td>G</td>
      <td>H</td>
      <td>I</td>
    </tr>
</table>
<br>
<table border>
    <tr>
      <td>A</td>
      <td colspan="2">B</td>
    </tr>
    <tr>
      <td>D</td>
      <td rowspan="2">E</td>
      <td>F</td>
    </tr>
    <tr>
      <td>G</td>
      <td>I</td>
    </tr>
</table>
</body>
</html>

quello che visualizza Internet Explorer (versione 5.0)	quello che visualizza Netscape Navigator (versione 4.06)

Queste tabelle sono un esempio piuttosto grossolano: il bordo è massiccio, non c'è allineamento del contenuto e il testo è il solito Times 12. Ma prima di migliorare l'aspetto delle nostre tabelle è necessario introdurre il tag TH, che permette di definire una cella di intestazione: questo elemento ha una funzione analoga a TD, con l'unica differenza che il browser ne differenzia il contenuto rispetto alle normali celle (di solito centrandolo ed evidenziandolo in neretto).

Migliorare l'aspetto della tabella

I tag che abbiamo visto finora hanno una serie di attributi che servono a dare informazioni aggiuntive come l'allineamento e le dimensioni:

• l'allineamento orizzontale del contenuto della cella è dato da ALIGN, che può avere i valori left (a sinistra, valore predefinito), center (al centro), right (a destra) e justify (giustificato)
• l'allineamento verticale del contenuto della cella è dato da VALIGN, che può avere i valori top (in alto), middle (in mezzo, valore predefinito) e bottom (in basso)
• gli attributi ROWSPAN e COLSPAN definiscono il numero di righe e colonne coperte; questi due attributi possono coesistere ed hanno per valore un numero intero
• gli attributi WIDTH e HEIGHT descrivono la larghezza e l'altezza della cella: il loro valore può essere un numero intero (che indica la dimensione in pixel) o un valore percentuale (che indica la dimensione relativa in percentuale rispetto al tag che lo contiene)

Ci sono poi altri attributi della cella meno comuni, come BGCOLOR (il colore di sfondo) e BACKGROUND (l'immagine da caricare come sfondo della cella), e attributi di nuova generazione come AXIS (che definisce a quale categoria appartiene il contenuto della cella), CHAR e CHAROFF (per allineare in verticale rispetto ad un carattere, per esempio il punto decimale).

E se volessimo variare il font, le dimensioni o il colore del contenuto di una cella? In questo caso il tag TD non ha alcun potere e dobbiamo variare il formato del testo all'interno di ciascuna cella utilizzando i tag che abbiamo già visto.
Per esempio se vogliamo che il contenuto di una cella sia del testo Verdana alto 10 punti in grassetto blu occorre scrivere:
<td><font face="Verdana" size="2" color="#0000FF"><b>Testo</b></font></td>

Chiaramente questo comporta molto lavoro, dato che si deve variare il formato del testo in tutte le celle delle nostre tabelle; il problema può essere superato o usando editor specifici come FrontPage (è possibile selezionare tutte le celle e quando si cambia il formato ci pensa il programma a riportare il codice in tutte le celle) oppure usando i fogli di stile.
È inoltre possibile inserire all'interno della cella qualunque elemento HTML (liste, immagini, altre tabelle) e molte pagine Web sfruttano questo fatto per impostare il layout della pagina. Per esempio in queste pagine ho utilizzato tabelle senza bordi per allineare il testo con le immagini o per creare riquadri di colore diverso.

Gli attributi del tag TR, che non può contenere testo o altri elementi diversi da TD o TH, sono riferiti a tutte le celle della riga: definire il valore di ALIGN, VALIGN, CHAR e CHAROFF equivale ad applicarlo a tutte le celle della riga stessa.

Il tag TABLE possiede i seguenti attributi:

• l'allineamento orizzontale della tabella è dato da ALIGN (valori left, center e right)
• gli attributi WIDTH e HEIGHT descrivono la larghezza e l'altezza della tabella, e il valore può essere un numero intero (dimensioni in pixel) o un valore percentuale (dimensioni in percentuale rispetto al tag che lo contiene)
• l'attributo BORDER dà le dimensioni del bordo in pixel (è possibile variarne il colore con l'attributo BORDERCOLOR)
• l'attributo CELLSPACING specifica la distanza tra i bordi delle celle e l'attributo CELLPADDING specifica la distanza in pixel tra il contenuto della cella e i bordi della cella stessa

Per chiarire la differenza tra CELLSPACING e CELLPADDING vediamo quattro tabelle formate da una sola cella con valori di spaziatura diversi:

Mentre nelle prime versioni di HTML non era possibile scegliere quali bordi mostrare, in HTML 4 esistono due nuovi attributi del tag TABLE che permettono di definire quali lati esterni e quali linee interne mostrare. Nel primo caso si utilizza l'attributo FRAME (alcuni valori possibili sono void, above, below, hsides e vsides), nel secondo l'attributo RULES (alcuni valori possibili sono none, rows e cols).

Chiudiamo questa corposa puntata sulle tabelle introducendo altri tag meno utilizzati che fanno parte dello standard HTML.
Innanzitutto CAPTION, che definisce il titolo della tabella, poi THEAD, TBODY e TFOOT, che definiscono l'intestazione, il corpo e la base della tabella, gestendo l'allineamento di tutte le celle in esse contenute.
Infine una citazione particolare per i tag COLGROUP e COL, che definiscono gruppi di colonne, con la possibilità di specificarne allineamenti e dimensioni: all'interno del tag COLGROUP ogni gruppo è definito da un tag COL (l'attributo SPAN dà il numero di colonne facenti parte del gruppo, mentre gli attributi WIDTH, ALIGN, CHAR e CHAROFF si applicano a tutte le celle del gruppo di colonne).

Il documento HTML di esempio è costituito da una tabella che contiene due tabelle.

<html>
<head>
<title>HTML 4 - Tabelle</title>
</head>
<body>
<table border="0" width="280">
  <caption align="left"><img src="Immagini/basket.gif"><b><font face="Georgia" size="5" color="#FF7000">Basket - Serie A1</font></b></caption>
  <tr>
    <td>
      <table border="1" width="100%" cellpadding="1" cellspacing="0" bordercolorlight="#FFFFFF" bordercolordark="#808080" rules="rows">
        <tr>
          <th bgcolor="#E6FFF2" colspan="2"><font face="Verdana" size="2">Stagione 2000-2001</font></th>
        </tr>
        <tr>
          <td align="center" width="40"><font face="Arial" size="2">29-5</font></td>
          <td width="240"><font face="Arial" size="2">Kinder Bologna</font></td>
        </tr>
        <tr>
          <td align="center"><font face="Arial" size="2">25-9</font></td>
          <td><font face="Arial" size="2">Scavolini Pesaro</font></td>
        </tr>
        <tr>
          <td align="center" valign="top"><font face="Arial" size="2">24-10</font></td>
          <td><font face="Arial" size="2">Paf Bologna, Adr Roma e<br>Benetton Treviso</font></td>
        </tr>
        <tr>
          <td align="center"><font face="Arial" size="2">19-15</font></td>
          <td><font face="Arial" size="2">Monte Paschi Siena</font></td>
        </tr>
        <tr>
          <td align="center"><font face="Arial" size="2">16-18</font></td>
          <td><font face="Arial" size="2">Snaidero Udine e Cordivari Roseto</font></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="10"></td>
  <tr>
    <td>
      <table border="1" width="100%" cellpadding="1" cellspacing="0" bordercolorlight="#FFFFFF" bordercolordark="#808080">
        <tr>
          <th bgcolor="#E6FFF2" colspan="2"><font face="Verdana" size="2">Play Off</font></th>
        </tr>
      </table>
      <table border="1" width="100%" cellpadding="2" cellspacing="0" bordercolorlight="#FFFFFF" bordercolordark="#808080" rules="cols">
        <colgroup>
          <col align="center" width="50%">
          <col span="2" width="25%">
        </colgroup>
        <thead>
          <tr bgcolor="#E3FFFF">
            <th><font face="Arial" size="2">Quarti</font></th>
            <th><font face="Arial" size="2">Semifinali</font></th>
            <th><font face="Arial" size="2">Finale</font></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><font face="Arial" size="2">Kinder-Cordivari 3-0</font></td>
            <td rowspan="2"><font face="Arial" size="2">Kinder 3<br>Benetton 0</font></td>
            <td rowspan="4"><font face="Arial" size="2">Kinder 3<br>Paf 0</font></td>
          </tr>
          <tr>
            <td><font face="Arial" size="2">Adr-Benetton 1-3</font></td>
          </tr>
          <tr>
            <td><font face="Arial" size="2">Scavolini-Snaidero 3-2</font></td>
            <td rowspan="2"><font face="Arial" size="2">Scavolini 0<br>Paf 3</font></td>
          </tr>
          <tr>
            <td><font face="Arial" size="2">Paf-M.Paschi 3-0</font></td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

quello che visualizza Internet Explorer (versione 5.0)	quello che visualizza Netscape Navigator (versione 4.06)

La versione di Netscape utilizzata non riconosce né l'attributo RULES di TABLE, né i tag COLSGROUP e COL, mentre Explorer 5 li interpreta correttamente, visualizzando solo alcuni bordi ed applicando le dimensioni richieste alle colonne della tabella Play-Off.

Concluso questo argomento molto importante (esistono pochissimi siti senza tabelle), nella prossima puntata continueremo il nostro viaggio con un argomento altrettanto importante: il mondo dei frame.