Tag HTML <colgroup>

Il tag HTML <colgroup> viene utilizzato per specificare un gruppo di colonne con proprietà comuni all'interno di una tabella. Il tag può contenere solo elementi <col>, che definiscono le proprietà delle colonne.

Il tag <colgroup> è annidato all'interno di un tag <table>, prima di <thead>, <tbody>, <tfoot> e <tr>, e dopo <caption>, se utilizzato (nel tag <caption> viene inserita la didascalia della tabella).

Una singola tabella HTML può contenere più tag <colgroup>.

Perché usare `<colgroup>`?

Le celle di una tabella HTML vengono scritte riga per riga, quindi non esiste un punto naturale a cui collegare lo stile da applicare a un'intera colonna. Gli elementi <colgroup> e <col> risolvono questo problema: descrivono le colonne della tabella una volta sola, in anticipo, e permettono di applicare proprietà condivise (larghezza, sfondo, bordi) a ogni cella di quelle colonne contemporaneamente.

Due vantaggi pratici:

Stilizzare più colonne in una volta sola. Impostando una larghezza o uno sfondo su un gruppo di colonne, non è necessario ripeterlo su ogni <td> di ogni riga.
Separare la struttura dalla presentazione. Le definizioni delle colonne si trovano in un piccolo blocco vicino all'inizio della tabella invece di essere distribuite tra le celle, il che rende il markup più facile da leggere e mantenere.

Sintassi

Il tag <colgroup> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<colgroup>) e quello di chiusura (</colgroup>).

Esempio del tag HTML `<colgroup>`:

Tag HTML <colgroup>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Provalo tu stesso »

Risultato

Result

Comprendere l'attributo `span`

span controlla quante colonne consecutive un elemento copre, ma ha un significato leggermente diverso a seconda di dove viene utilizzato:

span su <colgroup> dichiara che il gruppo stesso si estende su quel numero di colonne. Si usa quando si vuole trattare più colonne consecutive come un unico blocco stilizzato e non si hanno bisogno di elementi <col> figli separati. Ad esempio, <colgroup span="3"> raggruppa le prime tre colonne.
span su un <col> figlio dichiara a quante colonne si applica quel singolo <col>. Questo consente a un singolo <colgroup> di descrivere più colonne con regole diverse, come nell'esempio precedente dove <col span="2"> copre le prime due colonne e il <col> successivo copre la terza.

Se un <colgroup> contiene elementi <col> figli, sono questi ultimi a descrivere le colonne e non si dovrebbe mettere span anche sul <colgroup>.

Usare più elementi `<colgroup>`

Una tabella può contenere più di un <colgroup>. Ogni gruppo occupa il successivo insieme di colonne in ordine, il che è utile per separare visivamente le sezioni logiche di una tabella:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="background-color:#eee;" />
      </colgroup>
      <colgroup span="2" style="background-color:#cde6a5;"></colgroup>
      <tr>
        <th>Product</th>
        <th>Q1 Sales</th>
        <th>Q2 Sales</th>
      </tr>
      <tr>
        <td>Widgets</td>
        <td>120</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Gadgets</td>
        <td>90</td>
        <td>110</td>
      </tr>
    </table>
  </body>
</html>

Result

Il primo <colgroup> stilizza la colonna più a sinistra; il secondo, con span="2", stilizza le due colonne delle vendite come un unico gruppo.

Stilizzare le colonne con CSS

L'approccio moderno più pulito è mantenere il markup minimale e spostare la presentazione in un foglio di stile, puntando agli elementi <col> e <colgroup> con CSS invece degli attributi deprecati align, valign e width. Un insieme limitato ma utile di proprietà CSS si applica tramite questi elementi: background-color, background, border, width e visibility.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
      .highlight {
        background-color: #8ebf42;
      }
      col.narrow {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="narrow" />
        <col class="highlight" />
      </colgroup>
      <tr>
        <th>Code</th>
        <th>Item</th>
      </tr>
      <tr>
        <td>A1</td>
        <td>Notebook</td>
      </tr>
    </table>
  </body>
</html>

Un aspetto pratico da tenere presente: il background-color di una colonna è visibile solo dove le celle stesse sono trasparenti. Se un <td> o un <tr> imposta il proprio sfondo, il colore a livello di cella ha la precedenza su quello della colonna.

Accessibilità

<colgroup> e <col> sono solo presentazionali — influenzano l'aspetto visivo ma non hanno alcun significato semantico per le tecnologie assistive. I lettori di schermo non annunciano i gruppi di colonne e il loro utilizzo non associa le intestazioni alle celle dati. Per rendere una tabella accessibile, utilizzare vere celle di intestazione (<th>) con attributi scope appropriati; non fare affidamento su <colgroup> per trasmettere la struttura.

Attributi

Nota: gli attributi di presentazione come align, valign e width sono deprecati in HTML5. Stilizzare le colonne con CSS (text-align, vertical-align, width) puntando agli elementi <col> e <colgroup>.

Attributo	Valore	Descrizione
`align`	`left` \| `right` \| `center` \| `justify` \| `char`	Imposta l'allineamento del contenuto della colonna. Non supportato in HTML5.
`char`	carattere	Allinea il contenuto della colonna al carattere specificato. Utilizzato solo se `align="char"`. Non supportato in HTML5.
`charoff`	numero	Sposta il contenuto della cella rispetto al carattere specificato. Utilizzato solo se `align="char"`. Non supportato in HTML5.
`span`	numero	Imposta il numero di colonne a cui si applica l'elemento `<col>`. Il valore predefinito è 1.
`valign`	`top` \| `middle` \| `bottom` \| `baseline`	Allinea verticalmente il contenuto. Non supportato in HTML5.
`width`	`%` \| `pixels` \| `relative_length`	Imposta la larghezza della colonna. Non supportato in HTML5.

Il tag <colgroup> supporta anche gli Attributi Globali e gli Attributi Evento.

Esercizio

Pratica

Qual è la corretta descrizione e caso d'uso del tag HTML colgroup?

Il tag <colgroup> definisce un gruppo di una o più colonne in una tabella per la formattazione.<colgroup> è un tag auto-chiudente.Le proprietà CSS come background-color e width non si applicano mai tramite <colgroup>.Il tag <colgroup> non supporta l'attributo span.Il tag <colgroup> viene usato per raggruppare il contenuto dell'intestazione in una tabella.

Perché usare <colgroup>?