Il tag <COLGROUP> in Html

In questa lezione del corso HTML ti spiego come funziona il tag <colgroup>

Il tag <col> ti consente di raggruppare le colonne di una tabella e applicare loro delle proprietà comuni..

Ad esempio, puoi utilizzarlo per impostare la larghezza delle colonne o il colore di sfondo di tutte le colonne di una tabella.

Nota. Il tag colgroup va inserito all'interno del tag <table> o di altri elementi HTML usati per creare una tabella come il tag <thead> per definire l'intestazione della tabella, il tag <tbody> per definire il corpo della tabella e il tag <tfoot> per definire il piè di pagina della tabella.

Per definire le caratteristiche delle colonne devi utilizzare il tag <col> tra il tag di apertura <colgroup> e di chiusura </colgroup>.

Ecco un esempio pratico.

<table>
<colgroup>
<col style="background-color: #eee;">
<col span="2" style="background-color: #ddd;">
</colgroup>
<tr>
<td>2020</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>2021</td>
<td>Tom</td>
<td>Doe</td>
</tr>
</table>

In questo esempio hai usato il tag <colgroup> per definire l'aspetto delle tre colonne della tabella.

La prima colonna con uno sfondo grigio chiaro
Le restanti due colonne con uno sfondo grigio scuro.

Il risultato sul browser è il seguente

2020	John	Smith
2021	Tom	Doe

Quali sono i vantaggi? Il tag colgroup separa il contenuto della tabella dalla definizione del suo design. In questo modo il codice HTML diventa più pulito e la tabella è più facile da gestire.

Puoi utilizzare il tag <colgroup> all'interno del tag <table> nella sezione <body> del documento HTML.

Ecco un esempio di pagina web completa.

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<table>
<colgroup>
<col style="width: 20%">
<col style="width: 30%">
<col style="width: 50%">
</colgroup>
<tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
<tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr>
<tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr>
</table>
</body>
</html>

In conclusione, grazie al tag <colgroup> puoi raggruppare le colonne della tabella e assegnargli uno stile o delle caratteristiche in comune.