HFG |
|
| 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 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 ,, oe – 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 e prima di, 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">
<caption>
Fatturato dell'azienda XYZ
| Mesi di attività | Fatturato da attività 1 (in euro) | Fatturato da attività 2 (in euro) |
|---|
eccetera.... |
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">
<col span="5" bgcolor="blue" align="left">
<col span="5" bgcolor="green" align="right">
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. |
| | |
