HTML.itHTML.it


 Raggruppare gli stili delle colonne


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:

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.

    Torna a inizio pagina