Il tag <COL> in Html
In questa lezione ti spiego come funziona il tag <col> nel linguaggio HTML
<col>
Il tag <col> ti permette di specificare le proprietà di una o più colonne di una tabella.
Ad esempio, puoi usarlo per definire la larghezza delle colonne, l'allineamento e altri parametri di visualizzazione.
Nota. Puoi utilizzare il tag <col> in due modi diversi: come elemento autonomo, oppure all'interno del tag <colgroup>.
Ecco un esempio pratico.
<table>
<colgroup>
<col width: 30%>
<col width: 70%>
</colgroup>
<tr>
<td>Nome:</td>
<td>John</td>
</tr>
<tr>
<td>Cognome:</td>
<td>Doe</td>
</tr>
</table>
In questa tabella il tag <col> è utilizzato all'interno del tag <colgroup> per definire la larghezza di due colonne tramite l'attributo width.
- La prima colonna occupa il 30% della larghezza della tabella.
- La seconda colonna occupa il 70% della larghezza della tabella.
Il risultato sul browser è il seguente
| Nome: | John |
| Cognome: | Doe |
In questo modo puoi specificare le caratteristiche di ogni singola colonna in modo organico, senza doverle specificare sulle colonne.
Per definire le caratteristiche delle colonne puoi usare i sequenti attributi:
- width
Definisce la larghezza della colonna, espressa in pixel o in percentuale rispetto alla larghezza della tabella stessa. - align
Specifica l'allineamento del testo all'interno della colonna. Puoi utilizzare i valori "left", "right" o "center" per allineare il testo a sinistra, a destra o al centro della colonna. - valign
Specifica l'allineamento verticale del contenuto della colonna. Puoi utilizzare i valori "top", "middle" o "bottom" per allineare il contenuto in alto, al centro o in basso della colonna. - bgcolor
Questo attributo ti consente di specificare il colore di sfondo della colonna. - span
Questo attributo ti consente di specificare il numero di colonne che la colonna in questione deve coprire. Ad esempio, se imposti "span=2", la colonna occupa lo spazio di due colonne adiacenti. - style
Questo attributo ti permette di definire le proprietà CSS della colonna.
L'attributo style è veramente molto utile perché ti permette di utilizzare le proprietà del foglio di stile CSS.
<table>
<colgroup>
<col style="width: 30%">
<col style="width: 70%">
</colgroup>
<tr>
<td>Nome:</td>
<td>John</td>
</tr>
<tr>
<td>Cognome:</td>
<td>Doe</td>
</tr>
</table>
Nota. Le proprietà CSS ti consentono di ottenere gli stessi risultati degli attributi Html. Ad esempio, per definire la larghezza delle colonne puoi usare la proprietà width all'interno dell'attributo style. Il foglio di stile CSS è molto più potente e ti permette di ottenere effetti grafici altrimenti impossibili da realizzare in Html. Pertanto, ti consiglio di utilizzare l'attributo style con le proprietà CSS anziché i singoli attributi width, valign, bgcolor del linguaggio Html.
Puoi utilizzare il tag <col> all'interno del tag <colgroup> in una tabella <table> nella sezione <body> del documento HTML.
- <!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 <col> puoi personalizzare l'aspetto della tabella, definendo le caratteristiche di ogni singola colonna.
