Ringraziamento particolare a HTML.IT che mi ha fornito online queste pagine.

Le tabelle sono una delle parti più importanti di tutto il codice HTML: nate sin dagli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i layout grafici.

Il loro ampio utilizzo all’interno dei documenti ha fatto sì che – nel passaggio dall’HTML 3.2 all’HTML 4 - le specifiche delle tabelle venissero estese con una serie di notazioni destinate a “far ordine” all’interno di un codice che rischiava di diventare troppo vasto.

Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono:

In questi nostri primi esempi presupponiamo che il numero delle celle all’interno di ciascuna riga sia costante: ogni riga avrà cioè lo stesso numero di celle. Ci sono dei metodi per variare il numero delle celle all’interno di una riga, ma li vedremo in seguito.

L’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle. Ad esempio:

<table border=”2”>

Lo useremo in questi esempi, altrimenti non percepiremmo la struttura di quanto stiamo costruendo. Ecco un primo esempio di tabella:

<table border="1">
    <tr>
       <td>prima cella</td>
       <td>seconda cella</td>
   </tr>

   <tr>
      <td>terza cella</td>
      <td>quarta cella</td>
   </tr>
</table>

Che viene visualizzato così:

Possiamo specificare la larghezza e l'altezza delle tabelle tramite gli attributi width e height che possono essere riferiti a tutti e tre i tag (<table>, <tr>, <td>). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo “%”): in questo caso la tabella si adatta secondo lo spazio a disposizione.

<table width="300" height="200" border="1">
    <tr>
       <td>prima cella</td>
       <td>seconda cella</td>
   </tr>

   <tr>
      <td>terza cella</td>
      <td>quarta cella</td>
   </tr>
</table>

Che viene visualizzato così:

Oppure:

<table width="75%" border="1">
    <tr>
       <td width="25%">prima cella</td>
       <td width="75%">seconda cella</td>
   </tr>

   <tr>
      <td width="25%">terza cella</td>
      <td width="75%">quarta cella</td>
   </tr>
</table>

Che viene visualizzato così:

Di solito la larghezza e l’altezza globali della tabella sono espresse nel tag <table>, mentre la larghezza delle varie celle viene espressa nei <td> della prima riga. L’altezza in percentuale non sempre è visualizzata correttamente da tutti i browser.

Come detto inizialmente le tabelle vanno immaginate come delle griglie, tutto sommato abbastanza rigide: l’eventuale larghezza specificata nelle celle della prima riga avrà effetto dunque anche sulle celle delle righe sottostanti.

Viceversa non è possibile variare arbitrariamente le dimensioni delle celle: le misure specificate nelle righe sottostanti non avranno infatti effetto, come si può vedere nell’esempio allegato, che non è corretto.

Le dimensioni espresse non devono tuttavia essere in contraddizione ma mano che si procede verso l’interno della tabella: in un caso simile infatti “vincerebbe” il valore specificato nel tag genitore, come si può vedere nella pagina di esempio.

Inoltre (come si evince dagli esempi) la visualizzazione dei layout con indicazioni non corrette è a discrezione del browser, quindi si rischia di ottenere risultati diversi da quelli voluti.

Come è possibile suddividere le righe di una tabella in gruppi ordinati, allo stesso modo è possibile raggruppare gli stili delle colonne. Il tag da usare è il <colgroup> e serve per fornire indicazioni su come le colonne debbano essere visualizzate.

Purtroppo questo tag nel momento in cui scrivo non funziona ancora correttamente con tutti i browser: il tag è correttamente visualizzato da Internet Explorer, è supportato solo in parte da Opera, ma non è ben interpretato da Mozilla (e dunque neanche da Netscape 7), che lo ignora tranquillamente. Tuttavia trattandosi di una specifica del W3C in futuro il supporto a questa sintassi dovrebbe essere maggiore.

Prima di vedere nel dettaglio questo tag anticipiamo due concetti che vedremo in seguito quando ci occuperemo più approfonditamente della formattazione delle tabelle e che ora ci servono per meglio comprendere l'uso di <colgroup>.

• L’attributo align può essere riferito sia a <tr>, sia a <td> e serve per definire l’allineamento dei contenuti a sinistra, a destra o al centro (left, right, center)
• L’attributo bgcolor può essere riferito tanto a <table>, <tr>, o <td> e – come abbiamo visto a proposito del <body> - consente di impostare un colore di sfondo

Il tag <colgroup> - la cui chiusura è facoltativa - va posto subito dopo il tag <caption> e prima di <thead>, e consente di impostare un layout unico per le colonne senza avere la necessità di specificare allineamento del testo, o il colore di sfondo per ogni singola cella.

Con l’attributo span (da non confondere con il tag <span>) possiamo impostare il numero di colonne che fanno parte del gruppo.

Per avere un layout di questo genere:

Figura 1. Esempio di uso dell'attributo «span»

basterà allora scrivere:

<table width="75%" border="1">

 <colgroup bgcolor="#00FFCC" width="20%" align="right"></colgroup>
 <colgroup span="2" bgcolor="#33CCFF" width="30%" align="center">

 <caption>
  <div align="center"><b>Fatturato dell'azienda XYZ</b></div>
 </caption>

 <thead>
  <tr>
   <th>Mesi di attivit&agrave;</th>
   <th>Fatturato da attivit&agrave; 1 (in euro)</th>
   <th>Fatturato da attivit&agrave; 2 (in euro)</th>
  </tr>
 </thead>

 eccetera....

</table>

come illustrato dettagliatamente in questa pagina.

<colgroup> ha l’indubbio vantaggio di poter attribuire in una sola volta la formattazione a un numero elevato di colonne. Ad esempio:

<colgroup span=”40” align=”right”>

Se si preferisce attribuire più esplicitamente lo stile ad una colonna si può usare il tag <col> (che non necessita chiusura) all’interno di <colgroup>. In questo caso l’attributo span va riferito a <col> e non a <colgroup>.

Ad esempio:

<colgroup span="5" width="20" bgcolor="red"></colgroup>
<colgroup width="60">
    <col span="5" bgcolor="blue" align="left">
    <col span="5" bgcolor="green" align="right">
</colgroup>

come mostrato in dettaglio nella pagina di esempio.

Approfondimenti

I tag <colgroup> e <col> in teoria supportano anche la possibilità di creare delle celle larghe proporzionalmente. Ad esempio:

<colgroup width=”1*”>
<colgroup width=”2*”>

questa sintassi dovrebbe dividere lo spazio a disposizione in tre parti e assegnare una parte alla prima cella e due parti alla seconda cella. In realtà questa sintassi non è ancora supportata da nessun browser.