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à</th>
<th>Fatturato
da attività 1 (in euro)</th>
<th>Fatturato
da attività 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.